时间戳

首页 > 解决方案 > 单击地图然后添加到地图时，按要素过滤传单

javascript - 单击地图然后添加到地图时，按要素过滤传单

问题描述

我正在尝试获取一张地图，当您单击它时会生成一个 shapefile 过滤器，然后添加一个仅具有与您单击它的位置相匹配的功能的图层。

我找到了这个例子http://plnkr.co/edit/o5Q0p3?p=preview&preview但在我的情况下，我需要不将图层添加到地图中。因此，只需单击传单地图并生成 shapefile 的过滤器，然后您就可以看到该功能。

这就是我所拥有的：

'''

var shpfileM = new L.Shapefile('assets/Muncipios.zip', {
    onEachFeature: function (feature, layer) {
        if (feature.properties) {
            layer.bindPopup(Object.keys(feature.properties).map(function (k) {
                return k + ": " + feature.properties[k];
            }).join("<br />"), {
                maxHeight: 200
            });
        }
    },
    style: {
        color: 'green',
        fillColor: 'green',
        fillOpacity: 0.1
    }
});

function onMapClick(e) {

            var longlat = map.getLatLng();

            eachMun = L.Shapefile(shpfileM, {
                    filter: filter(feature),
                    if (feature = longlat) { return
                        L.layer(feature).addTo(map)
                    }
            })};

            map.on('click', onMapClick);

十分感谢！我希望可能有相同问题的许多其他人发现这些答案很有用。（：

标签： javascriptleafletshapefile

解决方案

使用shapefile-js https://github.com/calvinmetcalf/shapefile-js而不是L.Shapefile. 因为它允许加载一次 geojson 数据并在每次点击时重用它。

还包括 turf.js

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>

// create map
var mymap = L.map(...)

// create variable, where json from shp, will be once loaded and stored
let jsonData = null

// create variable for polygons group
let group = null

// read shp data and put it to variable
shp("filepath.zip").then(function (geojson) {
  console.log(geojson)
  jsonData = geojson
});

function onMapClick(e) {
  // get point from click event and create turf point
  let point = turf.point([e.latlng.lng, e.latlng.lat])

  // clear polygons, if they already exist
  if (group) {
    group.clearLayers()
    group.removeFrom(mymap)
  }

  group = L.geoJSON(jsonData, {
     style: {...},
     filter: (el) => {
        // try catch, to avoid invalid geometry errors
        try {
          // check point in polygon 
          return turf.booleanPointInPolygon(point, el.geometry)
        } catch(error) {
          return false
        }
       },
       onEachFeature: function(){...}
    })
    
    // add filtered layer group to map
    group.addTo(mymap)
}

mymap.on('click', onMapClick);

或使用 L.Shapefile

function onMapClick(e) {
   let point = turf.point([e.latlng.lng, e.latlng.lat])

    if (group) {
      group.clearLayers()
      group.removeFrom(mymap)
    }

    group = new L.Shapefile('filepath.zip', {
     // same options as in previous example
    })

    group.addTo(mymap)
 };

 mymap.on('click', onMapClick);

推荐阅读