leaflet - 获取传单加载图 block 的边界

Question

使用传单有什么方法可以获得加载图 block 的边界(东北、西南)？我想请求服务器仅加载加载的特定图 block 的标记，以便当用户平移/拖动 map 时，他可以轻松地看到新区域上的新标记。

Answer 1

您真正想要做的是L.GridLayer的子类。这将允许对加载/卸载的图 block 进行精细控制，并且是使用私有(private) 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);
    }
});

请注意，缩放可能是错误和图形故障的根源(在加载新缩放级别的标记之前，由于图 block 卸载而删除了标记)。当心这一点。