聚类GeoJSON图层无法与标记过滤配合使用。

Question

我正在使用Leaflet地图展示一些GeoJSON数据。

我尝试在我的JS文件中添加聚类功能。由于我已根据属性添加了一些过滤和样式特性，因此我无法找到编写聚类函数的正确方法。

这是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

使用样式功能：

              var year = feature.properties.year;
              if (year <= -150) {
                  return {
                      color: "black"
                  };

我接下来添加弹出框：

layer.bindPopup(popupText, {
       closeButton: true,
       offset: L.point(0, -10)
          });
     layer.on('click', function() {
       layer.openPopup();
     });
   },
}).addTo(map);

我尝试添加这段代码以显示聚类，但不知道在我的代码中应该放在哪里才能生效(https://github.com/Leaflet/Leaflet.markercluster)：

var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
// ... Add more layers ...
map.addLayer(markers);

我的全部代码都可以在这里找到：https://github.com/jandre3/pince-crochet

- Titus25

---

欢迎来到SO！您的要素是点类型吗？Leaflet.markercluster只能对点图层（标记或圆形标记）进行聚类。 - ghybs

谢谢！是的，有积分。 - Titus25

Answer 1

一旦您已经填充了您的Leaflet GeoJSON图层组（通常使用geojsonLayer.addData(geoJsonObject)），那么不要将该组添加到地图中，而是将其添加到MarkerClusterGroup中：

const mcg = L.markerClusterGroup().addTo(map);

geojsonLayer.addData(geoJsonObject).addTo(mcg);

如果以后您想要交换内容，可以清除两个组中的内容并重复之前的步骤。

mcg.clearLayers();
geojsonLayer.clearLayers();

geojsonLayer.addData(geoJsonObject).addTo(mcg);

Demo: https://jsfiddle.net/hd68ea7k/

- ghybs

---

谢谢您的回答！显然我在做某些事情时出了问题，因为它在我的电脑上无法运行。这是因为我使用了各种颜色的标记吗？我可以请您在我的示例中编写代码吗？我的整个代码都在这里（https://github.com/jandre3/pince-crochet/blob/e77d060b75b3650ea3dee79fe9e468207b8e194d/scripts/listeSites2.js） - Titus25

如果您可以在实时编辑服务（例如在此处作为代码片段或使用JSFiddle、Plunkr、CodeSandbox、StackBlitz等）上提供复制示例，则我可以尝试更具体地查看为什么在您的情况下它无法正常工作。 - ghybs

是的，这是我的JSFiddle代码链接：https://jsfiddle.net/titus25/x8qsbc9p/ - Titus25

在上面的答案中所描述的方式运作正常，一旦您包含了插件CSS并修复了Leaflet.markercluster JS文件的URL：https://jsfiddle.net/hd68ea7k/ - ghybs

非常感谢您的大力帮助！ - Titus25