Reactjs 导入geojson以响应传单绘制

我正在尝试将一些GeoJSON导入

\u onFeatureGroupReady

事件处理程序中的

FeatureGroup

，但它似乎没有呈现到映射中。代码主要基于库中的示例

react传单绘图

。奇怪的是，“编辑”菜单变得可用，表明数据可能在那里，但只是没有被渲染

我不知道发生了什么，因为我对地图基本上是个初学者。相关代码位于

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

}

---

我可能做错了什么（或者更好，任何我能做到的方式）？

希望这会对您有所帮助。首先，不建议在_onFeatureGroupReady中使用此.setState，它将导致在映射中进行多次渲染。可能会将其传输到在映射渲染之前调用的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>

这是我的结果。

---

我不明白这是如何回答这个问题的。组件在地图可见之前很久就挂载了，事实上，它需要用户交互才能可见。我已将setState调用转移到

componentDidMount（）

，当

this.props.visible

发生变化时，代码就会运行。我不认为这会有什么不同。数据就在那里，它在功能组中，只是在map@r3wt您的问题是GeoJSON似乎没有呈现到地图中。从您的代码判断，我发现两个问题。第一部分，setStaFeatureGroupReady中的te将导致一些问题，因此我建议将其传输。第二部分，getGeoJson（）中的坐标属性是[longitude，latitude]，您似乎将其设置为[latitude，latitude]。您是对的，这是有效的。这一切都取决于feature组中经度和纬度的顺序。（但中心的顺序实际上是纬度、经度和我一样）@r3wt哦，对不起，我弄错了。没问题，我真的很感谢你的帮助。谢谢！我欠你一杯啤酒或咖啡：-）

  {
    "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    
            ]
        ]
      ]
    }
}