Одиночный маркер не визуализируется с помощью маркера ncx - PullRequest
Новая
       18

Одиночный маркер не визуализируется с помощью маркера ncx

0 голосов
/ 08 июля 2019

Когда я увеличиваю кластер на карте, используя угловую версию листовки-маркера, я не могу визуализировать один маркер.

Другой результат может быть получен с использованием чистого 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

Как разрешить визуализацию с одним маркером?

1 Ответ

2 голосов
/ 08 июля 2019

Это связано с известной проблемой связки с веб-пакетом.Определите 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

...