防止多个markerClusterGroup图标在Leaflet中重叠 [英] Prevent multiple markerClusterGroup icons from overlapping in Leaflet

问题描述

我有两个单独的markerClusterGroup，有时会重叠.反正有防止这种情况发生的方法吗?在我的实际代码中，我为一个集群组使用了一个自定义图标，以便我可以分辨出这两种集群类型之间的区别.但是，此示例不是必需的，因此为了简单起见，我省略了该部分.

  var map = L.map("map");L.tileLayer('https://{s} .tile.openstreetmap.org/{z}/{x}/{y} .png'，{归因:& copy;< a href =" http://osm.org/copyright"> OpenStreetMap</a>贡献者的}).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中的标记分开聚类.但是，两种类型必须同时显示在地图上.

解决方案

反正有防止这种情况发生吗?

不像您那样具有多个Leaflet.markercluster组.

考虑一下:当给定组没有有关另一组的数据时，应在何处计算群集图标的位置?

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

例如，_摘录自

 函数customClusterIcon(cluster){//计算每个类别中的标记数.var markers = cluster.getAllChildMarkers();var cat1count = 0;var cat2count = 0;对于(标记的可变标记){var category = marker.options.category;if(类别&&类别==='cat2'){cat2count + = 1;} 别的 {cat1count + = 1;}}//根据不同类别的标记的存在来生成群集图标.如果(cat2count === 0){返回L.divIcon({html:cat1count，className:'cat1cluster群集'，iconSize:[20，20]});}否则，如果(cat1count === 0){返回L.divIcon({html:cat2count，className:'cat2cluster群集'，iconSize:[20，20]});} 别的 {返回L.divIcon({html:< div class ="cat1cluster cluster"> $ {cat1count}</div>< div class ="cat2cluster cluster"> $ {cat2count}</div>`，班级名称: ''，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 = {红色'，类别:"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'，{归因:& copy;< a href ="http://osm.org/copyright"> OpenStreetMap</a>贡献者的}).addTo(map);  

  html，身体，#地图 {高度:100％;边距:0;}.cat1cluster {背景颜色:#3388ff;}.cat2cluster {背景颜色:红色；}.簇 {宽度:20px；高度:20px；显示:inline-block;文本对齐:居中；}  

 <！-传单资产->< link rel ="stylesheet" href ="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"完整性="sha512-puBpdR0798OZvTTbP4A8Ix/l + A4dHDD0DGqYW6RQ + 9jxkRFclaxxQb/SJAWZfWAQye + 4O="crossorigin =""/>< script src ="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js"完整性="sha512- + ZaXMZ7sjFMiCigvm8WjllFy6g3aou3 + GZngAtugLzrmPFKFK7yjSri0XnElvCTu/A&T; = A = A = A'/script><！-Leaflet.markercluster资产->< 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>  

然后，如果您愿意，可以进一步自定义蜘蛛网化，使其仅从单击的类别簇图标中显示标记，而对于悬停的多边形则类似.

I have two seperate markerClusterGroups that occasionally overlap. Is there anyway to prevent this? In my actual code, I am using a custom Icon for one of the cluster groups so that I can tell the difference between the two cluster types. However, it wasn't neccessary for this example so I left that part out for the sake of simplicity.

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);
}

Here is an example of what I mean:

http://plnkr.co/edit/yqIhI7RMsp9A7I3AwGnY?p=preview

The requirement states that the markers in category 1 must cluster separately from markers in category 2. However both types must be displayed on the map at the same time.

解决方案

Is there anyway to prevent this?

Not with several Leaflet.markercluster groups as you did.

Think about it: where should the cluster icons positions be computed, when a given group has no data about another group?

You may have several possible workarounds and/or other libraries that may better fit your need, without having to re-write a clustering algorithm yourself.

For example, a popular alternative to show different categories while clustering is the PruneCluster plugin:

PruneCluster is a fast and realtime marker clustering library.

It's working with Leaflet as an alternative to Leaflet.markercluster.

_{Excerpt from PruneCluster home page}

Another possible workaround would be to merge all categories into the same Marker Cluster Group, but have the latter's cluster icon customized so that they render similarly as the above PruneCluster screenshot, or even render fake icons for each category:

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: '&copy; <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>

Then if you wish you can further customize the spiderfication so that it shows Markers only from the clicked category cluster icon, and similar for the hovering polygon.

这篇关于防止多个markerClusterGroup图标在Leaflet中重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！