Jak korzystać z Ulotki, aby skutecznie wyświetlać części ogromnego zestawu danych?

Cały czas widzę, że ten programista napotyka programistów spoza GIS i nie jestem pewien, jakie jest rozwiązanie.

1. Istnieje zbiór danych tysięcy pozycji.
2. Chcemy pokazać użytkownikowi mapę, której widoczny podzbiór jest wyświetlany jako interaktywne, klikalne elementy.

Jakie są dostępne metody?

Mogę o nich pomyśleć, ale nie są one bardzo zadowalające, więc zastanawiam się, co jeszcze jest:

1. Przechowuj wszystkie dane w pliku GeoJSON, przenieś je do przeglądarki i pozwól, aby Leaflet je wyświetlił. Problem: tak naprawdę nie działa z dużymi zestawami danych. TopoJSON podnosi nieco limit. Powoduje to również duże opóźnienie przy ładowaniu strony.

2. Użyj Mapbox, przechowuj wszystkie dane w interaktywnej warstwie na Mapbox i użyj Mapbox.js, aby je wyświetlić. Działa świetnie, ale kosztuje, a sam nie możesz go hostować.

3. Użyj GeoServer, aby uzyskać dostęp do bazy danych PostGIS, użyj wtyczki ulotki WFS-geojson, aby uzyskać dostęp do danych z tego miejsca. Prawdopodobnie działa, ale wtyczka WFS-geojson Leaflet nie jest już obsługiwana.

4. Użyj CartoDB, przechowuj wszystkie dane w tabeli CartoDB i użyj CartoDB.js, aby je wyświetlić. Działa świetnie, ale może stać się bardzo drogi. Możliwe jest hostowanie go samemu, ale instalacja CartoDB nie jest trywialna.

Wszystko to sprawia, że ​​myślę, że musi istnieć jakiś lepszy, darmowy sposób, za którym tęsknię. Co to jest?

EDYTOWAĆ

Może zbyt łatwo spisałem wtyczkę WFS-geojson. Istnieje widelec, który wciąż widzi aktywność (4 miesiące temu): https://github.com/johanlahti/azgs-leaflet

Ok, moje założenia w 2 były błędne. Państwo może używać mapbox.js. Wynik końcowy będzie nieco inny, jak sądzę - same markery będą statyczną warstwą rastrową, ale będą klikalne.

Specyfikacją, która sprawia, że ​​interaktywność na dużą skalę działa, jest https://github.com/mapbox/utfgrid-spec

Jest zaimplementowany po stronie klienta w https://github.com/danzel/Leaflet.utfgrid (wtyczka do ulotki), a także mapbox.js.

Serwer jest zaimplementowany w https://github.com/mapbox/tilelive.js i stąd TileMill np .: http://tilemill-server/tile/projectname/7/115/78.grid.json

Jest także zaimplementowany w TileStache, ale nie w tilestream ani mbtiles-server. Dane UTFgrid wydają się być przechowywane w pliku mbtiles przez TileMill, ale są przez nich ignorowane.

Więc nie tylko nie potrzebujesz mapbox.com, nie potrzebujesz mapbox.js. Mapbox.js wydaje się głównie sklejać ze sobą dla wygody: pojedyncze połączenie, które tworzy instancję mapy, pobiera kafelki i dodaje interaktywności.

Ale jeśli używasz mapbox.js, brakuje mi jednej łamigłówki, a to jest Tilejson. Dajesz mapbox.json plik tilejson odpowiadający twojej mapie.

Istnieje również wtyczka ulotka-warstwy wektorowe, która obsługuje usługi postGIS http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

Po wyglądzie możesz przefiltrować usługę.

Użyłem tej wtyczki do usług ArcGIS i była naprawdę dobra.

Jeśli nie możesz znaleźć rozwiązania, oto jedno: 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);
    }
});