[英]React Leaflet marker rotation
我已经按照这个来构建一个旋转的标记,但不幸的是,它在这里不起作用是我创建的组件
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>
);
}
}
这就是我使用组件的方式:
<RotatedMarker
rotationAngle={120}
rotationOrigin="center"
position={[violation.latitude,violation.longitude,]}
icon={getMarkerIcon().icon}>
</RotatedMarker>
我试图调用这个函数this.leafletElement.setRotationAngle(toProps.rotationAngle);
直接但我收到以下错误:
类型错误:this.leafletElement.setRotationAngle 不是函数
我正在使用 react-leaflet V2
这个对我有用。 不确定您的设置是什么,但您需要安装leaflet-rotatedmarker
插件并将其导入您的自定义组件中,以免收到该错误。
你应该有这个
import React from "react";
import { Marker as LeafletMarker } from "leaflet";
import { LeafletProvider, withLeaflet, MapLayer } from "react-leaflet";
import "leaflet-rotatedmarker"; //here import the plugin
class RotatedMarker extends MapLayer {
static defaultProps = {
rotationOrigin: "center"
};
...
这是一个工作演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.