Как использовать Leaflet для эффективного отображения частей массивного набора данных?

Я продолжаю видеть, что веб-разработчики, не являющиеся ГИС, сталкиваются с этой проблемой, и я не уверен, каково решение.

1. Существует несколько наборов данных тысяч предметов.
2. Мы хотим показать карту пользователю, с видимым подмножеством его, показанным как интерактивные, интерактивные элементы.

Какие есть способы для этого?

Я могу думать об этом, но они не очень удовлетворительны, поэтому мне интересно, что еще есть:

1. Сохраните все данные в файле GeoJSON, передайте их в браузер и дайте Leaflet отобразить их. Проблема: на самом деле не работает с большими наборами данных. TopoJSON немного повышает лимит. Это также вызывает большую задержку при загрузке страницы.

2. Используйте Mapbox, сохраните все данные в интерактивном слое на Mapbox и используйте Mapbox.js для его отображения. Прекрасно работает, но стоит денег, и вы не можете провести его самостоятельно.

3. Используйте GeoServer для доступа к базе данных PostGIS, используйте плагин WFS-geojson для доступа к данным оттуда. Возможно, это работает, но плагин WFS-geojson Leaflet , похоже, больше не поддерживается.

4. Используйте CartoDB, сохраните все данные в таблице CartoDB и используйте CartoDB.js для их отображения. Прекрасно работает, но может стать очень дорогим. Можно провести его самостоятельно, но установка CartoDB нетривиальна.

Все это заставляет меня думать, что должен быть какой-то гораздо лучший, свободный способ, который я скучаю. Что это?

РЕДАКТИРОВАТЬ

Может быть, я слишком легко списал плагин WFS-geojson. Есть форк, который все еще видит некоторую активность (4 месяца назад): https://github.com/johanlahti/azgs-leaflet

Хорошо, мои предположения в 2 были неверны. Вы можете использовать mapbox.js. Я полагаю, что конечный результат будет немного другим - маркеры сами по себе будут статическим растровым слоем, но они будут активными.

Спецификация, которая делает крупномасштабную интерактивную работу, является https://github.com/mapbox/utfgrid-spec.

Он реализован на стороне клиента в https://github.com/danzel/Leaflet.utfgrid (плагин листовки), а также в mapbox.js.

На стороне сервера это реализовано в https://github.com/mapbox/tilelive.js и, следовательно, в TileMill, например: http://tilemill-server/tile/projectname/7/115/78.grid.json

Это также реализовано в TileStache, но не Tilestream или Mbtiles-сервер. Данные UTFgrid, похоже, хранятся в файле mbtiles TileMill, но игнорируются ими.

Так что не только вам не нужен mapbox.com, вам не нужен и mapbox.js. Похоже, что Mapbox.js в основном склеивает вещи для удобства: один вызов, который создает карту, извлекает плитки и добавляет интерактивность.

Но если вы используете mapbox.js, есть одна загадка, которую мне не хватает, и это tilejson. Вы предоставляете mapbox.json файл tilejson, соответствующий вашей карте.

Существует также плагин листовки-векторные слои, который поддерживает службы postGIS http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

Судя по всему, вы можете отфильтровать сервис.

Я использовал этот плагин для сервисов ArcGIS, и он действительно хорош.

Если вы не смогли найти решение, вот одно: http://gis.xyz/leaflet.html#

 var owsrootUrl = 'http://217.8.255.188:8080/geoserver/opengeo/ows';

 var defaultParameters = {
     service : 'WFS',
     version : '2.0',
     request : 'GetFeature',
     typeName : 'opengeo:evernote_geom',
     outputFormat : 'text/javascript',
     format_options : 'callback:getJson',
     SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
       WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 600};
                layer.bindPopup('<h4>'+feature.properties.url+'</h4><br>'+feature.properties.title
                    ,popupOptions);
            }
        }).addTo(map);
    }
});