Angular + Leaflet + Leaflet Дополнительные маркеры

Question

Я создаю SPA-сайт на основе net .core 3 и Angular 8 с Leaflet. Я хотел использовать дополнительные маркеры Leaflet, но не смог заставить эту вещь работать.

Я использовал NPM для установки дополнительных маркеров: https://www.npmjs.com/package/leaflet-extra-markers

npm я листовка-экстра-маркеры

Пока все хорошо. Я создаю компонент - map.component.ts и ниже код. Пока я пользуюсь Leaflet, все работает нормально. Но затем я пытаюсь добавить маркер, используя Extra Markers и получая

TypeError: Невозможно прочитать свойство 'icon' из undefined.

Я предполагаю, что упускаю что-то очень простое но не могу понять это. Похоже, Extramarkers не расширяет класс Leaflet? Я не знаю, почему ...

Любая помощь будет высоко ценится.

import { AfterViewInit, Component } from '@angular/core';
import * as L from 'leaflet';
import { IMapObject } from '../models/map.model';

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
    private map;
    private mapObjects: IMapObject[] = [];

    constructor() { }

    ngAfterViewInit(): void {
        this.initMap();
    }

    private initMap(): void {
        this.map = L.map('map',
            {
                center: [52.246215, 21.223158],
                zoom: 18
            });

        const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            });

        tiles.addTo(this.map);

        this.createDummyMapObjects();

        this.mapObjects.map(o => {
            L.marker(o.position.latlon, { title: o.name, icon: greenIcon }).addTo(this.map).bindPopup(o.description);
        });

        // This is not working. Getting ERROR TypeError: Cannot read property 'icon' of undefined
        const redMarker = L.ExtraMarkers.icon({
            icon: 'fa-coffee',
            markerColor: 'red',
            shape: 'square',
            prefix: 'fa'
        });

        L.marker([51.941196, 4.512291], { icon: redMarker }).addTo(this.map);
    }

    private createDummyMapObjects(): void {

        const obj1: IMapObject = {
            id: 1,
            name: 'Test',
            category: 2,
            description: 'Test',
            position: {
                latlon: new Array(52.241103, 21.190475)
            }
        }

        const obj2: IMapObject = {
            id: 1,
            name: 'Test',
            category: 2,
            description: 'Test',
            position: {
                latlon: new Array(52.243149, 21.190883)
            }
        }

        this.mapObjects.push(obj1, obj2);
    }
}

РЕДАКТИРОВАТЬ: Я следовал советам и добавил сценарий и json путь к angular. json файл. Теперь я получаю:

Uncaught ReferenceError: L is not defined
    at leaflet.extra-markers.js:16
    at leaflet.extra-markers.js:13
    at leaflet.extra-markers.js:14

Похоже, проблема с импортом?

Answer 1

В соответствии с документацией вам необходимо включить в свой индекс bootstrap версию 3.3.7 и версию 5.12.0 соответственно соответственно. html

 <link
  rel="stylesheet"
  href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>

<!-- Font Awesome 5 SVG -->
<script
  defer
  src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"
></script>

Make убедитесь, что вы включили их в свой TS или последние 2 в angular. json:

import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
import "leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css";
import "leaflet-extra-markers/dist/js/leaflet.extra-markers.js";

Демо

Answer 2

Вы включили таблицу стилей и скрипт в angular json?

"scripts": [
  "node_modules\leaflet-extra-markers\dist\js\leaflet.extra-markers.js"
],
styles": [
  "styles.css",
  "node_modules\leaflet-extra-markers\dist\css\leaflet.extra-markers.min.css"
],