文章/答案/技术大牛

发布

问小叶标记轮作
EN

Stack Overflow用户

提问于 2020-10-04 17:33:47

回答 1查看 1.8K关注 0票数 0

我遵循这构建了一个旋转标记，但不幸的是，它不能在这里工作，这是我创建的组件

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不是一个函数

我用的是反应传单V2

javascript

reactjs

leaflet

react-leaflet

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-05 14:58:19

对我来说很管用。不确定您的安装程序是什么，但您需要安装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"
  };
...

这是一个工作的演示

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64197805

复制

相似问题

问小叶标记轮作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问小叶标记轮作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问小叶标记轮作
EN