Leaflet js обрабатывает множество маркеров в одной координате

Я использую кластеризацию маркеров leafletjs и leafletjs, чтобы показать, где живут мои друзья. Проблема в том, что некоторые из них живут в одном доме, поэтому координаты нескольких маркеров совпадают. Проблема возникает, когда в одном месте проживает более 50 друзей.

Есть ли способ скрыть маркеры, и при щелчке по кластеру будет отображаться таблица, содержащая все имена?

Мой код для добавления маркеров:

export function markersFromData(map, markers) {
  return (data) => {
    const markerList = [];
    data.map((v) => {
      const title = v.name;
      const marker = L.marker(new L.LatLng(v.latitude, v.longitude), {
        opacity: 0,
      });
      marker.bindPopup(title);
      markerList.push(marker);
      return markers.addLayer(marker);
    });
    map.addLayer(markers);
    // eslint-disable-next-line
    const group = new L.featureGroup(markerList);
    map.fitBounds(group.getBounds());
  };
}

Пример карты

введите здесь описание изображения

Спасибо за ваше время.


person August    schedule 24.07.2017    source источник


Ответы (1)


Чистым решением было бы вместо создания одного маркера для каждого элемента данных (например, друга) сначала сгруппировать их по совпадающей позиции.

Затем создайте 1 маркер для каждой позиции с метаданными, отражающими количество элементов в этой позиции и список связанных имен.

Затем в кластерной группе Leaflet Marker используйте iconCreateFunction, чтобы настроить отображаемое число, чтобы суммировать это количество друзей вместо количества дочерних маркеров.

person ghybs    schedule 24.07.2017
comment
Эй, спасибо за ваш ответ. У меня уже есть способ сделать это здесь: gis.stackexchange.com/questions/152102/ - person August; 25.07.2017