Devasa bir veri kümesinin bölümlerini verimli bir şekilde göstermek için Leaflet nasıl kullanılır?

CBS dışı web geliştiricilerinin bu sorunla karşılaştıklarını görmeye devam ediyorum ve çözümün ne olduğundan emin değilim.

1. Binlerce öğenin bazı veri kümesi vardır.
2. Görünür alt kümeleri etkileşimli, tıklanabilir öğeler olarak gösterilen kullanıcıya bir harita göstermek istiyoruz.

Bunu yapmak için hangi yöntemler var?

Bunları düşünebilirim, ancak çok tatmin edici değiller, bu yüzden başka neler olduğunu merak ediyorum:

1. Tüm verileri bir GeoJSON dosyasında saklayın, tarayıcıya aktarın ve Leaflet'in görüntülemesine izin verin. Sorun: büyük veri kümeleriyle gerçekten çalışmıyor. TopoJSON sınırı biraz yükseltiyor. Ayrıca sayfa yüklenmesinde büyük bir gecikmeye neden olur.

2. Mapbox'ı kullanın, tüm verileri Mapbox'ta etkileşimli bir katmanda saklayın ve görüntülemek için Mapbox.js'yi kullanın. Harika çalışıyor, ancak paraya mal oluyor ve kendiniz ağırlayamazsınız.

3. Bir PostGIS veritabanına erişmek için GeoServer kullanın, oradan verilere erişmek için WFS-geojson broşür eklentisini kullanın. Muhtemelen işe yarıyor, ancak WFS-geojson Leaflet eklentisi artık korunmuyor gibi görünüyor.

4. CartoDB'yi kullanın, tüm verileri bir CartoDB tablosunda saklayın ve görüntülemek için CartoDB.js'yi kullanın. Harika çalışıyor, ancak çok pahalı olabilir. Kendiniz barındırmanız mümkündür, ancak CartoDB'yi yüklemek önemsiz değildir.

Bütün bunlar beni özlediğim çok daha iyi ve özgür bir yol olması gerektiğini düşündürüyor. Bu ne?

DÜZENLE

Belki WFS-geojson eklentisini çok kolay yazdım. Hala etkinlik gören bir çatal var (4 ay önce): https://github.com/johanlahti/azgs-leaflet

Tamam, 2 benim varsayımları yanlıştı. Sen olabilir mapbox.js kullanın. Sonuç biraz farklı olacak, inanıyorum - işaretçilerin kendileri statik bir raster katmanı olacak, ancak tıklanabilir olacaklar.

Büyük ölçekli etkileşimi sağlayan özellik https://github.com/mapbox/utfgrid-spec

Müşteriler https://github.com/danzel/Leaflet.utfgrid (broşür eklentisi) ve ayrıca mapbox.js içinde uygulanmaktadır.

Sunucu tarafında https://github.com/mapbox/tilelive.js ve dolayısıyla TileMill'de uygulanmaktadır : http://tilemill-server/tile/projectname/7/115/78.grid.json

Ayrıca TileStache'de uygulanır, ancak canlı yayın veya mbtiles sunucusunda değildir. UTFgrid verileri, TileMill tarafından mbtiles dosyasında depolanmış gibi görünür, ancak bunlar tarafından yoksayılır.

Yani sadece mapbox.com'a değil, mapbox.js'ye de ihtiyacınız yok. Mapbox.js çoğunlukla kolaylık sağlamak için bir şeyler yapıştırıyor gibi görünüyor: bir haritayı başlatan, fayans getiren ve etkileşim ekleyen tek bir çağrı.

Ancak mapbox.js'yi kullanırsanız, eksik olduğum bulmacanın bir parçası var ve bu tilejson. Mapbox.json dosyasına haritanıza karşılık gelen tilejson dosyasını verirsiniz.

Ayrıca postGIS hizmetlerini destekleyen broşür-vektör katmanları eklentisi de bulunmaktadır http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

Görünüşe göre hizmeti filtreleyebilirsiniz.

Bu eklentiyi ArcGIS hizmetleri için kullandım ve gerçekten çok iyi oldu.

Çözümü henüz bulamadıysanız burada bir çözüm var: 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);
    }
});