Рисование полигонов от GeoJSON в response-mapbox-gl

Question

Я пытаюсь работать с дружественной реактивной оболочкой, написанной uber team for mapbox gl.

Мне интересно, если кто-то успешно отобрал многоугольные объекты из источника geojson с их API. Он утверждает, что параметры источника является атрибут доступен на <Layer/> компонента:

sourceOptions: Параметры объекта слилась в объект, используемый при вызове метода GeoJSONSource

После MapBox API для geoJsonSource, я пытаюсь следующее и интересно, что еще мне нужно сделать для того, чтобы получить его, чтобы сделать:

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

Итак, я получил свое свойство onStyleLoad на компоненте <MapboxGl />, чтобы получить доступ к функции, которая возвращает исходный API-интерфейс mapbox gl. Решение далека от совершенства, но оно отвечает моему основному вопросу. Я предполагаю, что это такие функции, как побег-люк.

Я следовал этой линии их документации:

использовать оригинальные 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