导入geojson到react-leaflet-draw

时间:2018-10-07 01:18:38

标签: reactjs leaflet react-leaflet react-leaflet-draw leaflet-draw

我正在尝试将一些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));
        })
    }

}

我可能做错了什么(或者甚至可以通过任何方式实现这一目标)?

1 个答案:

答案 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    
            ]
        ]
      ]
    }
}

这是我的结果。 enter image description here