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 初始化问题的主要内容,如果未能解决你的问题,请参考以下文章

leaflet加载天地图

webpack - 需要('node_modules/leaflet/leaflet.css')

leaflet学习一 入门

在反应传单上使用Leaflet插件

leaflet+esri-leaflet+heatmap实现热力图

Leaflet绘制热力图