时间戳

首页 > 解决方案 > 传单：仅在屏幕上显示元素

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

问题描述

我有一个非常大的 geoson，当它加载时，地图非常慢。

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

有代码：

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

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

标签： leaflet

解决方案

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

但是如果你想在客户端，你可以检查对象的纬度是否在地图范围内：

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);效果

推荐阅读