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


13

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


1
minta saja geoserver wfs untuk json?
Ian Turton

Nah, jika saya mengerti dengan benar, jika Anda memasukkan kode JSON ke dalam hardcode, maka pada dasarnya Anda hanya menyuruhnya untuk mentransfer seluruh dataset sebagai satu gumpalan JSON - seperti solusi 1. Anda memerlukan WFS aktual untuk mendapatkan permintaan yang dibatasi ke viewport saat ini, bukan?
Steve Bennett

filter wfs request by Bounds of map (Bukankah leaflet melakukan itu secara otomatis?)
Ian Turton

Untuk melakukan itu perlu berbicara WFS, bukan? Dan afaik yang hanya ada di plugin WFS-geojson (tidak dikelola)?
Steve Bennett

1
WFS tidak terlalu sulit - mungkin selebaran masalahnya>
Ian Turton

Jawaban:


4

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.



0

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);
    }
});

Saya tidak melihat bagaimana ini membatasi permintaan ke viewport saat ini?
alphabetasoup

0

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


1
Menarik, saya belum pernah mendengarnya sebelumnya. Tetapi pada $ 29 / bln, itu jelas di luar kisaran harga hobi, atau sebagian besar proyek penelitian kecil.
Steve Bennett

4
Ini tidak benar-benar menjawab pertanyaan dan dibaca seperti iklan. Sepertinya penanya menginginkan metode yang mempromosikan tampilan efisien dari dataset besar. Cukup menyediakan produk Anda tanpa penjelasan mengapa lebih efisien tampaknya tidak cukup.
Conor

1
OP menyajikan masalah, saya menyajikan solusi yang mungkin. Semua solusi untuk masalah ini akan dikenakan biaya baik dalam waktu atau uang.
ChrisInCambo

@Conor walaupun postingan ini tampaknya menjawab pertanyaan, dan ini benar-benar di depan tentang sifat solusi dan koneksi poster dengan produk, itu akan mendapat manfaat dari beberapa elaborasi mengapa hal itu dapat direkomendasikan.
whuber

0

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


Bisakah Anda mengekstrak poin yang relevan untuk menjadikan ini jawaban yang lengkap?
Steve Bennett
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.