Як використовувати 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 нетривіально.

Все це змушує мене думати, що повинен бути якийсь набагато кращий, вільний шлях, який я пропускаю. Що це?

EDIT

Можливо, я занадто легко списав плагін 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, але не потік або 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);
    }
});