目前,我的地图有超过25000点.当我加载所有点时,地图非常慢.因此,我只想在某个缩放级别和边界框(用户视图)加载数据.如何使用我当前的代码实现这一目标?
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());
});
Run Code Online (Sandbox Code Playgroud)