GeoJSON をFeatureGroup
in_onFeatureGroupReady
イベント ハンドラーにインポートしようとしていますが、マップにレンダリングされていないようです。react-leaflet-draw
コードの大部分は、こちらのライブラリの例に基づいています。奇妙なことに、編集メニューが使用可能になり、データが存在する可能性があることを示していますが、レンダリングされていません。
私は地図全般の初心者なので、何が起こっているのかわかりません。関連するコードは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));
})
}
}
私は何を間違っているのでしょうか (または、これを達成できる方法はありますか)?