Angular + Leaflet + Leaflet 额外标记

Question

我正在使用 Leaflet 制作基于 net.core 3 和 Angular 8 的 SPA 网站。我想使用 Leaflet Extra Markers，但无法使用。

我使用 NPM 安装 Extra Markers： https://www.npmjs.com/package/leaflet-extra-markers

npm i 传单额外标记

到目前为止一切顺利。我创建组件-map.component.ts，下面是代码。只要我使用 Leaflet，一切都会正常工作。但后来我尝试使用额外标记添加标记并获取

TypeError：无法读取未定义的属性“图标”。

我想我错过了一些超级简单但无法弄清楚的东西。看起来 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);
    }
}

编辑：我听从了建议，并在 angular.json 文件中添加了脚本和 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

根据documentation，您需要在 index.html 中分别包含 bootstrap 3.3.7 版和 font-awesome 5.12.0 版

 <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>

确保将这些包含在 ts 中或 angular.json 中的最后 2 个中：

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";

Demo

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"
],