Question

我正在使用react-leaflet映射，运行时我必须更新标记的方向，我正在将leaflet-rotatedmarker与react-leaflet一起使用。标记方向在加载和重新加载时工作正常，但在从props接收值后未更新。

<Marker 
 key={1} 
 position={{ lat: position.latitude, lng: position.longitude }} 
 rotationAngle={position.course} 
 rotationOrigin="center" 
 icon={L.icon({
  iconUrl: "xyz.svg", 
  iconSize: [50,50], 
  iconAnchor: [25, 25]})} 
/>

我只想在收到新角度值时更新rotationAngle。

请告知，我不知道如何在setRotationAngle中使用react-leaflet

谢谢

Answer 1

感谢@ nn796分享https://github.com/verdie-g/react-leaflet-rotatedmarker/issues/1#issuecomment-427285940

我通过使用

解决了我的问题

import React from 'react';
import { Marker as LeafletMarker } from 'leaflet';
import { LeafletProvider, withLeaflet, MapLayer } from 'react-leaflet';
import 'leaflet-rotatedmarker';

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>
    );
  }
}

export default withLeaflet(RotatedMarker);

我希望它会对某人有所帮助。

Answer 2

如here所述，无法在v2中扩展Marker，因此基本上我们需要复制粘贴整个Marker类并添加此功能。仅供参考，这是我的RotatedMarker的工作版本：

import React from 'react';
import { Marker as LeafletMarker } from 'leaflet';
import { LeafletProvider, withLeaflet, MapLayer } from 'react-leaflet';
import 'leaflet-rotatedmarker';

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>
    );
  }
}

export default withLeaflet(RotatedMarker);

Source

如何在react-leaflet中使用setRotationAngle

2 个答案: