当您单击 map 然后添加到它时，按功能过滤 leaflet 层

Question

I'm trying to get a map that when you click at it generates a filter of a shapefile and then adds a layer only with the feature that matches the place where you click it.

I find this example http://plnkr.co/edit/o5Q0p3?p=preview&preview but in my case I need that the layer isn't added to map at fist. So, with only the map of leaflet you click and generates the filter of the shapefile and then you can see the feature.

This is what I have:

'''

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

Thank you a lot. and I hope that many other people that might have the same question finds the answers useful: (:

Answer 1

it is little more convenient to use shapefile-js https://github.com/calvinmetcalf/shapefile-js instead of L.Shapefile . Because it allows to load geojson data once and reuse it on each click.

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

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