javascript - Leaflet MarkerCluster - 如何检查集群是否将被蜘蛛化(即具有 maxZoom 级别)？

Question

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

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

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

Answer 1

Leaflet.markercluster 插件中决定是否应该 Spiderfy 的逻辑位于 _zoomOrSpiderfy 内。 MarkerClusterGroup的内部方法。

您可以轻松地根据您的需要进行调整:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7dbd2d6d1dbd2c3f78699849986" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1bdb4b0b7bdb4a591e0ffe2ffe0" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb878e8a8d878e9fc5868a99808e9988879e989f8e99abdac5d8c5db" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ff3fafef9f3faebb1f2feedf4faedfcf3eaecebfaeddfaeb1acb1af" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6cac3c7c0cac3d288cbc7d4cdc3d4c5cad3d5d2c3d4e69788958896" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.markercluster-src.js"></script>

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

但是，由于您想用自己的行为替换 Spiderfication，因此必须设置选项 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09656c686f656c7d4938273a2738" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b9b0b4b3b9b0a195e4fbe6fbe4" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aca5a1a6aca5b4eeada1b2aba5b2a3acb5b3b4a5b280f1eef3eef0" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d9d0d4d3d9d0c19bd8d4c7ded0c7d6d9c0c6c1d0c7f5849b869b85" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04686165626861702a6965766f61766768717770617644352a372a34" rel="noreferrer noopener nofollow">[email protected]</a>/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>