单个标记未使用ngx leaflet markercluster可视化

Question

当我在地图上放大一个集群，使用ngx angular版本的leaflet-markercluster时，我不能可视化单个标记。

使用以上模块的纯javascript和js版本可以得到不同的结果。

map.component的代码如下：

import { Component, OnInit, Input } from '@angular/core';

import * as L from 'leaflet';
import 'leaflet.markercluster';

@Component({
    selector: 'map',
    templateUrl: './map.component.html'
})
export class MapComponent implements OnInit {

  @Input() coords:number[][];
    options = {
        zoom: 5,
    maxZoom : 18,
        center: L.latLng([ 41.5, 12.5 ]),

   layers: [L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {})],


    };

    // Marker cluster stuff
  markerClusterGroup: L.MarkerClusterGroup;
    markerClusterData: L.Marker[] = [];
    markerClusterOptions: L.MarkerClusterGroupOptions;


    ngOnInit() {

        this.markerClusterData = this.generateMarker(this.coords);
    }

    markerClusterReady(group: L.MarkerClusterGroup) {
        this.markerClusterGroup = group;
    }
   [...]

Leaflet选项在中定义

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

您可以可视化整个代码并在stackblitz上运行

如何解决单标记可视化问题？

Answer 1

这与众所周知的与webpack的捆绑问题有关。在icon变量中定义iconUrl，它应该可以解决这个问题。

const icon = L.icon({
    iconSize: [25, 41],
    iconAnchor: [10, 41],
    popupAnchor: [2, -40],
    // specify the path here
    iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
    shadowUrl:
      "https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png"
});

我只想提个建议，把iconUrl放在for循环之外。因为您只需要声明变量一次。

Demo