angular - Leaflet-kart: Roteret markør for ionic2 (Typescript)

Jeg er en TypeScript «nybegynner», og jobber for øyeblikket på et Ionic2-prosjekt (TypeScript) som bruker Leaflet v1.1.0 som et kart. Jeg trenger å rotere en markør. I tidligere prosjekter (JavaScript) brukte jeg Leaflet.RotatedMarker. Men dette pluginet er ikke typet og kan ikke brukes i mitt nåværende prosjekt.

Jeg trenger hjelp enten med å finne en måte å bruke Leaflet Rotated Marker-pluginen på, eller med å lage markørrotasjonsatferden direkte i koden min.

Svar #1

Siden noen måneder tilbys TypeScript-typede definisjoner for Leaflet.RotatedMarker her: https://github.com/DefinitelyTyped/DefinitelyTyped/commits/master/types/leaflet-rotatedmarker

Du må installere dem @types/leaflet-rotatedmarker i tillegg til leaflet-rotatedmarker

Hvis du bruker npm, trenger du bare å installere begge pakkene:

npm i -S @types/leaflet-rotatedmarker leaflet-rotatedmarker

Da kan du sette rotationAngle på markøren din.

import * as L from 'leaflet';
import 'leaflet-rotatedmarker';
...
 let marker = L.marker([47,18], {         
          rotationAngle: 180
          icon: ...,
        });

Svar #2

Som en midlertidig løsning har jeg brukt L.divIcon, og det fungerer perfekt

L.divIcon({
  html: '<img class="leaflet-marker-icon leaflet-zoom-animated" src="[icon image URL]" style="width: [icon width]px; height: [icon height]px;transform: rotate([angle]deg);  -webkit-transform: rotate([angle]deg); -moz-transform:rotate([angle]deg);" />'
})

Relaterte artikler