Leaflet: Update GeoJson filter?

后端 未结 3 1966
北海茫月
北海茫月 2020-12-28 16:53

I would like to populate a GeoJson layer with data and then dynamically filter what features to show.

I have gotten the filter function to work but I do not know how

3条回答
  •  挽巷
    挽巷 (楼主)
    2020-12-28 17:11

    I did this by adding each feature type to a different LayerGroup based on a property of the feature. e.g.

    GeoJSON

    var data =[
      {
       type: "Feature",
       properties: {
          type: "type1"
       },
       geometry: {
          type: "Point",
          coordinates: [-1.252,52.107]
       }
      },
      {
       type: "Feature",
       properties: {
          type: "type2"
       },
       geometry: {
          type: "Point",
          coordinates: [-2.252,54.107]
       }
      }
    ];
    

    Create the GeoJSON Layer

    //array to store layers for each feature type
    var mapLayerGroups = [];
    
    //draw GEOJSON - don't add the GEOJSON layer to the map here
    L.geoJson(data, {onEachFeature: onEachFeature})//.addTo(map);
    
    /*
     *for all features create a layerGroup for each feature type and add the feature to the    layerGroup
    */
    function onEachFeature(feature, featureLayer) {
    
        //does layerGroup already exist? if not create it and add to map
        var lg = mapLayerGroups[feature.properties.type];
    
        if (lg === undefined) {
            lg = new L.layerGroup();
            //add the layer to the map
            lg.addTo(map);
            //store layer
            mapLayerGroups[feature.properties.type] = lg;
        }
    
        //add the feature to the layer
        lg.addLayer(featureLayer);      
    }
    

    Then you can call the Leaflet map.addLayer/removeLayer functions e.g.

    //Show layerGroup with feature of "type1"
    showLayer("type1");
    
    /*
    * show/hide layerGroup   
    */
    function showLayer(id) {
        var lg = mapLayerGroups[id];
        map.addLayer(lg);   
    }
    function hideLayer(id) {
        var lg = mapLayerGroups[id];
        map.removeLayer(lg);   
    }
    

提交回复
热议问题