2

我正在尝试做的事情

我正在尝试在 Leaflet 中实现Ilayer接口，但我在使用 onRemove 函数时遇到了困难。该图层由一个始终在地图上的核心标记和一些在单击核心标记时出现的子标记组成。

问题

当我使用我编写的 removeLayer 函数时，它没有按预期工作：如果我先触发了事件，那么它工作正常。但如果我没有，核心标记不会被删除！

编码

L.CustomClusterGroup = L.FeatureGroup.extend({
    options: {

    },

    initialize: function(marker, options) {

        options = options || {};
        L.Util.setOptions(this, options);

        this.coreMarker = marker;

        L.FeatureGroup.prototype.initialize.call(this, []);

    },
    addTo: function(map) {

        this.coreMarker.addTo(map);
        var that = this;
        this.coreMarker.on( "click", function ()
        {
            L.FeatureGroup.prototype.addTo.call( that, map );
        } );
    },
    onRemove: function ( map ) {

        map.removeLayer(this.coreMarker);
        L.FeatureGroup.prototype.onRemove.call(this, map);

    }
});

我的问题

我想了解为什么代码会这样，以及修复它的最佳方法。

编辑

我对这个问题有了更好的理解： onRemove 函数没有被执行：

removeLayer: function (layer) {
    var id = L.stamp(layer);

    if (!this._layers[id]) { return; }

    if (this._loaded) {
        layer.onRemove(this);
        this.fire('layerremove', {layer: layer});
    }

    delete this._layers[id];
    if (this._zoomBoundLayers[id]) {
        delete this._zoomBoundLayers[id];
        this._updateZoomLevels();
    }

    // TODO looks ugly, refactor
    if (this.options.zoomAnimation && L.TileLayer && (layer instanceof L.TileLayer)) {
        this._tileLayersNum--;
        this._tileLayersToLoad--;
        layer.off('load', this._onTileLayerLoad, this);
    }

    return this;
},

所以很可能 !this._layers[id] 在某些情况下是假的。

4

1 回答 1

1

我阅读了传单的代码并能够解决问题：

每个地图对象都有一个专有的_layers，它是一个索引所有添加到地图的图层的数组。所以 addTo 函数不应该在地图上添加对象的特征，而是通过 map.addLayer 将图层传递给地图，该图层将添加到 _layers 数组中。然后地图将调用 onAdd 函数。

如果 addTo 没有以这种方式编码，图层将不会添加到 map._layers，并且无法使用地图函数将其删除。

    L.CustomClusterGroup = L.FeatureGroup.extend({
    options: {
        singleMarkerMode: true,


        //Options to pass to the L.Polygon constructor
        polygonOptions: {
            color: 'red',
            fillColor: 'red',
            weight: 2,
            opacity: 1,
            dashArray: '3',
            fillOpacity: 0.4
        }
    },

    initialize: function(marker, options) {

        options = options || {};
        L.Util.setOptions(this, options);


        this.coreMarker = marker;



        L.FeatureGroup.prototype.initialize.call(this, []);

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

    },
    onRemove: function(map) {

        map.removeLayer(this.coreMarker);
        L.FeatureGroup.prototype.onRemove.call(this, map);
        this._map = null;

    },
    onAdd:function (map){
        this._map = map;
        map.addLayer( this.coreMarker );
        var that = this;
        this.coreMarker.on( "click", function ()
        {
            L.FeatureGroup.prototype.onAdd.call( that, map );

        } );
}
});
于 2013-06-04T08:16:05.573 回答