反应小叶标记旋转

问题描述

我遵循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