Làm cách nào để sử dụng Leaflet để hiển thị hiệu quả các phần của bộ dữ liệu lớn?

Tôi liên tục thấy các nhà phát triển web không phải là GIS gặp phải vấn đề này và tôi không chắc giải pháp là gì.

1. Có một số dữ liệu của hàng ngàn mặt hàng.
2. Chúng tôi muốn hiển thị bản đồ cho người dùng, với tập hợp con có thể nhìn thấy của họ được hiển thị dưới dạng các yếu tố tương tác, có thể nhấp.

Có những phương pháp nào để làm điều này?

Tôi có thể nghĩ về những điều này, nhưng chúng không thỏa đáng lắm, vì vậy tôi tự hỏi còn gì nữa không:

1. Lưu trữ tất cả dữ liệu trong tệp GeoJSON, chuyển nó vào trình duyệt và để Leaflet hiển thị nó. Vấn đề: không thực sự hoạt động với các bộ dữ liệu lớn. TopoJSON tăng giới hạn một chút. Nó cũng gây ra sự chậm trễ lớn khi tải trang.

2. Sử dụng Mapbox, lưu trữ tất cả dữ liệu trong một lớp tương tác trên Mapbox và sử dụng Mapbox.js để hiển thị nó. Hoạt động tốt, nhưng tốn tiền và bạn không thể tự lưu trữ.

3. Sử dụng GeoServer để truy cập cơ sở dữ liệu PostGIS, sử dụng plugin tờ rơi WFS-Geojson để truy cập dữ liệu từ đó. Nó có thể hoạt động, nhưng plugin WFS-Geojson Leaflet dường như không còn được duy trì nữa.

4. Sử dụng CartoDB, lưu trữ tất cả dữ liệu trong bảng CartoDB và sử dụng CartoDB.js để hiển thị nó. Hoạt động tuyệt vời, nhưng có thể rất tốn kém. Bạn có thể tự lưu trữ nó, nhưng cài đặt CartoDB là không tầm thường.

Tất cả những điều này khiến tôi nghĩ rằng phải có một số cách tốt hơn, miễn phí mà tôi đang thiếu. Nó là gì?

BIÊN TẬP

Có lẽ tôi đã viết ra plugin WFS-Geojson quá dễ dàng. Có một ngã ba vẫn thấy một số hoạt động (4 tháng trước): https://github.com/johanlahti/azgs-leaflet

Ok, giả định của tôi trong 2 là không chính xác. Bạn có thể sử dụng mapbox.js. Kết quả cuối cùng sẽ khác một chút, tôi tin rằng - bản thân các điểm đánh dấu sẽ là một lớp raster tĩnh, nhưng chúng sẽ có thể nhấp được.

Thông số kỹ thuật làm cho tương tác quy mô lớn hoạt động là https://github.com/mapbox/utfgrid-spec

Nó được triển khai trên máy khách trong https://github.com/danzel/Leaflet.utfgrid (plugin tờ rơi) và cả mapbox.js.

Các máy chủ được triển khai trong https://github.com/mapbox/tilelive.js và do đó TileMill, vd: http://tilemill-server/tile/projectname/7/115/78.grid.json

Nó cũng được triển khai trong TileStache, nhưng không phải là tilestream hay mbtiles-server. Dữ liệu UTFgrid dường như được lưu trữ trong tệp mbtiles bởi TileMill, nhưng bị bỏ qua bởi những người đó.

Vì vậy, không chỉ bạn không cần mapbox.com, bạn cũng không cần mapbox.js. Mapbox.js dường như kết dính các thứ lại với nhau để thuận tiện: một cuộc gọi duy nhất tạo bản đồ, tìm nạp các ô và thêm tương tác.

Nhưng nếu bạn sử dụng mapbox.js, có một phần câu đố tôi bị thiếu, và đó là brickjson. Bạn cung cấp cho mapbox.json tệp brickjson tương ứng với bản đồ của bạn.

Xin lỗi vì đã trả lời trễ nhưng cũng có plugin lớp vectơ có hỗ trợ cho các dịch vụ postGIS http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

Bởi vẻ ngoài của nó, bạn có thể lọc dịch vụ.

Tôi đã sử dụng plugin này cho các dịch vụ ArcGIS và nó thực sự tốt.

Hy vọng rằng sẽ giúp, Rowan

Nếu bạn không thể tìm thấy giải pháp thì đây là một: 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);
    }
});

Cách nhanh nhất để làm điều này là https://mangom.com , bạn sẽ có thể nhận toàn bộ nội dung được thiết lập trong khoảng 10 phút mà không cần viết một dòng mã.

Dưới đây là một bản trình bày cho bạn thấy cách thực hiện ánh xạ web trực tuyến bằng cách sử dụng Node.js và PostgreQuery với PostGIS.