使用 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;
    }
   [...]

传单选项在

中定义

    <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

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

Single marker not visualized using ngx leaflet markercluster

leaflet

typescript

leaflet.markercluster

angular