时间戳

首页 > 解决方案 > Markercluster spiderfy - 附近的坐标以单个 spiderfy 显示，而不是单独的标记

javascript - Markercluster spiderfy - 附近的坐标以单个 spiderfy 显示，而不是单独的标记

问题描述

我已经使用带有传单库的“Leaflet.markercluster”插件在我的地图中显示集群和蜘蛛。

但是在标记中应用纬度和经度坐标时，如果坐标在附近/非常接近，则两个坐标都显示在单个蜘蛛视图中。

实际上，我想将这些坐标显示为单独的标记。

在示例中，您可以在“标记”数组中看到，我使用了具有相同坐标的前两个对象，而第三个对象与前两个对象不同。但是所有三个标记都显示在单个 spiderfy 中。实际上，我希望前两个作为 spiderfy，第三个作为单独的标记。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>
</head>

<body>
  <h1>Leaflet Cluster Example</h1>

  <p>Here's an interactive map indicating where airports and train stations are located around the world. The data comes from <a href="http://openflights.org/data.html" target="_blank">OpenFlights.org</a>.

    <div id="map" style="width: 800px; height: 500px; border: 1px solid #AAA;"></div>

    <script type="text/javascript">
      var markers = [{
        "name": "Goroka",
        "city": "Goroka, Papua New Guinea",
        "iata_faa": "GKA",
        "icao": "AYGA",
        "lat": 38.98856,
        "lng": -77.32219,
        "alt": 5282,
        "tz": "Pacific/Port_Moresby"
      }, {
        "name": "Madang",
        "city": "Madang, Papua New Guinea",
        "iata_faa": "MAG",
        "icao": "AYMD",
        "lat": 38.98856,
        "lng": -77.32219,
        "alt": 20,
        "tz": "Pacific/Port_Moresby"
      }, {
        "name": "Mount Hagen",
        "city": "Mount Hagen, Papua New Guinea",
        "iata_faa": "HGU",
        "icao": "AYMH",
        "lat": 38.98852,
        "lng": -77.32183,
        "alt": 5388,
        "tz": "Pacific/Port_Moresby"
      }];

      var map = L.map('map', {
        center: [10.0, 5.0],
        minZoom: 2,
        maxZoom: 18,
        zoom: 2
      });

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

      var myIcon = L.icon({
        iconUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png',
        iconSize: [29, 24],
        iconAnchor: [9, 21],
        popupAnchor: [0, -14]
      });

      var markerClusters = L.markerClusterGroup();

      for (var i = 0; i < markers.length; ++i) {
        var popup = markers[i].name +
          '<br/>' + markers[i].city +
          '<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
          '<br/><b>ICAO:</b> ' + markers[i].icao +
          '<br/><b>Altitude:</b> ' + Math.round(markers[i].alt * 0.3048) + ' m' +
          '<br/><b>Timezone:</b> ' + markers[i].tz;

        var m = L.marker([markers[i].lat, markers[i].lng], {
            draggable: true,
            icon: myIcon
          })
          .bindPopup(popup);

        markerClusters.addLayer(m);

      }

      markerClusters.on("clusterclick", function(c) {
        var cluster = c.layer,
          bottomCluster = cluster;

        while (bottomCluster._childClusters.length === 1) {
          bottomCluster = bottomCluster._childClusters[0];
        }

        if (bottomCluster._zoom === markerClusters._maxZoom &&
          bottomCluster._childCount === cluster._childCount) {

          c.layer.zoomToBounds();
        }

      });

      map.addLayer(markerClusters);
    </script>
</body>

请问这个怎么解决？

标签： javascriptleafletleaflet.markercluster

解决方案

Leaflet.markercluster默认情况下会聚集小于 80 像素的标记（请参阅选项maxClusterRadius）。

因此，如果在最大地图缩放时，您的 3 个标记彼此之间的距离仍然在 80 像素以内，插件会将它们放在同一个集群中，并将所有 3 个标记在一起。

现在，如果您不希望这些标记以最大缩放聚集，除非它们完全位于同一位置，您会对Leaflet.markercluster #339感兴趣：

[...]在我看来，实际上您希望在缩放级别 15 及更高级别“不进行聚类”，但位于非常相同位置（纬度/经度）的标记除外。

您可以通过使用maxClusterRadius返回正常半径（默认为 80 像素）的函数来实现此功能，缩放级别为 0 到 14，缩放级别为 15 及更高级别时返回 1 个像素：

var mcg = L.markerClusterGroup({
    maxClusterRadius: function (zoom) {
        return (zoom <= 14) ? 80 : 1; // radius in pixels
    }
});

有了这个，对于缩放级别 15 和更高级别，插件仍然会聚集彼此相距 1 像素以内的标记。如果我没记错的话，不幸的是，使用 0 像素不起作用。但是1个像素的距离已经很小了，就好像标记在同一个位置一样。

例子：

var markers = [{
  "name": "Goroka",
  "city": "Goroka, Papua New Guinea",
  "iata_faa": "GKA",
  "icao": "AYGA",
  "lat": 38.98856,
  "lng": -77.32219,
  "alt": 5282,
  "tz": "Pacific/Port_Moresby"
}, {
  "name": "Madang",
  "city": "Madang, Papua New Guinea",
  "iata_faa": "MAG",
  "icao": "AYMD",
  "lat": 38.98856,
  "lng": -77.32219,
  "alt": 20,
  "tz": "Pacific/Port_Moresby"
}, {
  "name": "Mount Hagen",
  "city": "Mount Hagen, Papua New Guinea",
  "iata_faa": "HGU",
  "icao": "AYMH",
  "lat": 38.98852,
  "lng": -77.32183,
  "alt": 5388,
  "tz": "Pacific/Port_Moresby"
}];

var map = L.map('map', {
  center: [38, -77],
  minZoom: 2,
  maxZoom: 18,
  zoom: 2
});

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

var markerClusters = L.markerClusterGroup({
  // From https://github.com/Leaflet/Leaflet.markercluster/issues/339
  maxClusterRadius: function(zoom) {
    return (zoom <= 14) ? 80 : 1; // radius in pixels
  }
});

for (var i = 0; i < markers.length; ++i) {
  var popup = markers[i].name +
    '<br/>' + markers[i].city +
    '<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
    '<br/><b>ICAO:</b> ' + markers[i].icao +
    '<br/><b>Altitude:</b> ' + Math.round(markers[i].alt * 0.3048) + ' m' +
    '<br/><b>Timezone:</b> ' + markers[i].tz;

  var m = L.marker([markers[i].lat, markers[i].lng])
    .bindPopup(popup);

  markerClusters.addLayer(m);

}

map.addLayer(markerClusters);
html,
body,
#map {
  height: 100%;
  margin: 0;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>

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

推荐阅读