Кластеры маркеров листовки - угловые 6 (значок кластера) - PullRequest
Новая
       15

Кластеры маркеров листовки - угловые 6 (значок кластера)

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

Я пытаюсь реализовать кластеры маркеров в Angular 6. Маркеры работают нормально. Но иконки не устанавливаются. Пожалуйста, смотрите скриншот ниже. (https://i.stack.imgur.com/aQoau.jpg).

HTML код: 

<div leaflet style="height: 400px;" 
     [leafletOptions]="Options" 
     [leafletMarkerCluster]="markerClusterData" 
     [leafletMarkerClusterOptions]="markerClusterOptions" 
     (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

Код: 

this.options = {
  layers: [
    tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
      minZoom: 7,
      maxZoom: 15,
      noWrap: true,
      attribution: 'Data: CSO.ie | Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    })],
  center: latLng(53.408, -9.128),
  zoom: 8.5
};

markerClusterGroup = L.markerClusterGroup({
});
markerClusterData: any[] = [];
markerClusterOptions: L.MarkerClusterGroupOptions;

markerClusterReady(group: L.MarkerClusterGroup) {

this.markerClusterGroup = group;
}

generateData() {
var addressPoints = [
  [53.537213887794579, -8.741433234420502],
  [53.531359980587304, -8.88873038570684],
  [53.536246630737267, -9.044410275854199],
  [53.388830603160024, -8.709717367294882],
  [53.536246630737267, -9.044410275854199],
  [53.387531019889508, -8.711018149247034],
  [53.537761167135095, -8.664822693474337],
  [53.456925611851041, -9.000062798412451],
];
  const data: any[] = [];
  for (let i = 0; i < addressPoints.length; i++) {

        const icon = L.icon({
            iconUrl: 'assets/marker-icon.png',
    shadowUrl: 'assets/marker-shadow.png'
        });

        data.push(L.marker([ addressPoints[i][0], addressPoints[i][1] ],{icon:icon}));
    }

    this.markerClusterData = data;

}

Я пытался с IconCreateFunction, но не смог получить ожидаемые результаты. Пожалуйста, дайте мне знать, если я что-то упустил. Заранее спасибо.

Ожидаемые результаты:

image

Текущие результаты:

image

Примечание. Я хочу ожидаемых результатов в Angular 6.

1 Ответ

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

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

В вашем angular.json определите: 

..
"styles": [
          "node_modules/leaflet/dist/leaflet.css",
          "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
          "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
          "src/styles.css"
],
...

Не забудьте перезапустить приложение после импорта стилей (остановите сервер и нажмите ng serve)

Демо

...