Leaflet 1.2 bug featureGroup 初始化问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Leaflet 1.2 bug featureGroup 初始化问题相关的知识,希望对你有一定的参考价值。
最新项目在使用 Leaflet 做地图,需要增加标注,意外发现,Leaflet竟然没有良好的 label 功能,还好,Leaflet 的 Plugins 中有不少扩展。
最后选择“Leaflet.LabelTextCollision”,demo采用的是 Leaflet version "1.0.1+ffcfcc1" 。当我把 Leaflet 换成 1.2.0 以后,
var p = L.polyline( [ [ 35.695786, 139.749213 ], [ 35.696786, 139.748213 ], [ 35.695786, 139.747213 ] ], { weight : 12, color : '#fe57a1', text : 'Leaflet.LabelTextCollision!!!!!!!!' }).addTo(map); var layers = L.featureGroup().addTo(map); for ( var index in data) { var d = data[index]; var latlng = L.latLng(d[0], d[1]); var c = L.circleMarker(latlng, { radius : 0, text : latlng.toString() }); layers.addLayer(c); if (index == 3000) { break; } }
其中“}).addTo(map);”和“layers.addLayer(c);”都会报错,其中一个报错截图如下
定位问题到指定位置
后来,我从 Leaflet 的各个版本源码页找到了 1.01 和 1.2.0 的源码,经比较,发现 1.0.1 中 canvas.js 的写法
L.Canvas = L.Renderer.extend({ onAdd: function () { L.Renderer.prototype.onAdd.call(this); this._layers = this._layers || {}; // Redraw vectors since canvas is cleared upon removal, // in case of removing the renderer itself from the map. this._draw(); },
在 1.2.0 中的 canvas.js 改为
export var Canvas = Renderer.extend({ getEvents: function () { var events = Renderer.prototype.getEvents.call(this); events.viewprereset = this._onViewPreReset; return events; }, _onViewPreReset: function () { // Set a flag so that a viewprereset+moveend+viewreset only updates&redraws once this._postponeUpdatePaths = true; }, onAdd: function () { Renderer.prototype.onAdd.call(this); // Redraw vectors since canvas is cleared upon removal, // in case of removing the renderer itself from the map. this._draw(); },
以及 Renderer.js 的
export var Renderer = Layer.extend({ // @section // @aka Renderer options options: { // @option padding: Number = 0.1 // How much to extend the clip area around the map view (relative to its size) // e.g. 0.1 would be 10% of map view in each direction padding: 0.1 }, initialize: function (options) { Util.setOptions(this, options); Util.stamp(this); this._layers = this._layers || {}; },
所以问题就显而易见 ,是在代码重构的时候,将 this._layers 初始化提升到了父类初始化中,然而,javascript 的编码并不能保证初始化函数一定被调用,就比如我这次遇到的
var layers = L.featureGroup().addTo(map);
修改方案:
在 1.2.0 的 leaflet-src.js 文件的 11710 行,插入代码
this._layers = this._layers || {};
即为
运行结果
至此,问题解决
以上是关于Leaflet 1.2 bug featureGroup 初始化问题的主要内容,如果未能解决你的问题,请参考以下文章
webpack - 需要('node_modules/leaflet/leaflet.css')