从GeoJSON绘制多边形在react-mapbox-gl

Question

我正在尝试使用由uber team for mapbox gl编写的反应友好包装器。

我想知道是否有人已经成功地从geojson源渲染多边形特征与他们的API。它指出一个源选项是属性可在<Layer/>组件：

sourceOptions：调用GeoJSONSource方法

时继mapbox API为geoJsonSource Options对象合并使用的对象，我我正在尝试以下方法并想知道我还需要做些什么才能使其呈现：

import React, { Component } from 'react'; 
 
import ReactMapboxGl, { Layer, Feature } from "../node_modules/react-mapbox-gl/dist"; 
 
import logo from './logo.svg'; 
 
import './App.css'; 
 

 
let containerStyle = { 
 
    height: "100vh", 
 
    width: "100vw" 
 
}; 
 

 
const accessToken = _removed for safety_ 
 

 
class App extends Component { 
 

 
    _polygonClicked = ({ feature }) => { 
 
    console.log("Polygon clicked", feature.geometry.coordinates); 
 
    }; 
 

 
    render() { 
 
     return (
 
     <div className="App"> 
 
      <div className="App-header"> 
 
       <img src={logo} className="App-logo" alt="logo" /> 
 
       <h2>Welcome to React</h2> 
 
      </div> 
 
      <ReactMapboxGl 
 
       style={"mapbox://styles/mapbox/streets-v8"} 
 
       center={[11.956511272000057,10.095463399000039]} 
 
       zoom={[11]} 
 
       accessToken={accessToken} 
 
       containerStyle={containerStyle}> 
 
       <Layer 
 
        type="fill" 
 
        paint={{ "fill-color": "#3bb2d0", "fill-opacity": .5 }} 
 
        id="testing" 
 
        sourceOptions={'religious',{ 
 
         "type": 'geojson', 
 
         "data":'../small_poly/bridges.geojson' 
 
         }} 
 
        sourceId={'religious'}> 
 
       </Layer> 
 

 
      </ReactMapboxGl> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

Answer 1

因此，我最终在<MapboxGl />组件上使用了onStyleLoad属性，以访问返回原始mapbox gl API的函数。解决方案远非完美，但它确实回答了我的基本问题。我想它就像逃生舱一样。

我跟着这条线的文档：

要使用原始Mapbox API使用onStyleLoad属性，回调函数将接收地图对象作为第一个参数，那么你可以添加使用mapbox自己的逻辑gl API。

的代码是这样的：

class App extends Component { 

    componentWillMount(){ 
     this.setState({ 
      center : [138.6000, -34.9286] 
     }) 
    } 

    _polygonClicked = ({ feature }) => { 
    console.log("Polygon clicked", feature.geometry.coordinates); 
    }; 

    _onStyleLoad = (map, event) => { 
     console.log("map", map, "event: ", event, this.refs.map) 
     map.addSource("16MAR13-FP-TOMNOD", { 
      type: 'vector', 
      tiles: ['https://s3.amazonaws.com/tomnod-vector-tiles/16MAR13-FP-TOMNOD/{z}/{x}/{y}'] 
     }) 
     map.addLayer({ 
      "id": "16MAR13-FP-TOMNOD", 
      "type": "line", 
      "source": "16MAR13-FP-TOMNOD", 
      "source-layer": "16MAR13-FP-TOMNOD", 
      "layout": { 
       "visibility": "visible" 
      }, 
      "paint": {}, 
      "interactive": true 
    }); 
    } 

    _onClick =() => { 
     this.setState({ 
      center : [110,23] 
     }) 
    } 

    render() { 
     return (
     <div className="App"> 
      <div className="App-header"> 
       <img src={logo} className="App-logo" alt="logo" /> 
      </div> 
      <ReactMapboxGl 
       style={"mapbox://styles/mapbox/streets-v8"} 
       center={this.state.center} 
       zoom={[13]} 
       accessToken={accessToken} 
       containerStyle={containerStyle} 
       onStyleLoad={this._onStyleLoad} 
       onClick={this._onClick} 
       ref='map'> 
      </ReactMapboxGl> 
     </div> 
    ); 
    } 
} 

export default App