[英]Cluster geojson Layer doesn't work with marker filtering
I'm doing a Leaflet map with some GeoJSON data.我正在使用一些 GeoJSON 数据执行 Leaflet map。
I try to add the cluster function to my JS file.我尝试将集群 function 添加到我的 JS 文件中。 As I added some filter and styling features according to properties, I'm unable to find the right way to code the cluster fonction.当我根据属性添加了一些过滤器和样式功能时,我无法找到正确的方法来编写集群函数。
Here is the GeoJSON layer and the filter verificator:这是 GeoJSON 层和过滤器验证器:
const geojsonLayer = L.geoJSON(null,{
filter: (feature) => {
const isYearChecked = checkboxStates.years.includes(feature.properties.year)
const isEventTypeChecked = checkboxStates.eventTypes.includes(feature.properties.eventType)
return isYearChecked && isEventTypeChecked }, //only true if both are true
with the syling function:带有字样 function:
var year = feature.properties.year;
if (year <= -150) {
return {
color: "black"
};
I add then the popup:然后我添加弹出窗口:
layer.bindPopup(popupText, {
closeButton: true,
offset: L.point(0, -10)
});
layer.on('click', function() {
layer.openPopup();
});
},
}).addTo(map);
I try to add this piece of code to display the cluster but I don't know where to place it in my code in order to work ( https://github.com/Leaflet/Leaflet.markercluster ):我尝试添加这段代码来显示集群,但我不知道将它放在我的代码中的哪个位置以便工作( https://github.com/Leaflet/Leaflet.markercluster ):
var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
// ... Add more layers ...
map.addLayer(markers);
My whole code is available here: https://github.com/jandre3/pince-crochet我的整个代码在这里可用: https://github.com/jandre3/pince-crochet
Once you have populated your Leaflet GeoJSON Layer Group (typically with geojsonLayer.addData(geoJsonObject)
, then instead of adding that group to your map, simply add it into your MarkerClusterGroup:一旦您填充了 Leaflet GeoJSON 图层组(通常使用geojsonLayer.addData(geoJsonObject)
,然后将该组添加到您的 map 中,只需将其添加到您的 MarkerClusterGroup 中:
const mcg = L.markerClusterGroup().addTo(map);
geojsonLayer.addData(geoJsonObject).addTo(mcg);
If later on you want to swap the content, you can clear it from both groups and repeat:如果稍后您想交换内容,您可以从两个组中清除它并重复:
mcg.clearLayers();
geojsonLayer.clearLayers();
geojsonLayer.addData(geoJsonObject).addTo(mcg);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.