从 API 加载 geoJSON 标记 - React Leaflet

Posted 2023-03-28

【中文标题】从 API 加载 geoJSON 标记 - React Leaflet

【英文标题】：Loading geoJSON Markers from API - React Leaflet

【发布时间】：2019-03-11 08:19:28

【问题描述】：

传单和使用 GeoJSON。一旦数据存储在状态中，我正在尝试从获取的 GeoJSON API 中获取标记以在地图上呈现。我尝试使用标记组件来显示 API 中的标记，但没有任何内容呈现到页面。我愿意使用标记组件或任何其他方式来显示标记。谢谢！

import React,  Component  from "react";
import "./App.css";
import  Map, TileLayer, Marker, Popup, GeoJSON  from "react-leaflet";
import L from "leaflet";

class App extends Component 
  constructor(props) 
    super(props);

    this.state = 
      location: 
        lat: 51.505,
        lng: -0.09
      ,
      zoom: 2,
      bikes: null,
      haveUsersLocation: false,
    ;

 componentWillMount() 
    fetch(
      "https://bikewise.org:443/api/v2/locations/markers?proximity_square=10"
    )
      .then(response => response.json())
      .then(data => this.setState( bikes: data ));
  

 render() 
    const position = [this.state.location.lat, this.state.location.lng];

    return (
      <div className="App">
        <Menu />
        <Map className="map" center=position zoom=this.state.zoom>
          <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 addData=this.state.bikes /> 

          this.state.haveUsersLocation ? (
            <Marker position=position icon=myIcon>
              <Popup>Your current location</Popup>
            </Marker>
          ) : (
            ""
          )
        </Map>
      </div>
    );
  

【参考方案1】：

标记组件永远不会被调用的原因是，this.state.haveUsersLocation 始终为 false，并且您没有在组件中的任何位置将其设置为 true。如果您只想在 haveUsersLocation 为 true 时渲染 Marker 组件，则需要将 haveUsersLocation 更改为 true 以渲染 Marker 否则删除条件

您需要在componentWillMount中将haveUsersLocation设为true，Marker才会成功渲染

componentWillMount() 
    fetch(
      "https://bikewise.org:443/api/v2/locations/markers?proximity_square=10"
    )
      .then(response => response.json())
      .then(response => this.setState( haveUsersLocation: true, bikes: response.data.features ));
  

要强制响应重新渲染 GeoJSON 数据，您需要将一些 data-uniq 键传递给组件。查看下面的github问题了解更多详情

   <GeoJSON key=`geojson-01` addData=this.state.bikes /> 

https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071

还需要为 Marker 添加唯一键

   this.state.haveUsersLocation ? (
        <Marker key=`marker-01` position=position icon=myIcon>
          <Popup>Your current location</Popup>
        </Marker>
      ) :  ""

【讨论】：

三元运算符更新 haveUsersLocation 状态，我创建的初始标记显示得很好，但我无法显示来自 API 的标记。

@Shawn 我已经更新了我的答案，请立即尝试

您需要将 response.data.features 设置为自行车

@Think-Twice 或者，不是改变响应，而是改变 GeoJSON 标签？ <GeoJSON addData=this.state.bikes.features />

@AussieJoe 是的，同意这也是有效的