Управление вращением в NavigationControl не работает в реакции-карте-gl - PullRequest
Новая
       22

Управление вращением в NavigationControl не работает в реакции-карте-gl

0 голосов
/ 30 ноября 2018

У меня проблема с управлением вращением, не работающим для response-map-gl.Карта отображается без и выдачи, а элементы управления увеличением / увеличением работают нормально, но управление вращением ничего не делает.Я просмотрел документацию, но не вижу проблемы.Вот мой код: 

import React, { Component } from 'react';
import ReactMapGL, { NavigationControl } from 'react-map-gl';
import styles from './styles/ViewMap.module.scss'
import mapPin from './img/mapPin.png'

export default class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        width: '100%',
        height: '100%',
        latitude: 37.7577,
        longitude: -122.4376,
        zoom: 12
      },
      mapStyle: "streets-v9",
      style: 'mapbox://styles/mapbox/',
    };

    this.mapStyle_onChange = this.mapStyle_onChange.bind(this);
  }

  componentDidMount() {
    console.log("DIDMOUNT");
  }

  mapStyle_onChange(e) {
    this.setState({ mapStyle: e.currentTarget.value, latitude: 0, longitude: 0 });
  }

  render() {
    return (
      <div className={styles.parentMapContainer}>
        <div ref={el => this.mapContainer = el} className={styles.mapContainer}>
          <div className={styles.mapStyleRow}>
            <input type="radio" id="rdStreets" value="streets-v9" onChange={this.mapStyle_onChange} className={styles.mapStyleRadio} name="mapStyle" checked={this.state.mapStyle === "streets-v9"} />
            <div className={styles.mapStyleLabel}>Street</div>
            <input type="radio" id="rdSatellite" value="satellite-v9" onChange={this.mapStyle_onChange} className={styles.mapStyleRadio} name="mapStyle" checked={this.state.mapStyle === "satellite-v9"} /><div className={styles.mapStyleLabel}>Satellite</div>
          </div>
          <ReactMapGL
            mapStyle={this.state.style + this.state.mapStyle}
            mapboxApiAccessToken='pk.eyJ1INybW91bTJsbDF3dyJ9.vWoue-jEOJBbffqeMZDIEw'
            {...this.state.viewport}
            onViewportChange={(viewport) => this.setState({ viewport })}>
            <div style={{ position: 'absolute', right: 0 }}>
              <NavigationControl onViewportChange={(viewport) => this.setState({ viewport })} />
            </div>
          </ReactMapGL>
        </div>
      </div>
    );
  }
}
...