Как загрузить / выгрузить маркеры на основе видимых плиток на Leaflet.js?

Question

Согласно документации, я могу заранее определить набор маркеров и других объектов при создании карты, которая затем будет отображаться.Я не хочу помещать все возможные маркеры / изображения / прямоугольники / и т. Д. В код JS.Я читал, что люди вычисляют видимую область при каждом перемещении / масштабировании плиток, делают HTTP-запрос и сервер возвращает необходимые маркеры.

Однако я бы хотел использовать другой способ, так как он немного более эффективен:

1. Например, в настоящее время Leaflet автоматически запрашивает плитки 0: 0 и 0: 1 ;

2. Кроме того, он может сделать HTTP-запрос и запросить у сервера: « Эй, дай мне также маркеры для плиток 0: 0 и 0: 1".

3. Полностью удалите маркеры, которые находятся на плитках, которые стали невидимыми.

Естьшаги 2-3 возможны и как, если да?

Answer 1

То, что вы спрашиваете, выглядит примерно так же, как Leaflet.VectorGrid : каждый запрос «плитки» - это запрос векторных данных, а не растрового изображения.На самом деле, возможно, использование векторных листов протобуфера является правильным подходом для вашего сценария.

VectorGrid использует логику, реализованную L.GridLayer для обработки логики загрузки / выгрузки плитки.

Если вы настаиваетеСделав это самостоятельно, я предлагаю сначала прочитать Leaflet учебники по созданию плагинов ;взгляните на исходный код Leaflet L.GridLayer и VectorGrid, чтобы увидеть, как они работают, а затем что-то вроде:

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

    initialize: funcion(url, options) {
        this._url = url;
        this._markerStore = {};
        L.GridLayer.prototype.initialize.call(this, options);
    },

    createTile: function(coords, done) {
        var key = this._tileCoordsToKey(coords);
        var data = {
            s: this._getSubdomain(coords),
            x: coords.x,
            y: coords.y,
            z: coords.z
        };
        var tileUrl = L.Util.template(this._url, L.extend(data, this.options));

        fetch(tileUrl).then(function(response){
            // Parse the response, with either response.json()
            // or response.text() or response.blob().
            // See https://developer.mozilla.org/en-US/docs/Web/API/Response

            // Create a bunch of markers based on the parsed response
            // The specific syntax depends on the format of the data structure
            var markers = data.map(function(point){
                return L.marker(point);
            });

            // Add those markers to a L.LayerGroup, add that LayerGroup
            // to a dictionary (to remove it later), and finally add it to the map
            var group = L.layerGroup(markers);
            this._markerStore[key] = group;

            // Mark the tile as ready
            done();
        });

        // Return an empty <div> as a tile. Real data will be loaded async and
        // put in LayerGroups anyway.
        return L.DomUtil.createElement('div');
    },

    _removeTile: function(key) {
        // Whenever a tile is pruned, remove the corresponding LayerGroup
        // from the map and from the _markerStore dictionary
        this._markerStore[key].remove();
        delete this._markerStore[key];

        return L.GridLayer.prototype._removeTile(key);
    }
});