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

Question

我正在尝试使用超级团队为mapbox gl编写的反应友好的包装器。

我想知道是否有人使用他们的API从geojson源成功渲染了多边形特征。 它声明<Layer/>组件上有一个source options属性：

sourceOptions ：选项对象合并到调用GeoJSONSource方法时使用的对象

在geoJsonSource的mapbox API 之后 ，我正在尝试以下内容并想知道还需要做什么才能让它呈现：

 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属性，回调函数将接收map对象作为第一个参数，然后您可以使用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