Leaflet.Graticule源码分析以及经纬度汉化展示

目录

前言

一、源码分析

1、类图设计

2、时序调用 

3、调用说明

二、经纬度汉化

1、改造前

2、汉化

3、改造效果

总结


前言

        在之前的博客基于Leaflet的Webgis经纬网格生成实践中,已经深入介绍了Leaflet.Graticule的实际使用方法和进行了简单的源码分析。认真看过实例效果的朋友一定会发现,在页面上生成的网格中,其边线的经度和维度都是英文的,如下图所示:

         那如何进行汉化改造支持呢,这里需要进行显示支持。本文将重点详细分析这款经纬网生成的源码,以及其内在的调用逻辑,通过本文,可以让您知道经纬网的构造原理,做到知其然知其所以然。

一、源码分析

1、类图设计

        相对来说,这种前端的工具型框架设计得还是比较简单的,没有过多的依赖。相当于后端的一个类,这里采用OOP的方式进行源码分析。众所周知,通常一个类,包含属性和方法。Leaflet.Graticule也无外乎如此,其属性定义如下图所示。

        由于一张图的篇幅有限,我们暂且把方法给隐藏起来了。其具体的方法架构如下图:

2、时序调用 

        时序图可以用来很好的描述方法内部的流转和调用逻辑,方便对某一个方法的全生命进行跟踪和展示。这里也同样采用这种方法来进行调用流程的阐述。

3、调用说明

        第一步:初始化配置参数,在这里会调用构造方法进行对象创建。其定义参考如下:

var obj = L.latlngGraticule({showLabel: true,color: 'red',zoomInterval: {latitude: [{start: 2, end: 4, interval: 30},{start: 5, end: 20, interval: 5}],longitude: [{start: 2, end: 4, interval: 30},{start: 5, end: 20, interval: 5}]}});

         第二步、调用Layer.js的addTo方法进行地图添加。

addTo: function (map) {map.addLayer(this);return this;}

        第三步、通过addLayer将地图添加到定义的leaflet地图中,代码如下:

_layerAdd: function (e) {var map = e.target;// check in case layer gets added and then removed before the map is readyif (!map.hasLayer(this)) { return; }this._map = map;this._zoomAnimated = map._zoomAnimated;if (this.getEvents) {var events = this.getEvents();map.on(events, this);this.once('remove', function () {map.off(events, this);}, this);}this.onAdd(map);if (this.getAttribution && map.attributionControl) {map.attributionControl.addAttribution(this.getAttribution());}this.fire('add');map.fire('layeradd', {layer: this});

        第四步、通过reset触发绘制方法,进行基于Canvas的经纬度线的绘制。

 _reset: function () {var container = this._container,canvas = this._canvas,size = this._map.getSize(),lt = this._map.containerPointToLayerPoint([0, 0]);L.DomUtil.setPosition(container, lt);container.style.width = size.x + 'px';container.style.height = size.y + 'px';canvas.width  = size.x;canvas.height = size.y;canvas.style.width  = size.x + 'px';canvas.style.height = size.y + 'px';this.__calcInterval();this.__draw(true);},

        第五步、绘制经纬线

function __draw_lon_line(self, lon_tick) {lngstr = self.__format_lng(lon_tick);txtWidth = ctx.measureText(lngstr).width;var bb = map.latLngToContainerPoint(L.latLng(_lat_b, lon_tick));if (curvedLon) {if (typeof(curvedLon) == 'number') {_lat_delta = curvedLon;}ctx.beginPath();ctx.moveTo(bb.x, bb.y);var _prev_p = null;for (var j=_lat_b; j<_lat_t; j+=_lat_delta) {var tt = map.latLngToContainerPoint(L.latLng(j, lon_tick));ctx.lineTo(tt.x, tt.y);if (self.options.showLabel && label && _prev_p != null) {if (_prev_p.y > 8 && tt.y <= 8) {ctx.fillText(lngstr, tt.x - (txtWidth/2), txtHeight);}else if (_prev_p.y >= hh && tt.y < hh) {ctx.fillText(lngstr, tt.x - (txtWidth/2), hh-2);}}_prev_p = {x:tt.x, y:tt.y, lon:lon_tick, lat:j};}ctx.stroke();}else {var __lat_top = _lat_t;var tt = map.latLngToContainerPoint(L.latLng(__lat_top, lon_tick));if (curvedLat) {__lat_top = map.containerPointToLatLng(L.point(tt.x, 0));__lat_top = __lat_top.lat;if (__lat_top > 90) { __lat_top = 90; }tt = map.latLngToContainerPoint(L.latLng(__lat_top, lon_tick));var __lat_bottom = map.containerPointToLatLng(L.point(bb.x, hh));__lat_bottom = __lat_bottom.lat;if (__lat_bottom < -90) { __lat_bottom = -90; }bb = map.latLngToContainerPoint(L.latLng(__lat_bottom, lon_tick));}ctx.beginPath();ctx.moveTo(tt.x, tt.y+1);ctx.lineTo(bb.x, bb.y-1);ctx.stroke();if (self.options.showLabel && label) {ctx.fillText(lngstr, tt.x - (txtWidth/2), txtHeight+1);ctx.fillText(lngstr, bb.x - (txtWidth/2), hh-3);}}};

          第七步、将经过绘制的经纬网通过canvas渲染到html页面进行展示

        经过以上的步骤,就完成了经纬网的生成。以上代码只是对源代码进行深入讲解,实际使用的过程中,不是为了调整相关参数或者调整运行逻辑,可以不必要进行代码改造,直接使用即可。 

二、经纬度汉化

1、改造前

        在上面的源码分析中,我们会进行经纬度的格式化,详细代码在__format_lat和__format_lng这两个方法中,这里我们以__format_lng为例:

__format_lng: function(lng) {if (this.options.lngFormatTickLabel) {return this.options.lngFormatTickLabel(lng);}// todo: format type of floatif (lng > 180) {return '' + (360 - lng) + 'W';}else if (lng > 0 && lng < 180) {return '' + lng + 'E';}else if (lng < 0 && lng > -180) {return '' + (lng*-1) + 'W';}else if (lng == -180) {return '' + (lng*-1);}else if (lng < -180) {return '' + (360 + lng) + 'W';}return '' + lng;}

        可以看到,代码中仔细规定了经度的展示单位,W为西经,E表示东经。了解了以上知识就可以进行汉化改造,直接修改相应参数即可。

2、汉化

__format_lng: function(lng) {if (this.options.lngFormatTickLabel) {return this.options.lngFormatTickLabel(lng);}if (lng > 180) {return '' + (360 - lng) + '西经';}else if (lng > 0 && lng < 180) {return '' + lng + '东经';}else if (lng < 0 && lng > -180) {return '' + (lng*-1) + '西经';}else if (lng == -180) {return '' + (lng*-1);}else if (lng < -180) {return '' + (360 + lng) + '西经';}return '' + lng;}

3、改造效果

 注意:这里只改造了经度,维度信息还没有修改,您可以尝试动手将维度值也进行合理的汉化。

总结

        以上就是本文的主要内容,本文将重点详细分析这款经纬网生成的源码,以及其内在的调用逻辑,通过本文,可以让您知道经纬网的构造原理,做到知其然知其所以然。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/225249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙小车之多任务调度实验

说到鸿蒙我们都会想到华为mate60&#xff1a;遥遥领先&#xff01;我们一直领先&#xff01; 我们这个小车也是采用的是鸿蒙操作系统&#xff0c;学习鸿蒙小车&#xff0c;让你遥遥领先于你的同学。 文章目录 前言一、什么是任务&#xff1f;为什么要有任务二、任务的状态三、任…

AI影响谷歌正在推出新的人工智能模型,用于医疗保健。以下是医生如何使用它们的介绍

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

FreeSWITCH rtp endpoint recvonly

查了下rtp.c的源码&#xff0c;远端端口为0就意味着recvonly&#xff0c;但其实不然&#xff0c;调用switch_rtp_new会马上返回失败 经过反复测试&#xff0c;增加下面几行代码之后终于变成了recvonly: tech_pvt->mode RTP_RECVONLY; rtp_flags[SWITCH_RTP_FLAG_AUTOADJ];…

flutter Pageview组件

PageView组件说明 组件说明PageView&#xff0c;PageController的源码简单demo 组件说明 属性说明scrollDirection滑动反向 Axis.vertical上下滑动 Axis.horizontal左右滑动reverse是否反转 true从最后一个记0controllerPageController见下文physics滚动方式pageSnapping是否有…

ad23如何分层打印SCH、PCB的pdf文件

执行快捷键F --> M --> N --> N --> 选择所需的SCH和PCB --> Next --> Export a Bill of Materials&#xff08;勾选会打印物料清单&#xff09; --> Next --> 空白区右键 --> Create Final --> YES --> 可以根据层进行输出 --> 根据需要删…

彻底搞清楚多线程编程

很多时候在主线程中运行的程序需要一个while true&#xff0c;但是这样会导致程序整体上非常庞大&#xff0c;引入多线程来减少主线程的内容&#xff0c;同时也能顺利的实现功能&#xff0c;还有一个问题在于多线程还可以一定程度上减少全局变量&#xff08;但是也是需要反复运…

Python 自动化之收发邮件(二)

发邮件之Windows进程监控 文章目录 发邮件之Windows进程监控前言一、基本内容二、基本结构三、库模块四、函数模块1.进程监控2.邮件发送 五、程序运行模块1.获取时间2.用户输入3.进程监控3.1进程启动发邮件3.2进程停止发邮件 总结 前言 上一篇简单写了一下如何进行邮件的收发操…

如何正确理解和使用 Golang 中 nil ?

目录 指针中的 nil 切片中的 nil map 中的 nil 通道中的 nil 函数中的 nil 接口中的 nil 避免 nil 相关问题的最佳实践 小结 在 Golang 中&#xff0c;nil 是一个预定义的标识符&#xff0c;在不同的上下文环境中有不同的含义&#xff0c;但通常表示“无”、“空”或“…

LeetCode 2415. 反转二叉树的奇数层:深度优先搜索(DFS)

【LetMeFly】2415.反转二叉树的奇数层&#xff1a;深度优先搜索(DFS) 力扣题目链接&#xff1a;https://leetcode.cn/problems/reverse-odd-levels-of-binary-tree/ 给你一棵 完美 二叉树的根节点 root &#xff0c;请你反转这棵树中每个 奇数 层的节点值。 例如&#xff0c…

部署LVS的NET模式

实验准备 #负载调度器# 192.168.116.40 #内网 12.0.0.100 #外网 先添加双网卡 #web服务器# 192.168.116.20 #web1 192.168.116.30 #web2 #nfs共享服务# 192.168.116.10 #nfs systemctl stop firewalld setenforce 0 1.nfs共享文件 1…

Axure元件库的介绍以及个人简介和登录界面案例展示

目录 一. 元件介绍 二. 基本元件的使用 2.1 形状元件 2.2 图片元件 2.3 占位符 2.4 文本 2.5 线段元件 2.6 热区文件 三. 表单元件的使用 3.1 文本框 3.2 文本域 3.3 下拉列表 3.4 列表框 3.5 复选框 3.6 单选按钮 四. 菜单与表格元件的使用 4.1 树 4.2 表格…

Cmake基础(1)

什么是cmake 众所周知&#xff0c;对于C/C&#xff0c;不同的IDE的project文件是不同的&#xff0c;VS中叫做vcproject。在linux中make工具叫做makefile&#xff0c;codeblock中叫做cpb。而cmake是一个通用的project组织方式&#xff0c;cmake的项目文件cmakelists.txt可以转成…

持续集成交付CICD:GitLabCI操作Harbor仓库

目录 一、实验 1.GitLabCI操作Harbor仓库 二、问题 1.gitlab-runner连接docker daemon报错 一、实验 1.GitLabCI操作Harbor仓库 &#xff08;1&#xff09;修改GitLabCI共享库代码并提交到mater CI.yaml .pipelineInit:tags:- buildstage: .prevariables:GIT_CHECKOUT: …

Qt图像处理-基于OpenCv的图像二值化处理

本文讲解Qt图像处理-基于OpenCv的图像二值化处理 一、概述 图像二值化原理 图像二值化就是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的黑白效果的过程。图像的二值化使图像中数据量大为减少,从而能凸显出目标的轮廓。 要得到二值化图像,首先要把…

Apache Avro编程快速入门

Maven配置 添加Avro依赖 <dependency><groupId>org.apache.avro</groupId><artifactId>avro</artifactId>

金蝶云星空协同开发环境应用内执行单据类型脚本

文章目录 金蝶云星空协同开发环境应用内执行单据类型脚本业务界面查询单据类型表数据导出数据执行数据库脚本单据类型xml检验是否执行成功检查数据库检查业务数据 金蝶云星空协同开发环境应用内执行单据类型脚本 业务界面 查询单据类型表数据 先使用类型中文在单据类型多语言…

std::iota 函数简单使用

std::iota 是 C 标准库中的一个算法&#xff0c;位于 <numeric> 头文件中。它的作用是用一个连续的范围内的递增序列填充容器。 函数签名如下&#xff1a; template< class ForwardIt, class T > void iota( ForwardIt first, ForwardIt last, T value ); 其中&…

C++使用回调函数的两种方式

一.函数指针 #include <iostream>typedef void (*callback)(int ,int); class MyTest { public:void setCallback(callback cb){m_callback = cb;}void add(int a, int b){m_callback(a, b);}private:callback m_callback; };void onCallback(int a, int b) {std::cout …

[C++]——学习模板

了解模板——初阶 前言&#xff1a;一、模板1.1 什么是模板1.2 模板的概念1.3 模板可以做什么1.4 泛型模板 二、函数模板2.1 函数模板概念和格式2.2 函数模板原理2.3 函数模板实例化2.3.1 隐式实例化2.3.2 显式实例化 2.4 模板参数的匹配原则2.5 函数模板声明定义分离 三、类模…

若依框架springboot——修改前端图片上传样式

简述 使用过若依框架的&#xff0c;一定知道若依前端框架上传图片的样式&#xff0c;是一个正方形加号图片&#xff0c;但是如果你要使用自定义样式呢。 比如将下面这个图进行修改呢 修改后的样式 你可以直接找到element-ui 修改上传图片的组件&#xff0c;也可以加入新的组…