Как центрировать маркер в кластере листовок пауков? - PullRequest
Новая
       13

Как центрировать маркер в кластере листовок пауков?

0 голосов
/ 18 декабря 2018

Map

Значок отображается в нижней части синего цвета.Как я могу выровнять его по центру?Это не просто форма для управления им с помощью CSS.У меня много фигур, и каждая выглядит по-разному.

Кластер создается с использованием следующего кода: 

this.stationMarkers = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    const icons = [], temps = [];
    const markers = cluster.getAllChildMarkers();

    for (let i = 0; i < markers.length; i++) {
      if (markers[i]['Tavg']) temps.push((markers[i]['Tavg']));
      if (markers[i]['Icon']) icons.push((markers[i]['Icon']));
    }

    return L.divIcon({
      html: `<img src=\'./assets/images/icons-png/${icons.length > 0 ? math.mode(icons)[0] : ''}.png\'
              width="50px"/>
             <span>${(math.sum(temps) / temps.length).toFixed(1) + '°C'}</span>`,
    });
  },
});

И создаются значки: 

for (const d of this.data) {
  const icon = new L.DivIcon({
    html: `<img src='./assets/images/icons-png/${d.icon}.png' width="50px"/>
              <span>${d.Temp + '°C'}</span>`,
  });

  const marker = L.marker([d.Latitude, d.Longitude], {icon});
  marker['Tavg'] = d.Temp;
  marker['Icon'] = d.icon;

  this.stationMarkers.addLayer(marker);

  latitudes.push(d.Latitude);
  longitudes.push(d.Longitude);
}

Пакет:https://github.com/Leaflet/Leaflet.markercluster

Пример: https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld-maxzoom.388.html

1 Ответ

0 голосов
/ 18 декабря 2018

Добавление iconAnchor: [25, 25] исправлено. 

return L.divIcon({
  html: `<img src=\'./assets/images/icons-png/${icons.length > 0 ? math.mode(icons)[0] : ''}.png\'
          width="50px"/>
         <span>${(math.sum(temps) / temps.length).toFixed(1) + '°C'}</span>`,
  iconAnchor: [25, 25],
});

Это не всегда в центре, но, по крайней мере, выглядит лучше, чем у меня было раньше.

Идеальным решением было бы как @kboul предложил получить центр многоугольника и разместить там значок, но не уверен, как это сделать, поскольку кластер маркеров листовок создает многоугольники.

...