Leaflet MarkerCluster：是否可以打开多个群集组？

Question

我最近开始使用传单。我找到了很棒的插件宣传页markercluster。我目前正在尝试同时打开多个群集组。不幸的是，我在Google上找不到任何东西。

我有几个群集组，并绘制从一个标记到另一个标记的连接。用户应该能够打开绘制线所在的两个群集组：

因此，我的问题是：是否有必须打开的功能，或者根本没有同时打开多个组？

Answer 1

欢迎您！

不幸的是，Leaflet.markercluster插件中的蜘蛛化管理当前假设可以一次蜘蛛化一个集群。

另请参见danzel's comment in Leaflet.markercluster issue #744（在特定视图上蜘蛛刺所有群集）：

  

Leaflet.MarkerCluster目前仅支持对一个集群进行蜘蛛网化，因此这需要一些工作来支持。

Answer 2

如果给出用例，可能会得到更好的答案...

但是，可以肯定地说，没有可以一键打开多个组的功能。

从可用性的角度来看，这没有多大意义，因为MarkerCluster的基本行为是单击一个图标来放大并扩展您感兴趣的组。

Answer 3

从https://github.com/Leaflet/Leaflet.markercluster#other-clusters-methods引用：

  

  
• spiderfy ：蜘蛛化该类的子标记
  
• unspiderfy ：取消对群集的蜘蛛（spiderfy的对面）
  

因此，一旦您引用了要同时“打开”（蜘蛛化）的集群，只需调用其.spiderify()方法。

例如如果所需的聚类在变量cluster1和cluster2中：

cluster1.spiderify();
cluster2.spiderify();

另请参阅https://github.com/Leaflet/Leaflet.markercluster#getting-the-visible-parent-of-a-marker和https://github.com/Leaflet/Leaflet.markercluster#clusters-methods有关如何获取对群集的引用。

Answer 4

据我所知，您可以保持打开多个群集，但每个组只能打开一个。我的猜测是您的所有标记都属于一个组。在这种情况下，您将无法保持打开多个群集。

您可以选择一种悬停方法，如果将鼠标悬停在该方法上，则会打开该群集。

const mymap = L.map('mapid').setView([48.550, 8.207], 6);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  id: 'mapbox.streets'
}).addTo(mymap);

const markers = L.markerClusterGroup({zoomToBoundsOnClick: false});
[[47.5617, 7.5504], [47.5255, 7.6163], [47.5691, 7.6355],
 [49.4922, 8.3922], [49.5306, 8.5172], [49.4547, 8.5062]]
  .map(latLng => L.marker(latLng))
  .forEach(marker => markers.addLayer(marker));
mymap.addLayer(markers);

markers.on("clustermouseover", a => a.layer.spiderfy());
markers.on("clustermouseout", a => a.layer.unspiderfy());

html, body, #mapid { margin: auto; height: 100%; }

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>

<div id="mapid"></div>

Answer 5

好的，我现在已经对其进行了一些实验;）

在leaflet.markercluster-src.js中，我创建了一个名为_spiderMan[]的数组，其中填充了函数Spiderfy中单击的对象。

spiderfy: function() {
  if (this._group._spiderfied === this || this._group._inZoomAnimation) {
    return;
  }

  var childMarkers = this.getAllChildMarkers(null, true),
    group = this._group,
    map = group._map,
    center = map.latLngToLayerPoint(this._latlng),
    positions;

  // this._group._unspiderfy();  //deactivated
  var markers = markers + childMarkers;
  _spiderMan.push(this);  //new          

  if (childMarkers.length >= this._circleSpiralSwitchover) {
    positions = this._generatePointsSpiral(childMarkers.length, center);
  } else {
    center.y += 10; 
    positions = this._generatePointsCircle(childMarkers.length, center);
  }

  this._animationSpiderfy(childMarkers, positions);
},

然后，我创建了一个for循环，该循环遍历数组，每次都调用_spiderMan[i].unspiderfy(zoomDetails)。我将此循环内置到函数_unspiderfyZoomAnim中进行测试。意味着每次放大或缩小时，所有打开的组都会被汇总。

_unspiderfyZoomAnim: function(zoomDetails) {
  if (L.DomUtil.hasClass(this._map._mapPane, 'leaflet-touching')) {
    return;
  }
  this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
  var i;
  for (i = 0; i < _spiderMan.length; i++) {
    _spiderMan[i].unspiderfy(zoomDetails);
  }
  _spiderMan = [];
},

此外，必须在unspiderfy函数中停用以下行：

unspiderfy: function(zoomDetails) {
  /// <param Name="zoomDetails">Argument from zoomanim if being called in a zoom animation or null otherwise</param>
  // if (this._group._inZoomAnimation) {
  //    return;             
  // }
  this._animationUnspiderfy(zoomDetails);

  // this._group._spiderfied = null;        
},

因此，现在可以打开和关闭多个群集组，但这只是一种解决方法，我认为由于注释掉或删除了代码行，这将在某些地方产生不良影响。

我认为在JS方面有更多经验的人，并且此插件应该找到一个更好，更舒适的解决方案;）。