Загрузка слоев GeoJSON из Geoserver в Leaflet Map на основе текущей ограничивающей рамки

В настоящее время у меня более 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());
    });

leaflet geojson bounding-box geoserver
person mblais29    schedule 07.08.2014    source источник

Ответы (5)


arrow_upward
9
arrow_downward

Вот как я решил это, изменил все вокруг.

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);
    };
});
person mblais29    schedule 13.08.2014

arrow_upward
2
arrow_downward

WFS не имеет понятия уровня масштабирования или масштаба, то есть WMS, хотя поддерживает загрузку подмножества данных на основе bbox (см. примеры WFS).

При этом GeoServer не поддерживает JSon для WMS, см. http://docs.geoserver.org/latest/en/user/services/wms/outputformats.html#wms-output-formats

Это может быть хорошей вещью, чтобы внести свой вклад.

Симона.

person simogeo    schedule 07.08.2014
comment
В WMS также нет понятия масштаба, это WMTS. - person user27874; 23.09.2019

arrow_upward
1
arrow_downward

Это работает для GeoServer 2.6.2 с Leaflet 0.7.3. Кстати, следующие номера bbox города Сан-Франциско были получены собственной функцией Leaflet.

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

Без ограничений: (вернуть много) http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application/json

С ограничением границ карты (возврат в настоящее время охватывает) http://localhost:8080/geoserver/topp/ows?service=wfs&version=1.0.0&request=GetFeature&typeName=topp:states&bbox=-122.42553591728209,37.77453948196016,-122.4133050441742,37.775319671408&outputFormat=application/json

person xjlin0    schedule 14.03.2015

arrow_upward
0
arrow_downward

Ваш код выглядит нормально. Просто передайте bbox в URL.

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";
person SSA    schedule 11.08.2014
comment
Я добавил его в свой URL-адрес в функции $.ajax, и он по-прежнему работает медленно, когда я добавляю 5000 в качестве максимальной функции и приближаю масштаб очень близко. Есть ли способ увидеть, сколько объектов вызывается при определенном увеличении? - person mblais29; 12.08.2014
comment
Если ваша функция BoundingBox() дает правильный bbox, вы должны получать данные в этом диапазоне. Я бы сказал для теста, URL-адрес в предварительном просмотре слоя инструмента администрирования геосервера, добавьте вычисление bbox из вашей функции и посмотрите результат. - person SSA; 12.08.2014

arrow_upward
0
arrow_downward

Это то, что я придумал, когда я проверяю, сколько загруженных объектов, он говорит 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());
    });
person mblais29    schedule 12.08.2014