javascript - 在传单中实现Ilayer接口(interface)

Question

我想做什么

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

问题

当我使用我编写的 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] 在某些情况下很可能是错误的。

Answer 1

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

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

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

    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 );

        } );
}
});