GeoJSONから反応マップボックスのグリッドを描画する -

Question

私はuber team for mapbox glで書かれた反応に優しいラッパーで作業しようとしています。

geojsonソースからポリゴンフィーチャをAPIでレンダリングした人がいるかどうかは疑問です。

sourceOptions：geoJsonSourceためmapboxのAPIに続きGeoJSONSource方法

を呼び出すときにオプションのオブジェクトが使用されるオブジェクトにマージされ、私は、ソース・オプションが属性であると述べていることは<Layer/>コンポーネントで提供されています次のことを試して、それをレンダリングするために他に何が必要なのか不思議です：

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

したがって、元のMAPbox GL APIを返す関数にアクセスするには、<MapboxGl />コンポーネントのonStyleLoadプロパティを使用してしまいました。ソリューションは完璧ではありませんが、私の根底にある問題には答えています。私はそれがエスケープハッチのような機能のようだと思います。

私は彼らのドキュメントの次の行に続く：

プロパティをonStyleLoad使用し、元のMapboxのAPIを使用するには、コールバック関数は、最初の引数としてマップオブジェクトを受け取ります、あなたは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 

：

コードは次のように見えました