Question

我想根据两个功能（年份和事件类型）过滤我（geojson）层上的标记。我很高兴layerGroup能够为您服务。尽管如此，我仍然可以单击一个复选框并通过根据feature.properties.eventType过滤标记来动态更新标记，除了显示的年份之外，还，例如

  <input type="checkbox" id="all" name="all" value="all">
      <label for="all">All</label>
      <input type="checkbox" id="funfair" name="funfair" value="newsletter">
      <label for="funfair">Funfair</label>
      <input type="checkbox" id="trade" name="trade" value="trade">
      <label for="trade">Trade</label>
      <input type="checkbox" id="exhibition" name="exhibition" value="exhibition">
      <label for="exhibition">Paid exhibition</label>

等...会触发

filter: function(feature, layer) {
               return feature.properties.eventType == value-of-checkbox;
           }

我有五种类型的eventType。因此，例如，如果选中1890，则该地图将显示所有1890事件，无论它是哪种事件（因为默认情况下它将显示所有事件）。但是，如果用户选中“游乐场”和“贸易”复选框，我希望地图仅显示1890年的游乐场和贸易类型的事件，而不显示其他类型的事件。

这是我完整的脚本，到目前为止，按年份过滤可以正常工作。

var oldmap = L.tileLayer('address', {
        maxZoom: 12
}),

    modernmap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {

    maxZoom: 12,
    id: 'mapbox.streets',
    accessToken: 'mytoken'
});

var map = L.map('map', {
        center: [40.1857864,-4.5536861],
        zoom: 7,
        layers: [oldmap, modernmap]
        });

var baseMaps = {
    "Old map": oldmap,
    "Modern map": modernmap
};
        var jsontest = {"type": "FeatureCollection",
        "features": [
        {
         "type": "Feature",
         "geometry": {
            "type": "Point",
            "coordinates":  [ -16.5471268,28.4136726 ]
         },
         "properties": {
         "Name":"Point1",
         "year":'1892',
         "eventType":"funfair",
         "notes":""
         }
        },
        {
         "type": "Feature",
         "geometry": {
            "type": "Point",
            "coordinates":  [ 2.1753895,41.3767925 ]
         },
         "properties": {
         "Name":"Point2",
         "year":'1890',
         "eventType":"trade demonstration",
         "notes":""
         }
        }
        ]};

        var mapLayerGroupsYear = [];
    function onEachFeature(feature, layer) {

        var year = mapLayerGroupsYear[feature.properties.year];
        if (year === undefined) {
            year = new L.layerGroup();

            //add the layer to the map
            year.addTo(map);

            //store layer
            mapLayerGroupsYear[feature.properties.year] = year;
        }

            //add the feature to the layer
            year.addLayer(layer);

    }
    var myLayer = L.geoJSON(jsontest, {
      onEachFeature: onEachFeature

    L.control.layers(baseMaps, mapLayerGroupsYear).addTo(map);

我是初学者，因此请原谅愚蠢的问题，以防万一。

Answer 1

多亏了Stefan，我才得以成功完成这项工作。解决方案在这里：

https://gis.stackexchange.com/questions/307985/multiple-on-the-fly-filtering-based-on-markers-features-on-leaflet

在传单层上进行多个即时过滤

1 个答案: