Question

我有一个非常大的geonson，加载后，地图非常慢。

我只想在地图上显示与可见屏幕相关的元素（与移动和缩放兼容）。

有代码：

var geojsonLayerAerien = new L.GeoJSON.AJAX("/json/data.json",
        {
            style: {
                weight: 3,
                color: "#5588EE",
                opacity: 0.5,
                fillColor: "#B0DE5C",
                fillOpacity: 0.3
            },
            onEachFeature: onEachFeature
        }
    );

var overlayMaps = {
            "Réseau Aérien": geojsonLayerAerien
        };

L.control.layers(baseMaps, overlayMaps, null, { collapsed: true }).addTo(map);

您能帮我实现代码或给我一些提示吗？谢谢

Answer 1

在加载数据之前，请尝试使用php或其他方法过滤数据，因此计算是在服务器端进行的。

但是如果要在客户端使用，可以检查对象的latlngs是否在地图范围内：

var bbox = mymap.getBounds().pad(0.3); //Expand bounds 10%
var rect = L.rectangle(bbox, {fillColor: '#f00'}).addTo(mymap); //Only for showing the loading area

function bboxFilter(feature) {
  if (feature.geometry.type === "Point"){
        var latlng = L.latLng(feature.geometry.coordinates[1],feature.geometry.coordinates[0]);
        if(bbox.contains(latlng)){
            return true;
        }else{
            return false;
        }
  }else{
        var polylatlng = new L.Polyline([]);
        var coords = feature.geometry.coordinates;
      coords[0].forEach(function(coord){
        var lat = coord[1];
        var lng = coord[0];
        polylatlng.addLatLng(L.latLng([lat,lng]));
      });

        if(bbox.contains(polylatlng.getLatLngs())){
        polylatlng.removeFrom(mymap);
        return true;
        }else{
        polylatlng.removeFrom(mymap);
        return false;
         }
  }
}


var geojson = L.geoJSON(json,{filter: bboxFilter}).addTo(mymap);

mymap.on('moveend',reloadData);
function reloadData(){
    bbox = mymap.getBounds().pad(0.3); //Expand bounds 10%
    geojson.clearLayers();
  geojson = L.geoJSON(json,{filter: bboxFilter}).addTo(mymap);
  rect.setBounds(bbox);
}

示例：https://jsfiddle.net/falkedesign/b2st3m9u/

PS：将bbox = mymap.getBounds().pad(0.3);更改为bbox = mymap.getBounds().pad(-0.1);可以看到效果

传单：仅在屏幕上显示元素

1 个答案: