Я бы хотел отфильтровать маркеры на моем (геойсон) слое по двум признакам: год и тип события. Я счастлив за год, о котором позаботятся 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, независимо от того, что это за событие (потому что по умолчанию оно будет отображать все события). Однако если пользователь установит флажки «funfair» и «trade», я хочу, чтобы на карте отображались только события 1890 года типа funfair и trade, а не другие события.
Это мой полный скрипт, который до сих пор отлично работал с фильтрацией по годам.
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);
Я новичок с буклетом, поэтому, пожалуйста, прости тупой вопрос, если это так.