将 geojson 导入 react-leaflet-draw

Question

我正在尝试将一些 GeoJSON 导入 _onFeatureGroupReady 事件处理程序中的 FeatureGroup，但它似乎没有呈现到地图中。代码主要基于库 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));
        })
    }

}

我可能做错了什么（或者更好的是，我有什么办法可以做到这一点）？

Answer 1

希望对你有帮助you.First，不建议在_onFeatureGroupReady中使用this.setState，会导致map.May中的多次渲染，将其转移到在映射 rendered.And 关于 _onFeatureGroupReady 中的 return，这不完全是一个错误，但它将 return 未定义。

_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));
    }
}

那么关于中心坐标的Map.The经纬度和坐标是opposite.So，可能是你在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    
            ]
        ]
      ]
    }
}

而且，这是我的结果。

将 geojson 导入 react-leaflet-draw

Importing geojson to react-leaflet-draw

reactjs

leaflet

react-leaflet

react-leaflet-draw

leaflet-draw