javascript - 在 Angular 中使用 leaflet-arc？

Question

我如何使用 leaflet-arc plugin在 Angular ？到目前为止我尝试了什么:

1. npm install --save leaflet-arc
2. 添加 "scripts": ["node_modules/leaflet-arc/src/leaflet-arc.js"] 到angular.json.
3. 添加 import '../../../node_modules/leaflet-arc/src/leaflet-arc.js';到 my-component.component.ts。

然而，当我在 my-component.component.ts 中执行以下操作时，它仍然给我一个错误，即 Property 'Arc' does not exist on type 'typeof Polyline'.:

L.Polyline.Arc(...)

当我执行 ng serve 时，这确实有效，但在编译时仍然报错。

有什么想法吗？

Answer 1

要使其正常工作，您需要执行以下步骤:

1. npm i leaflet --save
2. npm install --save leaflet-arc

转到 angular.json 并添加两个库，如下所示:

 "styles": [
      "node_modules/leaflet/dist/leaflet.css",
      "src/styles.css"
  ],
  "scripts": [
      "node_modules/leaflet/dist/leaflet.js",
      "node_modules/leaflet-arc/src/leaflet-arc.js"
  ]

在app.component.ts中你需要导入两个库如下:

import { Component, OnInit } from '@angular/core';
import 'leaflet';
import 'leaflet-arc'; // import leaflet-arc here

declare let L;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
    ngOnInit() {
        const map = L.map('map').setView([60, 100], 3);
        // create an arc here
        L.Polyline.Arc([59.56667, 150.80000], [67.50000, 64.03333], {
            color: 'red',
            vertices: 200
        }).addTo(map);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    }
}

模板:

<div id="map"></div>

风格:

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

Demo