Bagaimana cara menggunakan Leaflet untuk secara efisien menunjukkan bagian-bagian dari dataset besar?

Saya terus melihat pengembang web non-GIS mengalami masalah ini, dan saya tidak yakin apa solusinya.

1. Ada beberapa dataset dari ribuan item.
2. Kami ingin menunjukkan peta kepada pengguna, dengan subset yang terlihat ditampilkan sebagai elemen interaktif yang dapat diklik.

Metode apa yang ada untuk melakukan ini?

Saya bisa memikirkan ini, tetapi mereka tidak terlalu memuaskan, jadi saya bertanya-tanya apa lagi yang ada:

1. Simpan semua data dalam file GeoJSON, transfer ke browser, dan biarkan Leaflet menampilkannya. Masalah: tidak benar-benar berfungsi dengan kumpulan data besar. TopoJSON menaikkan batas sedikit. Itu juga menyebabkan penundaan besar pada pemuatan halaman.

2. Gunakan Mapbox, simpan semua data dalam lapisan interaktif di Mapbox, dan gunakan Mapbox.js untuk menampilkannya. Bekerja dengan baik, tetapi membutuhkan biaya, dan Anda tidak dapat meng-host-nya sendiri.

3. Gunakan GeoServer untuk mengakses database PostGIS, gunakan plugin leaflet WFS-geojson untuk mengakses data dari sana. Ini mungkin bekerja, tetapi plugin Leaflet WFS-geojson tampaknya tidak dipertahankan lagi.

4. Gunakan CartoDB, simpan semua data dalam tabel CartoDB, dan gunakan CartoDB.js untuk menampilkannya. Bekerja dengan baik, tetapi bisa menjadi sangat mahal. Anda dapat meng-host-nya sendiri, tetapi menginstal CartoDB tidak mudah.

Semua ini membuat saya berpikir pasti ada cara yang lebih baik dan gratis yang saya lewatkan. Apa itu?

EDIT

Mungkin saya terlalu mudah menghapus plugin WFS-geojson. Ada garpu yang masih melihat beberapa aktivitas (4 bulan lalu): https://github.com/johanlahti/azgs-leaflet

Ok, asumsi saya di 2 salah. Anda dapat menggunakan mapbox.js. Hasil akhirnya akan sedikit berbeda, saya percaya - penanda itu sendiri akan menjadi lapisan raster statis, tetapi mereka akan dapat diklik.

Spesifikasi yang membuat interaktivitas skala besar berfungsi adalah https://github.com/mapbox/utfgrid-spec

Diimplementasikan di sisi klien di https://github.com/danzel/Leaflet.utfgrid (plugin leaflet) dan juga mapbox.js.

Serverside itu diterapkan di https://github.com/mapbox/tilelive.js dan karenanya TileMill misalnya: http://tilemill-server/tile/projectname/7/115/78.grid.json

Ini juga diimplementasikan di TileStache, tetapi bukan tilestream atau mbtiles-server. Data UTFgrid tampaknya disimpan dalam file mbtiles oleh TileMill, tetapi diabaikan oleh mereka.

Jadi Anda tidak hanya membutuhkan mapbox.com, Anda juga tidak perlu mapbox.js. Mapbox.js sebagian besar tampaknya merekatkan hal-hal bersama untuk kenyamanan: satu panggilan yang instantiate peta, mengambil petak dan menambahkan interaktivitas.

Tetapi jika Anda menggunakan mapbox.js, ada satu teka-teki yang saya lewatkan, dan itu tilejson. Anda memberikan mapbox.json file tilejson yang sesuai dengan peta Anda.

Maaf atas jawaban yang terlambat tetapi ada juga plugin leaflet-vector-layers yang memiliki dukungan untuk layanan postGIS http://jasonanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

Dengan tampilannya Anda dapat menyaring layanan.

Saya telah menggunakan plugin ini untuk layanan ArcGIS dan sudah sangat bagus.

Semoga itu bisa membantu, Rowan

Jika Anda belum dapat menemukan solusinya di sini adalah salah satunya: 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);
    }
});

Cara tercepat untuk melakukan ini adalah https://mangomap.com , Anda harus dapat mengatur semuanya dalam waktu sekitar 10 menit tanpa menulis satu baris kode.

Berikut ini adalah presentasi yang menunjukkan kepada Anda bagaimana melakukan pemetaan web online dengan menggunakan Node.js dan PostgreSQL dengan PostGIS.