如何将 leaflet tracksymbol 插件与 angular 集成？

Question

我正在使用带有 angular 的传单。我用 npm 安装了 leaflet 并将其导入到我的组件中：

import * as L from 'leaflet';

按预期工作。接下来我通过 npm

安装了 leaflet-tracksymbol plugin

npm install --save leaflet-tracksymbol

并将其导入到我的组件中：

import * as L from 'leaflet';
import 'leaflet-tracksymbol';

但是当我尝试创建一个轨道符号时：

L.trackSymbol([lat,lng], options);

我收到这个错误：

Property 'trackSymbol' does not exist on type 'typeof import("[...]node_modules/@types/leaflet/index")'.

我还尝试将 leaflet-tracksymbol.js 添加到 angular.json 脚本块，并尝试将其导入到我的组件中：

导入'../../../../node_modules/leaflet-tracksymbol/leaflet-tracksymbol.js';

三种导入方法似乎都有效，但 L 未扩展且 L.TrackSymbol 不可用。

我还尝试将 (L as any).trackSymbol... 作为对 SO 建议的答案，但也没有用。

我做错了什么？

Answer 1

适合我。您需要按照错误指示安装 @types/leaflet。

ngOnInit() {
    var map = L.map("map").setView([51.505, -0.09], 2);

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

    var latlng = L.latLng(20, 30);
    var speed = 10.0; // In m/s
    var course = (45.0 * Math.PI) / 180.0; // Radians from north
    var heading = (45.0 * Math.PI) / 180.0; // Radians from north

    var trackMarker = (L as any).trackSymbol(latlng, {
      trackId: 123,
      fill: true,
      fillColor: "#0000ff",
      fillOpacity: 1.0,
      stroke: true,
      color: "#000000",
      opacity: 1.0,
      weight: 1.0,
      speed: speed,
      course: course,
      heading: heading
    });

    trackMarker.addTo(map);
}

Demo

如何将 leaflet tracksymbol 插件与 angular 集成？

How to integrate leaflet tracksymbol plugin with angular?

angular

plugins

leaflet