Leaflet MarkerCluster - 如何检查集群是否会被蜘蛛化（即具有 maxZoom 级别）？

Question

我想实现自己的蜘蛛化形式（HTML 弹出窗口），所以我需要知道集群是否会被蜘蛛化（即具有 maxZoom 级别）。有一个spiderfied 事件，但它是在集群被蜘蛛化后触发的，这对我来说没用。

GIS 上有一个类似的问题，但答案对我不起作用： How to determine if a cluster is at its maxZoom level?

我正在检查集群单击后的事件对象，但我没有发现普通集群对象和“准备好被蜘蛛化”的集群对象之间有任何区别。

Answer 1

Leaflet.markercluster 插件中指示它是否应该进行蜘蛛化的逻辑在 MarkerClusterGroup 的 _zoomOrSpiderfy 内部方法中。

您可以根据需要轻松调整它：

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

mcg.on("clusterclick", function(event) {
  var cluster = event.layer,
    bottomCluster = cluster;

  while (bottomCluster._childClusters.length === 1) {
    bottomCluster = bottomCluster._childClusters[0];
  }

  if (bottomCluster._zoom === mcg._maxZoom &&
    bottomCluster._childCount === cluster._childCount) {

    // All child markers are contained in a single cluster from this._maxZoom to this cluster.
    console.log('cluster will spiderfy');
  }
});

// 2 markers in exact same position.
L.marker([48.85, 2.35]).addTo(mcg);
L.marker([48.85, 2.35]).addTo(mcg);

// 1 in slightly different position, so that at the immediate higher zoom level, the marker gets out of the cluster.
L.marker([48.858, 2.358]).addTo(mcg);

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

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

<div id="map" style="height: 180px;"></div>

但是，由于您想用自己的行为替换蜘蛛化，您必须设置选项 spiderfyOnMaxZoom: false，然后将 Leaflet.markercluster 行为更改为 zoomToBoundsOnClick 而不是正常的蜘蛛化，您可以也不想……

在这种情况下，一个“简单”的解决方案将改为覆盖 MarkerCluster.spiderfy() 和 unspiderfy() 方法：

var markersList = document.getElementById('markersList');

L.MarkerCluster.include({
  spiderfy: function() {
    var childMarkers = this.getAllChildMarkers();
    this._group._unspiderfy();
    this._group._spiderfied = this;

    // Fill the markersList.
    markersList.innerHTML = childMarkers
      .map((marker, index) => `<li>Marker ${index + 1}: ${marker.getLatLng()}</li>`)
      .join('');
    // Show the modal.
    modal.classList.add("show-modal");
  },

  unspiderfy: function() {
    this._group._spiderfied = null;
    // Hide the modal.
    modal.classList.remove("show-modal");
  }
});

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

///////////////////////////////////////////////////////////
// https://sabe.io/tutorials/how-to-create-modal-popup-box
// MIT License https://sabe.io/terms#Licensing
var modal = document.querySelector(".modal");
var closeButton = document.querySelector(".close-button");

function closeModal() {
  // Use the unspiderfy method so that internal state is updated.
  mcg.unspiderfy();
}

function windowOnClick(event) {
  if (event.target === modal) {
    closeModal();
  }
}

closeButton.addEventListener("click", closeModal);
window.addEventListener("click", windowOnClick);
///////////////////////////////////////////////////////////

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

// 2 markers in exact same position.
L.marker([48.85, 2.35]).addTo(mcg);
L.marker([48.85, 2.35]).addTo(mcg);

// 1 in slightly different position, so that at the immediate higher zoom level, the marker gets out of the cluster.
L.marker([48.858, 2.358]).addTo(mcg);

/* https://sabe.io/tutorials/how-to-create-modal-popup-box */

.modal {
  z-index: 1000;
  /* Make sure your modal renders above the Leaflet map. */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}

.close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

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

<div id="map" style="height: 180px;"></div>

<div class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <ul id="markersList"></ul>
  </div>
</div>