在 react-mapbox-gl 中从 GeoJSON 绘制多边形
Drawing Polygons From GeoJSON in react-mapbox-gl
我正在尝试使用 uber team for mapbox gl 编写的反应友好包装器。
我想知道是否有人使用 API 从 geojson 源成功渲染了多边形要素。它声明源选项是属性在 <Layer/>
组件上可用:
sourceOptions: Options object merged to the object used when calling GeoJSONSource method
在 geoJsonSource 的地图框 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;
所以,我最终在 <MapboxGl />
组件上使用了他们的 onStyleLoad
属性 来访问 returns 原始 mapbox gl API.该解决方案远非完美,但它确实回答了我的基本问题。我猜它的功能有点像逃生舱口。
我遵循了他们文档的这一行:
To use the original Mapbox API use onStyleLoad property, the callback function will receive the map object as a first arguments, then you can add your own logic using 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
我正在尝试使用 uber team for mapbox gl 编写的反应友好包装器。
我想知道是否有人使用 API 从 geojson 源成功渲染了多边形要素。它声明源选项是属性在 <Layer/>
组件上可用:
sourceOptions: Options object merged to the object used when calling GeoJSONSource method
在 geoJsonSource 的地图框 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;
所以,我最终在 <MapboxGl />
组件上使用了他们的 onStyleLoad
属性 来访问 returns 原始 mapbox gl API.该解决方案远非完美,但它确实回答了我的基本问题。我猜它的功能有点像逃生舱口。
我遵循了他们文档的这一行:
To use the original Mapbox API use onStyleLoad property, the callback function will receive the map object as a first arguments, then you can add your own logic using 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