在传单中实现Ilayer接口

时间:2013-06-03 12:38:26

标签: javascript function interface leaflet

我正在尝试做什么

我正在尝试在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]是假的。

1 个答案:

答案 0 :(得分: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 );

        } );
}
});