React Leaflet - Вращающийся компонент ImageOverlay React на n градусов - PullRequest
Новая
       21

React Leaflet - Вращающийся компонент ImageOverlay React на n градусов

0 голосов
/ 13 апреля 2019

Цель: Я использую React Leaflet для создания игровой карты и размещаю игровые плитки с помощью ImageOverlay, проблема в том, что листовка не позволяет вам вращать фигуры. Мне нужно, чтобы можно было повернуть ImageOverlays на несколько градусов.

Что я пробовал: Я использую ImageOverlay для создания карты, потому что части - это файлы PNG, расположенные по их центральным координатам. Затем те, которые были повернуты, я дал класс с именем «rotate». Затем в 'componentDidMount' я попытался найти элементы с этим именем класса, используя 'ReactDOM.findDOMNode (this) .getElementsByClassName (' rotate $ {deg} ')', но это не работает на компонентах 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>
     )
  }

Если у кого-то есть идея получше, чем я пытался сделать, дайте мне знать. Спасибо!

1 Ответ

0 голосов
/ 15 апреля 2019

Для поворота ImageOverlay компонента можно рассмотреть следующий подход:

1) получить L.ImageOverlay экземпляр через атрибут ref : 

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

где 

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

2) получить элемент Image и применить rotateZ() функцию CSS : 

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

Вот демоверсия для справки

...