传单标记簇 - Angular 6（簇图标）

Question

我正在尝试在 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，但无法获得预期的结果。如果我遗漏了什么，请告诉我。先感谢您。

预期结果：

当前结果：

注意：我想要 Angular 6.

中的预期结果

Answer 1

您缺少的是从本机 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）

Demo

传单标记簇 - Angular 6（簇图标）

Leaflet Marker Clusters - Angular 6 (Cluster Icon)

leaflet

typescript

leaflet.markercluster

angular

angular6