Добавьте сервис WFS на карту Leaflet и вам нужно контролировать текущий масштаб

Мне нужно загрузить сервис WFS (точки) в мою карту Leaflet.

Я знаю, как загрузить службу WFS на свою карту, но я должен динамически проверить текущий масштаб / экстент карты, потому что я должен ограничить количество функций, которые я должен запрашивать на сервере и отображать на моей карте.

У моего сервиса много точек, и я хотел бы ограничить визуализацию моего слоя только тогда, когда мы находимся на уровне 18 моей базовой карты (OpenStreetMap).

Есть ли способ динамически проверить текущий экстент / масштаб карты и, таким образом, решить, вызывать или нет мою службу WFS?

Любой пример?

Заранее большое спасибо, любое предложение приветствуется !!!!

Чезаре


leaflet web-feature-service
person Cesare    schedule 09.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я решил таким образом

        .....
        .....
        .....
            function onEachFeature(feature, layer) {
               if (feature.properties && feature.properties.popupContent) {
                       layer.bindPopup(feature.properties.popupContent);
               }
            };

            myGeoJSONLayeraddressPCN3 = L.geoJson(myGeoJSON, {
                            pointToLayer: function (feature, latlng) {
                                              return L.circleMarker(latlng, geojsonMarkerOptions);
                            },
                            onEachFeature: onEachFeature
            });

            var baseLayers = {
                    "OSM": background
            };

            var overlays = {
                   "My GeoJSON Layer name": myGeoJSONLayer
            };

            map = new L.Map('map', {
                                    center: [42, 12],
                                    zoom: 6,
                                    layers: [background]

            });

            // *** add base layers and overlay layers list to map ... ***
            TOC = L.control.layers(baseLayers, overlays);
            TOC.addTo(map);                              

            map.on('overlayadd', function(e) {
                                    map.removeLayer(myGeoJSONLayer); 
                                    TOC.removeLayer(myGeoJSONLayer);
                                    if ((e.name == "My GeoJSON Layer name") && (map.getZoom() < 18)){
                                     alert('To view the layer zoom at max details ...');
                                     TOC.addOverlay(myGeoJSONLayer, "My GeoJSON Layer name");
                                     isOnMap = 0;
                                    } 
                                    if ((e.name == "My GeoJSON Layer name") && (map.getZoom() >= 18)){
                                     var currentExtent = map.getBounds().toBBoxString();
                                     invokeService(currentExtent);
                                    } 
                                 });

            map.on('overlayremove', function(e) {
                                    if (e.name == "My GeoJSON Layer name"){
                                     isOnMap = 0;
                                    } 
                                 });

            map.on('dragend', function(e) {
                                    if ((map.getZoom() >= 18) && (isOnMap == 1)){
                                     map.removeLayer(myGeoJSONLayer); 
                                     TOC.removeLayer(myGeoJSONLayer);
                                     var currentExtent = map.getBounds().toBBoxString();
                                     invokeService(currentExtent);
                                    } 
                                 });

            map.on('zoomend', function(e) {
                                    if (map.getZoom() < 18) {
                                     map.removeLayer(myGeoJSONLayer); 
                                     TOC.removeLayer(myGeoJSONLayer);
                                     TOC.addOverlay(myGeoJSONLayer, "My GeoJSON Layer name");
                                    } 
                                 });

и у меня также есть функция invokeService (), где я ...

function invokeService (extent) {
             .....
             .....
             .....
                    function onEachFeature(feature, layer) {
                      if (feature.properties && feature.properties.popupContent) {
                         layer.bindPopup(feature.properties.popupContent);
                      }
                     }

                     myGeoJSONLayeraddressPCN3 = L.geoJson(MyGeoJSON, {
                                     pointToLayer: function (feature, latlng) {
                                                   return L.circleMarker(latlng, geojsonMarkerOptions);
                                     },
                                     onEachFeature: onEachFeature
                     });

                     addressPCN3.addTo(map);                         
                     TOC.addOverlay(addressPCN3, "My GeoJSON Layer name");
                     isOnMap = 1;
               }
             .....
             .....
             .....
}

Теперь работает!

person Cesare    schedule 14.08.2014