react-leaflet - React-Leaflet 旋转图标

Question

在我的旧传单应用程序中，我使用此代码来旋转图标，并且效果很好。现在，我正在尝试将代码移动到 react-leaflet 但无法弄清楚如何应用它。我知道这应该可以通过自定义组件实现，我尝试在 RotatedMarker 上创建某种类型（基于 src 中的 Marker.js），但是由于我对这一切都不熟悉，所以我无法让它工作......任何人都可以指出我正确的方向？

谢谢，

亚历克斯

Answer 1

Ok. This is what I did to make it work. Not sure it should be done this way, but it seems to work.

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

我找到了另一种方法，尝试像这样构建图标：

var icon = L.divIcon({
    iconSize: [20, 20],
    iconAnchor: [10, 10],
    className: 'yourClassName',
    html: `<img 
    style="transform: rotate(80deg);"
    height="20" 
    width="20" 
    src='path/to/icon'>`
})

然后将其添加到您的标记中：

<Marker position={position} icon={icon} />