如何解决反应小叶标记旋转
我遵循this来构建旋转标记,但是不幸的是,这是我创建的组件,无法正常工作
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);
,但出现以下错误:
TypeError: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"
};
...
这是工作中的demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。