javascript - 在 Angular 中使用传单弧？

Question

如何在 Angular 中使用Leaflet-arc 插件？到目前为止我已经尝试过：

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

演示