我想实现自己的spiderfying形式（HTML弹出窗口），所以我需要知道群集是否会被蜘蛛侠（即具有maxZoom级别）。有一个spiderfied事件，但是在群集被蜘蛛攻击后会被触发，这对我来说是无用的。
地理信息系统上有一个类似的问题，但答案对我不起作用： How to determine if a cluster is at its maxZoom level?
群集点击后我正在检查事件对象，但我发现正常和＆＃34;准备好蜘蛛侠之间没有任何区别。集群对象。
答案 0 :(得分：1)
Leaflet.markercluster插件中的逻辑指示它是否应该是spiderfy，它位于MarkerClusterGroup的_zoomOrSpiderfy内部方法中。
您可以根据需要轻松调整它：
var map = L.map("map");
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <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而不是正常的蜘蛛侠化，你可能也不想要......
在这种情况下，＆＃34;简单＆＃34;解决方案是覆盖 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: '© <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">×</span>
<ul id="markersList"></ul>
</div>
</div>