在 Angular 中使用 leaflet-arc？

Question

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

npm install --save leaflet-arc
添加"scripts": ["node_modules/leaflet-arc/src/leaflet-arc.js"]到 angular.json.
添加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

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

npm i leaflet --save
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

在 Angular 中使用 leaflet-arc？

Use leaflet-arc in Angular?

javascript

leaflet

angular

ngx-leaflet