Leaflet.Deflate 与 Leaflet.markercluster 悬停时不显示集群覆盖范围

标签 leaflet leaflet.markercluster leaflet.deflate

当您将鼠标悬停在群集上时,Leaflet.markercluster 应显示其标记的边界。这是我正在使用的(简化的)代码:

map = new L.Map('map');

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 13,
    attribution: 'Map data &copy; <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);

启用集群覆盖:

enter image description here

关于Leaflet.Deflate 与 Leaflet.markercluster 悬停时不显示集群覆盖范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51781142/

相关文章:

javascript - 循环中的 Leaflet MarkerCluster bindPopup 仅使用最后一个值

leaflet - 错误类型错误 : Cannot read property '_leaflet_pos' of undefined

javascript - 未捕获的类型错误 : Cannot read property 'lat' of undefined Leaflet and VueJS

r - R : a legend for binary variables 的传单

javascript - 仅更新那些已更改的属性

javascript - Leaflet.markercluster:动画不起作用

javascript - 如何在传单 map 上添加和删除标记簇?