Leaflet MarkerCluster: можно ли открыть несколько групп кластеров? - PullRequest
1 голос
/ 11 июня 2019

Я недавно начал работать с листовкой.Я нашел отличный плагин листовка markercluster.В настоящее время я пытаюсь открыть несколько кластерных групп одновременно.К сожалению, я ничего не могу найти в Google.

У меня есть несколько групп кластеров и я рисую связи от одного маркера к другому.Пользователь должен иметь возможность открыть обе группы кластеров, к которым обращается нарисованная линия:

My example

Поэтому мой вопрос: есть ли для этого функция, которую я должен включить илиоткрытие нескольких групп одновременно не предусмотрено вообще?

Ответы [ 5 ]

1 голос
/ 11 июня 2019

Добро пожаловать в SO!

К сожалению, управление паутинкой в ​​плагине Leaflet.markercluster в настоящее время предполагает, что один кластер может быть пауком за один раз.

См. Также комментарий Данзела в Leaflet.markercluster проблема # 744 (Spiderfy всех кластеров в определенном представлении):

Leaflet.MarkerCluster поддерживает только один кластер spiderfied в настоящее время, так что это потребует немного работы для поддержки.

0 голосов
/ 13 июня 2019

Хорошо, теперь я немного поэкспериментировал с этим;)

В 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 и этим плагином должен найти лучшее и более удобное решение;).

0 голосов
/ 11 июня 2019

Насколько я могу сказать, вы можете оставить открытыми несколько кластеров, но только один для каждой группы.Я предполагаю, что все ваши маркеры принадлежат одной группе.В этом случае вы не можете держать открытыми несколько кластеров.

Вы можете выбрать парящий подход, который открывает кластер, если вы наводите курсор на него.

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>
0 голосов
/ 11 июня 2019

Цитирование из https://github.com/Leaflet/Leaflet.markercluster#other-clusters-methods:

  • spiderfy : Spiderfies дочерние маркеры этого кластера
  • unspiderfy : Расщепление кластера (противоположность spiderfy)

Поэтому, если у вас есть ссылки на кластеры, которые вы хотите «открыть» (spiderify) одновременно, просто вызовите их метод .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 о том, как получить ссылки на кластеры.

0 голосов
/ 11 июня 2019

Может быть, вы получите лучший ответ, если дадите вариант использования ...

Однако можно с уверенностью сказать, что нет функции, которую можно включить, чтобы открыть несколько групп одним щелчком мыши.

С точки зрения удобства использования, это не имеет особого смысла, так как основное поведение MarkerCluster заключается в нажатии на одну иконку для увеличения и расширения интересующей вас группы.

...