React-Leaflet icône de rotation

Question

Dans mon ancienne application de dépliant, j'ai utilisé this code pour faire pivoter une icône et cela a parfaitement fonctionné. Maintenant, j'essaie de déplacer le code vers react-leaflet mais je n'arrive pas à comprendre comment l'appliquer. Je sais que cela devrait être possible via des composants personnalisés, j'ai essayé de créer une sorte sur RotatedMarker (basé sur Marker.js dans le src), mais comme je suis nouveau à tout ça, je ne pouvais pas le faire fonctionner ... Est-ce que quelqu'un peut-il me montrer la bonne direction?

Merci,

Alex

Answer 1

Ok. C'est ce que j'ai fait pour que ça marche. Pas sûr que cela devrait être fait de cette façon, mais cela semble fonctionner.

export default class RotatedMarker extends Marker { 

    componentDidMount() { 

     super.componentDidMount(); 
     this.leafletElement.setIconAngle(this.props.rotation); 
    } 


    componentWillUpdate(nextProps, nextState) { 
     if (nextProps.rotation) { 
      this.leafletElement.setIconAngle(nextProps.rotation); 
     } 
    } 
} 

Answer 2

J'ai fait une réaction wrapper de la notice de rotation bbecquet marqueur: https://github.com/verdie-g/react-leaflet-rotatedmarker

import RotatedMarker from 'react-leaflet-rotatedmarker' 

<RotatedMarker position={position} rotationAngle={180} rotationOrigin={'center'} />