reactjs - 我可以像在(mapbox-gl-js 文档)中使用react-map-gl 那样添加GeoJSON 行吗？

Question

我正在尝试添加一条 GeoJSON 线来显示 A 点和 B 点之间的汽车方向(就像在 mapbox-gl-js 的官方文档中那样(https://www.mapbox.com/mapbox-gl-js/example/geojson-line/)

但是react-map-gl的文档根本没有谈论这一点。

我怎样才能实现类似的东西使用 https://uber.github.io/react-map-gl/#/Documentation/introduction/introduction :

这是到目前为止我的代码:

class MapPage extends Component {
  constructor(props) {
    super(props);
     this.state = {
      viewport: {
       latitude: 38.63738602787579,
       longitude: -121.23576311149986,
       zoom: 6.8,
       bearing: 0,
       pitch: 0,
       dragPan: true,
       width: 600, 
       height: 600 
     }
    };
   }

render() {
  const { viewport } = this.state;

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={MAPBOX_TOKEN}
      onViewportChange={newViewport => {
        this.setState({ viewport: newViewport });
      }}
    />
  );
 }
}

Answer 1

组件挂载后即可获取mapbox-gl map 对象，然后可以直接使用它。尝试这样的事情:

class MapPage extends Component {
      constructor(props) {
        super(props);
         this.state = {
          viewport: {
           latitude: 38.63738602787579,
           longitude: -121.23576311149986,
           zoom: 6.8,
           bearing: 0,
           pitch: 0,
           dragPan: true,
           width: 600, 
           height: 600 
         }
        };
       }
    componentDidMount(){
      const map = this.reactMap.getMap();
      map.on('load', () => {
       //add the GeoJSON layer here
       map.addLayer({...})
      })
    }

    render() {
      const { viewport } = this.state;

      return (
        <ReactMapGL
          ref={(reactMap) => this.reactMap = reactMap} />
          {...viewport}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          onViewportChange={newViewport => {
            this.setState({ viewport: newViewport });
          }}
        />
      );
     }
    }

react 引用:https://reactjs.org/docs/refs-and-the-dom.html

GetMap(): https://uber.github.io/react-map-gl/#/Documentation/api-reference/static-map?section=methods