带有Leaflet.markercluster的Leaflet.Deflate在悬停时不显示群集覆盖率

时间:2018-08-10 07:23:09

标签: 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/leaflet@1.3.3/dist/leaflet.css" rel="stylesheet" />
  <link href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" rel="stylesheet" />
  <link href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" rel="stylesheet" />

  <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
  <script src="https://unpkg.com/Leaflet.Deflate@1.0.0-alpha.2/dist/L.Deflate.js"></script>

</head>

<body>
  <div id="map"></div>
</body>

</html>

为什么不显示悬停时的群集覆盖率?

1 个答案:

答案 0 :(得分:1)

如果只有2个对象,则不会显示

coverage ...:|

添加第三个对象,例如:

var polyline2 = L.polyline([
  [51.535, -0.1],
  [51.525, -0.05],
], {
  color: 'green'
});
deflate_features.addLayer(polyline2);

启用集群覆盖:

enter image description here