Leaflet 基于当前边界框将GeoJSON图层从Geoserver加载到传单地图

目前，我的地图上有超过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());
    });

var-map=newl.map（'map'，{center:newl.LatLng（54.0000，-125.0000），zoom:5}）；
var googleLayer=newl.Google（“路线图”）；
map.addLayer（googleLayer）；
函数边界框（）{
var bounds=map.getBounds（）.getSouthWest（）.lng+，“+map.getBounds（）.getSouthWest（）.lat+”，“+map.getBounds（）.getNorthwest（）.lng+”，“+map.getBounds（）.getNorthwest（）.lat；
返回边界；
}
变量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=新的L.GeoJSON（）；
函数loadGeoJson（数据）{
控制台日志（数据）；
geojsonLayerWells.addData（数据）；
};
$.ajax（{
网址：geoJsonUrl，
数据类型：“jsonp”，
成功：loadGeoJson
});
map.on（'moveend'，function（）{
如果（map.getZoom（）>=18）{
地图移除层（geojsonLayerWells）；
}
if（map.getZoom（）<18）{
map.addLayer（geojsonLayerWells）；
}
log（map.getZoom（））；
log（BoundingBox（））；
});

WFS没有缩放级别或缩放的概念，即WMS，但它支持基于bbox加载数据子集（请参见WFS示例）

也就是说，GeoServer不支持WMS的JSon，请参阅

不过，这可能是一件好事

---

西蒙妮。

你的代码看起来不错。只需在url中传递bbox

var bbox = BoundingBox();

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=json&bbox="+bbox+"&format_options=callback:loadGeoJson";

---

这就是我想到的，当我检查加载了多少对象时，它表示4000，这意味着它也加载了边界框之外的所有内容

//loads the google map
var map = new L.Map('map', {center: new L.LatLng(54.0000, -125.0000), zoom: 5});
  var googleLayer = new L.Google('ROADMAP');      // Possible types: SATELLITE,        ROADMAP, HYBRID
  map.addLayer(googleLayer);


//Gets the current bounding box lat and long

function BoundingBox(){
var bounds = map.getBounds().getSouthWest().lng + "," + map.getBounds().getSouthWest().lat + "," + map.getBounds().getNorthEast().lng + "," + map.getBounds().getNorthEast().lat;
return bounds;
}

//loads the well markers
wellmaxzoom = 8;
var geoJsonUrl ="http://localhost:8080/geoserver/cite/ows? service=WFS&version=1.0.0&request=GetFeature&typeName=cite:bc_well_data_wgs&maxFeatures=4000&outputFormat=application/json";

var geojsonLayerWells = new L.GeoJSON();

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

$.ajax({ 
    url: geoJsonUrl + "&bbox=" + BoundingBox(),
    dataType : 'json',
    jsonpCallback: 'loadGeoJson',
    success: loadGeoJson,
    });

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

    if(map.getZoom() > wellmaxzoom){
        map.addLayer(geojsonLayerWells);
        }
        console.log(map.getZoom());
        console.log(BoundingBox());
    });

---

我就是这样解决的，改变了周围的一切

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

---

这适用于geoserver2.6.2和传单0.7.3。顺便说一句，SF city的以下bbox编号是通过传单的本机功能获得的

var yourMap = L.map('map').setView([37.7749295, -122.4194155], 17);
yourMap.getBounds().toBBoxString();

无限制：（返回多个）

地图边界限制（返回当前覆盖）

---

我在$.ajax函数中将它添加到我的url中，当我添加5000作为max功能时，它仍然运行缓慢，并且我放大到非常接近。有没有办法查看在特定缩放时调用了多少对象？如果您的BoundingBox（）函数给出了正确的bbox，那么您应该得到该范围内的数据。我想说的是，对于测试，在geoserver管理工具层预览中的url，从函数中添加bbox calculate并查看结果。WMS也没有缩放比例的概念，这就是WMTS