React Leaflet - 旋转ImageOverlay React Component n度

Question

目标：我正在使用React Leaflet构建游戏地图，我正在使用ImageOverlay放置游戏区块，问题是传单不允许您旋转棋子。我需要能够将ImageOverlay旋转一定程度。

我尝试过：我正在使用ImageOverlay创建地图，因为这些部分是按中心坐标放置的PNG文件。然后旋转的那个我给了一个名为'rotate'的类。然后在'componentDidMount'上我尝试使用'ReactDOM.findDOMNode（this）.getElementsByClassName（'rotate $ {degree}'）'找到具有该类名的元素，但这对React组件不起作用？

  componentDidMount() {
    // Below code returns empty arrays
    let elementsRotated90 = ReactDOM.findDOMNode(this).getElementsByClassName("rotate90");
    let elementsRotated180 = ReactDOM.findDOMNode(this).getElementsByClassName("rotate180");
    let elementsRotated270 = ReactDOM.findDOMNode(this).getElementsByClassName("rotate270");
  }

  render() {
    let position = [this.state.lat, this.state.long];
    return (
      <Map className="map" center={position} zoom={this.state.zoom}>
        <LayerGroup>
          {map1
            .data
            .Pieces
            .Stages
            .map(stage => {
              return stage
                .Tiles
                .map(tile => {
                  let height = tile.Resolution.Height;
                  let width = tile.Resolution.Width;
                  let url = require('./assets/pieces/' + tile.Type + '.png');
                  let rotation = tile.Rotation;
                  let center = tile.CenterCoord;
                  let bound = ([
                    [
                      center[1] - height / 2,
                      center[0] - width / 2
                    ],
                    [
                      center[1] + height / 2,
                      center[0] + width / 2
                    ]
                  ]);
                  let component = <ImageOverlay bounds={bound} url={url} 
                  className={`rotate${rotation}`}/>
                  this.state.markers.push(component);
                  return component;
                })
            })}
        </LayerGroup>
     </Map>
     )
  }

如果有人比我尝试过的想法更好，请告诉我。谢谢！

Answer 1

要旋转ImageOverlay component，可以考虑以下方法：

1）通过L.ImageOverlay instance获取ref attribute：

 const { leafletElement: imageOverlay } = this.imageOverlayRef.current;

哪里

 <ImageOverlay
        ref={this.imageOverlayRef}
        ...
 />

2）获取Image元素并应用rotateZ() CSS function：

const image = imageOverlay.getElement()
this.rotateImage(image, this.rotateAngle);

哪里

rotateImage(image, angle) {
    if (!this.originalTransformValue) {
      this.originalTransformValue = image.style.transform;
    }
    image.style.transform = `${this.originalTransformValue} rotateZ(${angle}deg)`;
}

Here is a demo供您参考