如何在 Angular 上实现 leaflet-moving-marker 的 movingMarker？

Question

我正在尝试实现 leaflet-moving-marker 的 moving maker，但出现了一些错误。

import {movingMarker} from 'leaflet-moving-marker'

    var myMovingMarker = L.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]],
      [20000]).addTo(this.map);

myMovingMarker.start();

我已经按照下面的方式实现了，它说 movingMarker 在导入类型上不存在 .../@types/leaflet/index.

Answer 1

您可以使用 leaflet.animatedmarker。它与您尝试使用的库相似，并且与最新的传单版本兼容。

安装插件：

npm i leaflet.animatedmarker

导入插件：

import "leaflet.animatedmarker/src/AnimatedMarker";

当组件安装时创建并保存插件实例：

...
animatedMarker;

ngOnInit() {
   ...

    const line = L.polyline(
      [
        [40.6851, -73.94136],
        [40.68576, -73.94149],
        [40.68649, -73.94165]
      ],
      {
        color: "#02929b",
        weight: 1.5
      }
    ).addTo(map);

    this.animatedMarker = L.animatedMarker(line.getLatLngs(), {
      autoStart: false,
      icon
    });

    map.addLayer(this.animatedMarker);

    const group = new L.featureGroup([this.animatedMarker]);

    map.fitBounds(group.getBounds());
}

 

startAnimation() {
   this.animatedMarker.start();
}

按下按钮开始动画：

<button (click)="startAnimation()">Start animation</button>

Demo

如何在 Angular 上实现 leaflet-moving-marker 的 movingMarker？

How to implement movingMarker of leaflet-moving-marker on Angular?

markers

leaflet

typescript

angular