作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 react-leaflet
map ,运行时我必须更新标记的方向,我正在使用 leaflet-rotatedmarker
库和 react 传单
。标记方向在加载和重新加载时工作正常,但在从 Prop 接收值后未更新。
<Marker
key={1}
position={{ lat: position.latitude, lng: position.longitude }}
rotationAngle={position.course}
rotationOrigin="center"
icon={L.icon({
iconUrl: "xyz.svg",
iconSize: [50,50],
iconAnchor: [25, 25]})}
/>
我只想在收到新的角度值时更新 rotationAngle
。
请指教,我不知道如何在react-leaflet
中使用setRotationAngle
谢谢
最佳答案
如前所述here ,不可能再在 v2 中扩展 Marker,所以基本上我们需要复制粘贴整个 Marker 类并添加此功能。仅供引用,这是我的 RotatedMarker
工作版本:
import React from 'react';
import { Marker as LeafletMarker } from 'leaflet';
import { LeafletProvider, withLeaflet, MapLayer } from 'react-leaflet';
import 'leaflet-rotatedmarker';
class RotatedMarker extends MapLayer {
static defaultProps = {
rotationOrigin: 'center',
};
createLeafletElement(props) {
const el = new LeafletMarker(props.position, this.getOptions(props));
this.contextValue = { ...props.leaflet, popupContainer: el };
return el;
}
updateLeafletElement(fromProps, toProps) {
if (toProps.position !== fromProps.position) {
this.leafletElement.setLatLng(toProps.position);
}
if (toProps.icon !== fromProps.icon) {
this.leafletElement.setIcon(toProps.icon);
}
if (toProps.zIndexOffset !== fromProps.zIndexOffset) {
this.leafletElement.setZIndexOffset(toProps.zIndexOffset);
}
if (toProps.opacity !== fromProps.opacity) {
this.leafletElement.setOpacity(toProps.opacity);
}
if (toProps.draggable !== fromProps.draggable) {
if (toProps.draggable === true) {
this.leafletElement.dragging.enable();
} else {
this.leafletElement.dragging.disable();
}
}
if (toProps.rotationAngle !== fromProps.rotationAngle) {
this.leafletElement.setRotationAngle(toProps.rotationAngle);
}
if (toProps.rotationOrigin !== fromProps.rotationOrigin) {
this.leafletElement.setRotationOrigin(toProps.rotationOrigin);
}
}
render() {
const { children } = this.props;
return children == null || this.contextValue == null ? null : (
<LeafletProvider value={this.contextValue}>{children}</LeafletProvider>
);
}
}
export default withLeaflet(RotatedMarker);
关于reactjs - 如何在 react-leaflet 中使用 setRotationAngle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57157299/
我正在使用 react-leaflet map ,运行时我必须更新标记的方向,我正在使用 leaflet-rotatedmarker 库和 react 传单。标记方向在加载和重新加载时工作正常,但在从
我是一名优秀的程序员,十分优秀!