使用 react-leaflet 的 GeoJSON 异步显示数据

Asynchronously display data with react-leaflet's GeoJSON

通过在我的渲染函数中返回它来渲染 geojson 数据没有问题:

<Map ref={(ref) => { this.map = ref; }} center={position} zoom={13}>
    <TileLayer
        attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    <GeoJSON data={this.state.geojson_data} /> }
</Map>

所以接下来我尝试用 null 初始化 this.state.geojson_data,然后在 componentDidMount 上加载数据,然后我修改了与 GeoJSON 对应的行,因为很明显,null 不是有效的 geojson 对象。

 { this.state.geojson_data !== null && <GeoJSON data={this.state.geojson_data} /> }

数据获取没有问题,但我的 geojson 根本不显示,有人知道为什么吗?

我可以看到两种规避方法:

  1. 使用地图参考以香草传单方式添加图层,但我想使用更反应的方法。
  2. 使用父组件加载数据并将其作为 prop 提供,但我喜欢地图在数据加载时而不是在数据加载之后进行初始化和加载的想法。

EDIT1:我进一步调查并尝试向 GeoJSON 组件提供一些非 geojson 数据,但它出错了,当数据良好时它仍然没有绘制图层。

这是一个参考问题,很抱歉我无法进一步解释,与我交谈的 gis 人员给了我这个带有另一个参考的 geojson 的另一个版本,它按预期工作。

虽然错误出在我身上,但我首先尝试使用硬编码的 geojson,当我尝试加载它时我确信我的后端使用了相同的数据,而它是另一个引用错误的数据。

编辑:处理我们的 gis 的人给了我们一个没有使用正确参考的 geojson