leaflet - 根据当前边界框将 GeoJSON 图层从 Geoserver 加载到 Leaflet Map

Question

目前，我的 map 有超过 25000 个点。当我加载所有点时， map 非常慢。因此，我想仅在特定的缩放级别和边界框(用户 View )下加载数据。我怎样才能用我当前的代码实现这一点？

var map = new L.Map('map', {center: new L.LatLng(54.0000, -125.0000), zoom: 5});
  var googleLayer = new L.Google('ROADMAP');      
  map.addLayer(googleLayer);

function BoundingBox(){
var bounds = map.getBounds().getSouthWest().lng + "," +     map.getBounds().getSouthWest().lat + "," + map.getBounds().getNorthEast().lng + "," + map.getBounds().getNorthEast().lat;
return bounds;
}
var geoJsonUrl ="http://localhost:8080/geoserver/Wells/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Wells:bc_well_data_wgs&maxFeatures=25&outputFormat=text/javascript&format_options=callback:loadGeoJson"; 

var geojsonLayerWells = new L.GeoJSON();

function loadGeoJson(data) {
console.log(data);
geojsonLayerWells.addData(data);
};

$.ajax({ 
    url: geoJsonUrl, 
    dataType : 'jsonp',
    success: loadGeoJson
    });


map.on('moveend', function(){

    if(map.getZoom() >= 18){

        map.removeLayer(geojsonLayerWells);

        }
    if(map.getZoom() < 18){
        map.addLayer(geojsonLayerWells);
        }
        console.log(map.getZoom());
        console.log(BoundingBox());
    });

Answer 1

这是我解决这个问题的方法，改变了一切。

var wellmaxzoom = 11;       
var geojsonLayerWells = new L.GeoJSON();

function loadGeoJson(data) {
    console.log(data);
    geojsonLayerWells.addData(data);
    map.addLayer(geojsonLayerWells);
};

map.on('moveend', function(){
 if(map.getZoom() > wellmaxzoom){
    var geoJsonUrl ='http://localhost:8080/geoserver/cite/ows'; 
    var defaultParameters = {
        service: 'WFS',
        version: '1.0.0',
        request: 'getFeature',
        typeName: 'cite:bc_well_data_wgs',
        maxFeatures: 3000,
        outputFormat: 'application/json'
        };

    var customParams = {
        bbox: map.getBounds().toBBoxString(),
        };
    var parameters = L.Util.extend(defaultParameters, customParams);
    console.log(geoJsonUrl + L.Util.getParamString(parameters));

    $.ajax({
        url: geoJsonUrl + L.Util.getParamString(parameters),
        datatype: 'json',
        jsonCallback: 'getJson',
        success: loadGeoJson
        });
    }else{
    map.removeLayer(geojsonLayerWells);
    };
});