当您将鼠标悬停在群集上时,Leaflet.markercluster 应显示其标记的边界。这是我正在使用的(简化的)代码:
map = new L.Map('map');
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 13,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}
).addTo(map);
map.setView([51.505, -0.09], 11);
let deflate_features = L.deflate({
minSize: 40,
markerCluster: true
});
deflate_features.addTo(map);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]);
deflate_features.addLayer(polygon);
var polyline = L.polyline([
[51.52, -0.05],
[51.53, -0.10],
], {
color: 'red'
});
deflate_features.addLayer(polyline);
#map {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
<html>
<head>
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe3eaeee9e3eafbcfbea1bca1bc" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e121b1f18121b0a50131f0c151b0c1d120b0d0a1b0c3e4f504d504e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79151c181f151c0d5714180b121c0b1a150c0a0d1c0b3948574a5749" rel="noreferrer noopener nofollow">[email protected]</a>/dist/MarkerCluster.Default.css" rel="stylesheet" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741811151218110034455a475a47" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45292024232920316b2824372e20372629303631203705746b766b75" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="39755c585f555c4d177d5c5f55584d5c790817091709145855495158170b" rel="noreferrer noopener nofollow">[email protected]</a>/dist/L.Deflate.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
为什么悬停时不显示集群覆盖范围?
最佳答案
如果只有 2 个对象,则不会显示覆盖范围...:|
添加第三个对象,例如:
var polyline2 = L.polyline([
[51.535, -0.1],
[51.525, -0.05],
], {
color: 'green'
});
deflate_features.addLayer(polyline2);
启用集群覆盖:
关于Leaflet.Deflate 与 Leaflet.markercluster 悬停时不显示集群覆盖范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51781142/