获取传单的加载图块的边界

时间:2016-09-08 11:53:33

标签: leaflet

使用传单是否有任何方法可以获得已加载图块的边界(NorthEast,SouthWest)?我想请求服务器仅为加载的特定区块加载标记,这样当用户平移/拖动地图时,他可以轻松地在新区域上看到新标记。

1 个答案:

答案 0 :(得分:4)

您真正想要做的是L.GridLayer的子类。这将允许对加载/卸载的磁贴进行精细控制,并且是使用私有L.GridLayer._tileCoordsToBounds()方法的最佳方式。

对加载的标记进行一些基本处理,它应该如下所示:

L.GridLayer.MarkerLoader = L.GridLayer.extend({

    onAdd: function(map){
        // Add a LayerGroup to the map, to hold the markers
        this._markerGroup = L.layerGroup().addTo(map);
        L.GridLayer.prototype.onAdd.call(this, map);

        // Create a tilekey index of markers
        this._markerIndex = {};
    },

    onRemove: function(map){
        this._markergroup.removeFrom(map);
        L.GridLayer.prototype.onRemove.call(this, map);
    };

    createTile: function(coords, done) {

        var tileBounds = this._tileCoordsToBounds(coords);
        var tileKey = this._tileCoordsToKey(coords);

        var url = ...;  // Compute right url using tileBounds & coords.z

        fetch(url).then(function(res){
            if (!key in this._markerIndex) { this._markerIndex[key] = []; }

            // unpack marker data from result, instantiate markers
            // Loop as appropiate
            this._markerGroup.addLayer(marker);
            this._markerIndex[key] = marker;

            done(); // Signal that the tile has been loaded successfully
        });
    },

    _removeTile: function (key) {
        for (var i in this._markerIndex[key]) {
            this._markerGroup.remove(this._markerIndex[key][i]);
        }

        L.GridLayer.prototype._removeTile.call(this, key);
    }
});

请注意,缩放可能是错误和图形毛刺的来源(因为在加载新缩放级别的标记之前,磁贴卸载因此会移除标记)。要小心。