Javascript 防止传单中的多个markerClusterGroup图标重叠

我有两个单独的MarkerClusterGroup，偶尔会重叠。有没有办法防止这种情况发生？在我的实际代码中，我为其中一个集群组使用了一个自定义图标，这样我就可以区分这两种集群类型之间的差异。然而，对于这个例子来说这不是必需的，所以为了简单起见，我省略了这一部分

var map = L.map("map");

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.setView([48.85, 2.35], 12);
var mcg = L.markerClusterGroup().addTo(map);
var mcg2 = L.markerClusterGroup().addTo(map);

L.marker([48.85, 2.35]).addTo(mcg);
L.marker([48.85, 2.34]).addTo(mcg);
  
for(var i=0;i<40;i++){
    L.marker([48.85, 2.34091]).addTo(mcg2);
}

以下是我的意思的一个例子：

该要求规定，类别1中的标记必须与类别2中的标记分开聚类。但是，这两种类型必须同时显示在地图上

有没有办法防止这种情况发生

不是像你那样的几个传单。标记聚类组

想想看：当一个给定的组没有关于另一个组的数据时，应该在哪里计算集群图标的位置

您可能有几种可能的解决方法和/或其他库，它们可能更适合您的需要，而无需自己重新编写集群算法

例如，在群集时显示不同类别的一个流行替代方法是插件：

PruneCluster是一个快速、实时的标记聚类库

它使用传单作为传单的替代品。markercluster

摘自

另一种可能的解决方法是将所有类别合并到同一标记群集组中，但使用后者的群集图标，以便它们的渲染方式与上述PruneCluster屏幕截图类似，甚至为每个类别渲染假图标：

函数customcluster{ //计算每个类别中的标记数。 var markers=cluster.getAllChildMarkers； var CAT1计数=0； var cat2count=0； 标记的var标记{ 变量类别=marker.options.category； 如果类别和类别==='cat2'{ CAT2计数+=1； }否则{ CAT1计数+=1； } } //根据不同类别标记的存在情况生成群集图标。 如果cat2count==0{ 返回L.divIcon{ html:cat1count， 类名：“cat1cluster群集”， iconSize:[20,20] }; }否则，如果cat1count===0{ 返回L.divIcon{ html:cat2count， 类名：“cat2cluster群集”， iconSize:[20,20] }; }否则{ 返回L.divIcon{ html:` ${cat1count} ${cat2count} `, 类名：， iconSize:[45,20] }; } } 巴黎var=[48.86,2.35]； var-parisLeft=[48.86,2.25]； var-parisRight=[48.86,2.45]； var map=L.map'map'{ 最大缩放：18 }.setViewparis，11岁； var mcg=L.markerClusterGroup{ iconCreateFunction:customClusterIcon }.addTomap； 变量类别1=L.layerGroup； 变量类别2=L.layerGroup； 变量cat2style={ 颜色：“红色”， 类别：'cat2' }; var markerA=L.circleMarkerparis.addTocategory1； var markerB=L.circleMarkerparis.addTocategory1； var markerC=L.circleMarkerparis，cat2style.addTocategory2； var markerD=L.circleMarkerparis，cat2style.addTocategory2； var markerE=L.circleMarkerparisLeft.addTocategory1； var markerF=L.circleMarkerparisLeft.addTocategory1； var markerG=L.circleMarkerparisRight，cat2style.addTocategory2； var markerH=L.circleMarkerparisRight，cat2style.addTocategory2； mcg.addLayers[类别1，类别2]； L.tileLayer'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{ 属性：“©；贡献者” }.addTomap； html， 身体 地图{ 身高：100%； 保证金：0； } .Cat1群集{ 背景色：3388ff； } .Cat2群集{ 背景色：红色； } .群集{ 宽度：20px； 高度：20px； 显示：内联块； 文本对齐：居中； } 有没有办法防止这种情况发生

不是像你那样的几个传单。标记聚类组

想想看：当一个给定的组没有关于另一个组的数据时，应该在哪里计算集群图标的位置

您可能有几种可能的解决方法和/或其他库，它们可能更适合您的需要，而无需自己重新编写集群算法

例如，在群集时显示不同类别的一个流行替代方法是插件：

PruneCluster是一个快速、实时的标记聚类库

它使用传单作为传单的替代品。markercluster

摘自

另一种可能的解决方法是将所有类别合并到同一标记群集组中，但使用后者的群集图标，以便它们的渲染方式与上述PruneCluster屏幕截图类似，甚至为每个类别渲染假图标：

函数customcluster{ //计算每个类别中的标记数。 var markers=cluster.getAllChildMarkers； var CAT1计数=0； var cat2count=0； 标记的var标记{ 变量类别=marker.options.category； 如果类别和类别==='cat2'{ CAT2计数+=1； }否则{ CAT1计数+=1； } } //根据是否存在来自不同的标记生成群集图标 耳鼻喉科类别。 如果cat2count==0{ 返回L.divIcon{ html:cat1count， 类名：“cat1cluster群集”， iconSize:[20,20] }; }否则，如果cat1count===0{ 返回L.divIcon{ html:cat2count， 类名：“cat2cluster群集”， iconSize:[20,20] }; }否则{ 返回L.divIcon{ html:` ${cat1count} ${cat2count} `, 类名：， iconSize:[45,20] }; } } 巴黎var=[48.86,2.35]； var-parisLeft=[48.86,2.25]； var-parisRight=[48.86,2.45]； var map=L.map'map'{ 最大缩放：18 }.setViewparis，11岁； var mcg=L.markerClusterGroup{ iconCreateFunction:customClusterIcon }.addTomap； 变量类别1=L.layerGroup； 变量类别2=L.layerGroup； 变量cat2style={ 颜色：“红色”， 类别：'cat2' }; var markerA=L.circleMarkerparis.addTocategory1； var markerB=L.circleMarkerparis.addTocategory1； var markerC=L.circleMarkerparis，cat2style.addTocategory2； var markerD=L.circleMarkerparis，cat2style.addTocategory2； var markerE=L.circleMarkerparisLeft.addTocategory1； var markerF=L.circleMarkerparisLeft.addTocategory1； var markerG=L.circleMarkerparisRight，cat2style.addTocategory2； var markerH=L.circleMarkerparisRight，cat2style.addTocategory2； mcg.addLayers[类别1，类别2]； L.tileLayer'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{ 属性：“©；贡献者” }.addTomap； html， 身体 地图{ 身高：100%； 保证金：0； } .Cat1群集{ 背景色：3388ff； } .Cat2群集{ 背景色：红色； } .群集{ 宽度：20px； 高度：20px； 显示：内联块； 文本对齐：居中； }

---

还有一个有趣的退化情况：如果有四个数据点，每个类别两个，在相同的精确坐标中，会怎么样？我在问题中增加了这个要求。如果您能为我指出其他图书馆或解决方案的方向，我将不胜感激。非常感谢。我明白你说的@IvanSanchez.@AbuSulaiman:添加了可选PruneCluster的链接，以及显示不同类别的自定义群集图标示例。@ghybs感谢您提供的链接和示例。我从来没见过普伦克洛斯特。这真的很酷，我想这正是我们想要的。可能需要一段时间才能改变，但我认为这是值得的。非常感谢你。这太棒了！还有一个有趣的退化情况：如果有四个数据点，每个类别两个，在相同的精确坐标中，会怎么样？我在问题中增加了这个要求。如果您能为我指出其他图书馆或解决方案的方向，我将不胜感激。非常感谢。我明白你说的@IvanSanchez.@AbuSulaiman:添加了可选PruneCluster的链接，以及显示不同类别的自定义群集图标示例。@ghybs感谢您提供的链接和示例。我从来没见过普伦克洛斯特。这真的很酷，我想这正是我们想要的。可能需要一段时间才能改变，但我认为这是值得的。非常感谢你。这太棒了！谢谢您澄清您的要求。在我看来，您应该要求提供更多关于类别1中的标记的详细信息，这些标记必须与类别2中的标记分开。例如，如果cat 1的标记A与cat 2的标记B位于完全相同的位置，会发生什么情况？在当前代码中，它们将只是重叠，而不是群集。听起来我的UI很差。是的，我已经看到了。我接受了你的建议，并回去得到更多的澄清，尤其是当标记处于准确位置时。谢谢你的帮助。谢谢你澄清你的要求。在我看来，您应该要求提供更多关于类别1中的标记的详细信息，这些标记必须与类别2中的标记分开。例如，如果cat 1的标记A与cat 2的标记B位于完全相同的位置，会发生什么情况？在当前代码中，它们将只是重叠，而不是群集。听起来我的UI很差。是的，我已经看到了。我接受了你的建议，并回去得到更多的澄清，尤其是当标记处于准确位置时。谢谢你的帮助。