如何将leaflet跟踪符号插件与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 .js添加到angular.json脚本块中，并尝试使用以下命令将其导入到我的组件中：

导入‘../node_modules/leaflet-tracksymbol/leaflet-tracksymbol.js’；

这三种导入方法似乎都是wrok的，但L不是扩展的，L.TrackSymbol也不可用。

我也试着在SO suggested上使用(L as any).trackSymbol...作为答案，但这也没有用。

我做错了什么？

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