使用多个标记聚类组显示重叠聚类 [英] Using several Marker Cluster Groups displays overlapping Clusters

问题描述

我正在使用几个 L.markerClusterGroup({})，以便我可以在图层控件中切换它们.

I am using several L.markerClusterGroup({})'s so that I can switch them in a Layers Control.

但集群相互隐藏.

我希望能够获得两个集群的总数.

I would like to be able to get the total number of both Clusters.

我错过了什么?

推荐答案

问题是每个 Leaflet Marker Cluster Group(即L.markerClusterGroup)将执行它自己的聚类并渲染Cluster，而不管其他Cluster Group可能显示什么.因此，如果您有一些单独的标记(或任何点特征)在不同的集群组中但彼此靠近，这些组将显示也彼此靠近的集群，这可能最终会重叠，尤其是在低缩放级别时，就像在您的屏幕截图中.

The issue is that each Leaflet Marker Cluster Group (i.e. L.markerClusterGroup) will perform its own clustering and render Clusters irrespective of what other Cluster Groups may display. Therefore if you have some individual Markers (or any point Features) that are in different Cluster Groups but close to each other, these Groups will display Clusters also close to each other, which may end up overlapping, especially at low zoom level, exactly like in your screenshot.

如果您希望您的标记全部聚集在一起(混合橙子和苹果")，您应该使用单个标记群集组.

If you want your Markers to cluster all together (mixing "oranges with apples"), you should use a single Marker Cluster Group.

现在，如果我理解正确，您的困难"是您希望能够动态添加和删除标记，即在您的情况下，用户可以使用 Layers Control 打开/关闭地图上的某些功能.

Now if I understand correctly, your "difficulty" is that you would like to be able to add and remove the Markers dynamically, i.e. in your case the user can use a Layers Control to switch on/off some Features on map.

在这种情况下，您可能会对 Leaflet.FeatureGroup.SubGroup 插件感兴趣(参见演示).只需为每个可切换"功能组创建 1 个子组并将其父组设置为您的单个标记集群组:

In that case, you would probably be interested in Leaflet.FeatureGroup.SubGroup plugin (see demo). Simply create 1 subgroup per "switchable" Features Group and set their parent as your single Marker Cluster Group:

var map = L.map('map', {
  maxZoom: 18,
}).setView([48.86, 2.35], 11);

var parentGroup = L.markerClusterGroup().addTo(map);

var overlays = {};

for (var i = 1; i <= 5; i += 1) {
  overlays['Group ' + i] = L.featureGroup.subGroup(
    parentGroup,
    getArrayOfMarkers()
  ).addTo(map);
}

L.control.layers(null, overlays, {
  collapsed: false,
}).addTo(map);

function getArrayOfMarkers() {
  var result = [];
  for (var i = 0; i < 10; i += 1) {
    result.push(L.marker(getRandomLatLng()));
  }
  return result;
}

function getRandomLatLng() {
  return [
    48.8 + 0.1 * Math.random(),
    2.25 + 0.2 * Math.random()
  ];
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" 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>

<!-- Leaflet.FeatureGroup.SubGroup assets -->
<script src="https://unpkg.com/leaflet.featuregroup.subgroup@1.0.2/dist/leaflet.featuregroup.subgroup.js"></script>

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

另请参阅使用markercluster对多个层进行聚类

注意:对于更复杂的用例，还有另一个插件 Leaflet.MarkerCluster.LayerSupport.

Note: for more complex use cases, there is also another plugin Leaflet.MarkerCluster.LayerSupport.

另请参阅如何使用层应用传单标记集群

披露:我是这些插件的作者.

Disclosure: I am the author of these plugins.

这篇关于使用多个标记聚类组显示重叠聚类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！