我正在尝试将一些GeoJSON导入到FeatureGroup
事件处理程序中的_onFeatureGroupReady
中,但似乎未呈现到地图中。该代码主要基于库react-leaflet-draw
here中的示例。奇怪的是,编辑菜单变得可用,表明数据可能在那里,但只是没有呈现。
我不确定发生了什么,因为我是一般地图的初学者。相关代码在else if(this.props.data) {
块中。 console.log()
语句全部以正确的格式显示其中的数据。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
37.79,
-122.45
],
[
37.79,
-122.42999999999999
],
[
37.77,
-122.42999999999999
],
[
37.77,
-122.45
],
[
37.79,
-122.45
]
]
]
}
}
]
}
这是我试图将此数据导入到FeatureGroup
中的代码:
_onFeatureGroupReady = (ref) => {
console.log('_onFeatureGroupReady');
console.log(ref);
if(ref===null) {
return;//bug???
}
this._editableFG = ref;
// populate the leaflet FeatureGroup with the geoJson layers
if(this.state.data) {
console.log('importing service area from state');
let leafletGeoJSON = new L.GeoJSON(this.state.data);
let leafletFG = this._editableFG.leafletElement;
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
}else if(this.props.data) {
console.log('importing service area from props');
this.setState({data:this.props.data},()=>{
console.log(this.state.data);
let leafletGeoJSON = new L.GeoJSON(this.state.data);
console.log(leafletGeoJSON);
let leafletFG = this._editableFG.leafletElement;
console.log(leafletFG);
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
})
}
}
我可能做错了什么(或者甚至可以通过任何方式实现这一目标)?
答案 0 :(得分:1)
希望这对您有帮助。首先,不建议在_onFeatureGroupReady中使用this.setState,它会导致map中的多个渲染。可以将其传输到componentDidMount,后者在渲染地图之前被调用。有关返回的信息_onFeatureGroupReady,这不完全是一个错误,但它将返回未定义的内容。
_onFeatureGroupReady = (ref) => {
console.log('_onFeatureGroupReady');
console.log(ref);
if(ref===null) {
return;
}
this._editableFG = ref;
// populate the leaflet FeatureGroup with the geoJson layers
if(this.state.data) {
console.log('importing service area from state');
let leafletGeoJSON = new L.GeoJSON(this.state.data);
let leafletFG = this._editableFG.leafletElement;
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
}else if(this.props.data) {
console.log('importing service area from props');
console.log(this.state.data);
let leafletGeoJSON = new L.GeoJSON(this.state.data);
console.log(leafletGeoJSON);
let leafletFG = this._editableFG.leafletElement;
console.log(leafletFG);
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
}
}
然后,关于地图。中心坐标和经度的纬度和经度相反。因此,也许您在getGeoJson()中设置的坐标是错误的。
<Map center={[37.79,-122.45]} zoom={13} zoomControl={false}>
<FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(reactFGref);} }>
...
</FeatureGroup>
</Map>
函数getGeoJson():
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-122.45,
37.79
],
[
-122.42999999999999,
37.79,
],
[
-122.42999999999999,
37.77
],
[
-122.45,
37.77
],
[
-122.45,
37.79
]
]
]
}
}