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

喜欢ヅ旅行 2024-02-05 15:28 10阅读 0赞

**目录**

前言

一、源码分析

1、类图设计

2、时序调用

3、调用说明

二、经纬度汉化

1、改造前

2、汉化

3、改造效果

总结

--------------------

## 前言 ##

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

![2bf1aa613ba1432589f68ee5f8d5b538.png][]

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

## 一、源码分析 ##

### 1、类图设计 ###

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

![9d1ac846b6f64447b7538c55c6c85f3e.png][]

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

![6a312003be4a40e0bf229693af4e9c7c.png][]

### 2、时序调用 ###

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

![1e70edb111a34f4cb2af3e8e97b165de.png][]

### 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}
    			]
    		}
    	});

![8704fe92df0a4cb5b3684b05bd09e7aa.png][]

第二步、调用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 ready
    		if (!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});

![88a30e23a0114beaa9cf0e9d98afcf30.png][]

第四步、通过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);
        },

![4c3066037bcb4d1494c372fce234c802.png][]

第五步、绘制经纬线

![69629163d9994e1789c83e75c125e81e.png][]

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

![faec08ac937b41a2b36cca56098344e8.png][]

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

## 二、经纬度汉化 ##

### 1、改造前 ###

在上面的源码分析中，我们会进行经纬度的格式化，详细代码在\_\_format\_lat和\_\_format\_lng这两个方法中，这里我们以\_\_format\_lng为例：

__format_lng: function(lng) {
            if (this.options.lngFormatTickLabel) {
                return this.options.lngFormatTickLabel(lng);
            }
    
            // todo: format type of float
            if (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、改造效果 ###

![826587703b874304ab4921dc3ded3567.png][]

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

## 总结 ##

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

[Leaflet_Webgis]: https://blog.csdn.net/yelangkingwuzuhu/article/details/134983435?spm=1001.2014.3001.5502
[2bf1aa613ba1432589f68ee5f8d5b538.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/51484e97f78b4cf6964ca518512576c7.png
[9d1ac846b6f64447b7538c55c6c85f3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/bdbc3a69fb1d46fb83d062c251d676ef.png
[6a312003be4a40e0bf229693af4e9c7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/b8108797bb0d435b87e970e2a79fb478.png
[1e70edb111a34f4cb2af3e8e97b165de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/5a479e48da6a45088955d0da8b954b7d.png
[8704fe92df0a4cb5b3684b05bd09e7aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/8884ae79737746968f13f9402bfa5667.png
[88a30e23a0114beaa9cf0e9d98afcf30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/2cc438870c4c40aea8615aa3e76dcbca.png
[4c3066037bcb4d1494c372fce234c802.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/707676989bbe42b1a9b0bef8eede6d5e.png
[69629163d9994e1789c83e75c125e81e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/d575ce62e2e648d4b2ed334c8d2f97be.png
[faec08ac937b41a2b36cca56098344e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/b3d386932575463c8b13ced3a1121004.png
[826587703b874304ab4921dc3ded3567.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/cf6aab643f5e430ea1a7f3f1d05035a8.png