将 Leafletjs AnimatedMarker 集成到打字稿中

Question

I installed leaflet typescript, and I found that there are problems when using leaflet non-typescript plugins.

For example, when using a plugin with typescript installed, I can successfully import this plugin:

install:

npm install --save leaflet-routing-machine
npm install --save @types/leaflet-routing-machine

angular component:

import 'leaflet-routing-machine';
import { Routing } from 'leaflet';

In this way, I can successfully use the plugin leaflet-routing-machine attached to the leaflet.

But when I use the AnimatedMarker plugin, it doesn't have typescript, so I don't know how to use it.

I have tried the following methods but failed:

import 'leaflet.animatedmarker/src/AnimatedMarker';
import { AnimatedMarker, animatedMarker } from 'leaflet';
// Compilation will fail

or

 let AnimatedMarker = require('leaflet.animatedmarker/src/AnimatedMarker');
 console.log(AnimatedMarker);

or

import * as AnimatedMarker from 'leaflet.animatedmarker/src/AnimatedMarker';
   console.log(AnimatedMarker);

I wish to avoid using like: import * as L from 'leaflet' L.AnimatedMarker ; Although this method can successfully use non-typescript plugins.

Answer 1

That plugin just seems to be a script to extend some L.* objects, like L.Marker.

Putting import 'leaflet.animatedmarker/src/AnimatedMarker'; in the main.ts file should do the trick.

Like in thisstackblitz example