Zeichnen von Polygonen aus GeoJSON in react-mapbox-gl

Question

Ich versuche, mit dem reagieren-freundlichen Wrapper von uber team for mapbox gl geschrieben zu arbeiten.

Ich frage mich, ob jemand Polygon-Features aus einer Geojson-Quelle mit ihrer API erfolgreich gerendert hat. Darin heißt es, dass eine Quelle Optionen Attribut auf der <Layer/> Komponente verfügbar:

sourceOptions: zum Objekt Option Objekt verwendet zusammengeführt, wenn für geoJsonSource GeoJSONSource Methode

Im Anschluss an den MapBox API aufrufen, I ich muss tun, ich versuche, die folgende und fragen, was sonst, um es zu bekommen zu machen:

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

Also habe ich am Ende ihre onStyleLoad Eigenschaft auf der Komponente verwendet, um auf eine Funktion zuzugreifen, die die ursprüngliche mapbox gl API zurückgibt. Die Lösung ist bei weitem nicht perfekt, aber sie beantwortet meine grundlegende Frage. Ich denke, es funktioniert wie eine Notausstiegsluke.

folgte ich diese Zeile ihrer Dokumentation:

Um die ursprünglichen MapBox API Verwendung onStyleLoad Eigenschaft zu verwenden, wird die Callback-Funktion der Karte Objekt als erstes Argument erhält, dann können Sie Ihre eigene Logik hinzufügen MapBox mit gl API.

Der Code sah wie folgt aus:

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