React-Leaflet旋转图标

Question

在我以前的单页应用程序中，我使用this code来旋转图标，它工作得很好。现在，我正在尝试将代码移动到react-leaflet，但不知道如何应用它。我知道这应该可以通过定制组件来实现，我试着在RotatedMarker上创建一些东西(基于src中的Marker.js )，但是由于我是新手，我不能让它工作……有谁能给我指个方向吗？

谢谢,

亚历克斯

Answer 1

好的。这就是我为了让它工作而做的。不确定是否应该这样做，但它似乎是有效的。

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} />