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

时间：2018-11-28 13:45:31

标签： javascript leaflet leaflet.markercluster

我已将'Leaflet.markercluster'插件与传单库一起使用，以在地图上显示集群和Spiderfy。

但是在标记中应用纬度和经度坐标时，如果坐标在附近/非常近，则两个坐标都显示在单个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>

请如何解决？

1 个答案:

答案 0 :(得分：0)

默认情况下，

Leaflet.markercluster会将小于80像素的标记聚类（请参阅选项maxClusterRadius）。

因此，如果在最大地图缩放下，您的3个标记彼此之间仍在80像素之内，则该插件会将它们放置在同一群集中，并将所有3个标记蜘蛛化在一起。

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

  

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

     

您可以通过使用maxClusterRadius函数来实现此功能，该函数对于0到14的缩放级别返回正常半径（默认为80像素），对于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>

相关问题
最新问题