Question

当我使用ngx角版本的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的已知捆绑包问题有关。在iconUrl变量中定义icon，它将解决此问题。

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小叶标记集群显示

1 个答案: