我有两个单独的markerClusterGroup,有时会重叠。反正有防止这种情况发生的方法吗?在我的实际代码中,我为一个集群组使用了一个自定义图标,以便我可以分辨出两种集群类型之间的区别。但是,此示例不是必需的,因此为了简单起见,我将该部分省略。
var map = L.map("map");
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <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);
}
这是我的意思的示例:
http://plnkr.co/edit/yqIhI7RMsp9A7I3AwGnY?p=preview
该要求指出,类别1中的标记必须与类别2中的标记分开聚类。但是,这两种类型必须同时显示在地图上。
答案 0 :(得分:2)
反正有防止这种情况发生吗?
不像您那样具有几个Leaflet.markercluster组。
考虑一下:当给定组没有有关另一组的数据时,应在哪里计算群集图标的位置?
您可能有几种可能的解决方法和/或其他更适合您需要的库,而不必自己重新编写集群算法。
例如,PruneCluster插件是在聚类时显示不同类别的一种流行选择:
PruneCluster是一个快速,实时的标记聚类库。
它正在与Leaflet一起使用,以替代Leaflet.markercluster。
另一种可能的解决方法是将所有类别合并到同一个标记群集组中,但具有后者的群集图标customized,以便它们与上述PruneCluster屏幕截图类似地呈现,甚至为每个类别呈现伪造的图标:
function customClusterIcon(cluster) {
// Count number of markers from each category.
var markers = cluster.getAllChildMarkers();
var cat1count = 0;
var cat2count = 0;
for (var marker of markers) {
var category = marker.options.category;
if (category && category === 'cat2') {
cat2count += 1;
} else {
cat1count += 1;
}
}
// Generate the cluster icon depending on presence of Markers from different categories.
if (cat2count === 0) {
return L.divIcon({
html: cat1count,
className: 'cat1cluster cluster',
iconSize: [20, 20]
});
} else if (cat1count === 0) {
return L.divIcon({
html: cat2count,
className: 'cat2cluster cluster',
iconSize: [20, 20]
});
} else {
return L.divIcon({
html: `
<div class="cat1cluster cluster">${cat1count}</div>
<div class="cat2cluster cluster">${cat2count}</div>
`,
className: '',
iconSize: [45, 20]
});
}
}
var paris = [48.86, 2.35];
var parisLeft = [48.86, 2.25];
var parisRight = [48.86, 2.45];
var map = L.map('map', {
maxZoom: 18
}).setView(paris, 11);
var mcg = L.markerClusterGroup({
iconCreateFunction: customClusterIcon
}).addTo(map);
var category1 = L.layerGroup();
var category2 = L.layerGroup();
var cat2style = {
color: 'red',
category: 'cat2'
};
var markerA = L.circleMarker(paris).addTo(category1);
var markerB = L.circleMarker(paris).addTo(category1);
var markerC = L.circleMarker(paris, cat2style).addTo(category2);
var markerD = L.circleMarker(paris, cat2style).addTo(category2);
var markerE = L.circleMarker(parisLeft).addTo(category1);
var markerF = L.circleMarker(parisLeft).addTo(category1);
var markerG = L.circleMarker(parisRight, cat2style).addTo(category2);
var markerH = L.circleMarker(parisRight, cat2style).addTo(category2);
mcg.addLayers([category1, category2]);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
html,
body,
#map {
height: 100%;
margin: 0;
}
.cat1cluster {
background-color: #3388ff;
}
.cat2cluster {
background-color: red;
}
.cluster {
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
}
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>
<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster-src.js"></script>
<div id="map"></div>
然后,如果希望的话,您可以进一步自定义蜘蛛网化,使其仅从单击的类别簇图标中显示标记,对于悬停的多边形也是如此。