Markercluster spiderfy - Ближайшие координаты отображаются в виде одного паука вместо отдельного маркера. - PullRequest
Новая
       8

Markercluster spiderfy - Ближайшие координаты отображаются в виде одного паука вместо отдельного маркера.

0 голосов
/ 28 ноября 2018

Я использовал плагин 'Leaflet.markercluster' с библиотекой листовок для отображения кластера и 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 голосов
/ 29 ноября 2018

Leaflet.markercluster по умолчанию кластеры Маркеры, которые находятся ближе 80 пикселей (см. Параметр maxClusterRadius).

Поэтому, если при максимальном увеличении карты, ваш3 маркера по-прежнему находятся в пределах 80 пикселей друг от друга, плагин поместит их в один кластер и объединит все 3 из них вместе.

Теперь, если вы не хотите кластеризовать эти маркеры с максимальным увеличением, если они неточно в той же позиции вас заинтересует Leaflet.markercluster # 339 :

[...] мне кажется, что на самом деле вы хотите "не кластеризоваться"на уровне масштабирования 15 и выше, ЗА ИСКЛЮЧЕНИЕМ маркеров, которые находятся в ОЧЕНЬ ЖЕ позиции (широта / долгота).

Эту функцию можно использовать, используя функцию maxClusterRadius, которая возвращает нормальный радиус (по умолчанию 80 пикселей)для уровней масштабирования от 0 до 14 и 1 пиксель для уровня 15 и выше: 

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>
...