Leaflet 1.2 bug featureGroup 初始化问题

Posted 2020-10-16

    最新项目在使用 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 || {};

即为

运行结果

至此，问题解决