Cách hiệu quả để truy cập các tập dữ liệu lớn để hiển thị trên Leaflet

Question

Tôi có một cơ sở dữ liệu toàn cục về các đối tượng (điểm trên bản đồ) mà tôi muốn hiển thị trên bản đồ Leaflet. Thay vì tải tất cả các cơ sở dữ liệu (đơn giản là quá lớn) cùng một lúc và tạo các đối tượng trên một Leaflet LayerGroup, có cách nào hiệu quả hơn để truy vấn dữ liệu, có lẽ vì mỗi lần tải bản đồ, hoặc tôi đang tạo ra một giải pháp tùy chỉnh cho điều này?

Answer 1

Bạn có thể xem sự kiện 'moveend' trên bản đồ với map.on('moveend',loadstuff), thực hiện cuộc gọi ajax bên loadstuff() để lấy dấu bên trong hiện tại map.getBounds(), và sau đó thêm/gỡ bỏ các cột mốc (Tôi sẽ giả sử bạn có một số loại định danh toàn cầu đối với từng của họ) cho dù họ ở trong hay ngoài tầm nhìn hiện tại.

Answer 2

Có một cách tiêu chuẩn và hiệu quả xung quanh làm những gì snkashis nói. Tạo dịch vụ geoJSON được lát gạch và sử dụng plugin leaflet-tilelayer-geojson.

Sau đó, tất cả các mã bạn sẽ cần trình duyệt bên là (từ trang Github):

var geojsonURL = 'http://polymaps.appspot.com/state/{z}/{x}/{y}.json'; 
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, { 
     clipTiles: true, 
     unique: function (feature) { 
      return feature.id; 
     } 
    }, { 
     style: style, 
     onEachFeature: function (feature, layer) { 
      if (feature.properties) { 
       var popupString = '<div class="popup">'; 
       for (var k in feature.properties) { 
        var v = feature.properties[k]; 
        popupString += k + ': ' + v + '<br />'; 
       } 
       popupString += '</div>'; 
       layer.bindPopup(popupString); 
      } 
      if (!(layer instanceof L.Point)) { 
       layer.on('mouseover', function() { 
        layer.setStyle(hoverStyle); 
       }); 
       layer.on('mouseout', function() { 
        layer.setStyle(style); 
       }); 
      } 
     } 
    } 
); 
map.addLayer(geojsonTileLayer);