4

GeoJSON をFeatureGroupin_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));
        })
    }

}

私は何を間違っているのでしょうか (または、これを達成できる方法はありますか)?

4

1 に答える 1