1

我正在使用 React-MAP-GL，并且在尝试更新对象时出现问题Style is not done loading 。mapStyle

import React from 'react';
import ReactMapGL from 'react-map-gl';
import {defaultMapStyle, dataLayer} from './map-style.js';

import {fromJS} from 'immutable';
import geoJson from './cali.json';

export default class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapStyle: defaultMapStyle,
      data: null,
      viewport: {
        width: 600,
        height: 800,
        latitude: 36.7783,
        longitude: -119.4179,
        zoom: 5,
      },
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this._resize);
    this._loadData(geoJson);
  }


  _loadData = data => {
    const mapStyle = defaultMapStyle
      .setIn(['sources', 'incomeByState'], fromJS({type: 'geojson', data}))
      .set('layers', defaultMapStyle.get('layers').push(dataLayer));

    this.setState({data, mapStyle});
  };

  render() {
    return (
      <div>
        <ReactMapGL
          {...this.state.viewport}
          mapStyle={this.state.mapStyle}
          onViewportChange={viewport => {
            this.setState({viewport});
          }}
          mapboxApiAccessToken=""
        />
      </div>
    );
  }
}
4

1 回答 1

2

react-map-gl 上的示例对我不起作用，这就是他们所做的。我认为他们的方法有效只是因为requestJson有this._loadData回调，但我正在预加载geojson.

componentDidMount() {
    window.addEventListener('resize', this._resize);
    this._resize();

    requestJson('data/us-income.geojson', (error, response) => {
      if (!error) {
        this._loadData(response);
      }
    });
  }

但我确实找到了一些修复它的方法：

选项1：

setTimeout(() => this._loadData(geoJson), 1);即使是 1 毫秒，也可以用原始方法解决问题。

选项 #2：不要使用 加载数据ComponentDidMount，只需在其他地方放置一个onClick或 'onScroll' 事件来加载数据。有点骇人听闻...

选项#3：使用onLoad！由于某种原因，我一开始没有找到这种方法......

<MapGL
          ref={map => (this.mapRef = map)}
          {...this.state.viewport}
          mapStyle={this.state.mapStyle}
          onLoad={() => this._loadData(geoJson)}
          onViewportChange={viewport => {
            this.setState({viewport});
          }}
          mapboxApiAccessToken="8jiOnPbYA"
        />
于 2018-03-01T17:00:32.980 回答