[英]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.