使用react-leaflet渲染GeoJSON

Question

我有简单的组件来在地图上选取点，然后显示与该点相关的一些 GeoJSON 数据：

import React, { Component } from 'react';

import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

import { connect } from 'react-redux';
import './style.css';

import { setPoint, fetchData } from '../../actions/map';

@connect(store => {
  return {
    map: store.map
  }
})
class MyMap extends Component {

  mapClick(e) {
    this.props.dispatch(setPoint(e.latlng));
    this.props.dispatch(fetchData(e.latlng));
  }

  render() {
    const marker = () => {
      if(this.props.map.point) {
        return <Marker position={this.props.map.point} />;
      }
    };

    const data = () => {
        if(this.props.map.data.length > 0) {
            const json = this.props.map.data;
            return <GeoJSON data={json} />
        }
    }

    return (
      <div className='my-map'>
        <div className='my-map__map-container'>
          <Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}>
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
            {marker()}
            {data()}
          </Map>
        </div>
        <div className='my-map__debug'>
            {JSON.stringify(this.props.map)}
        </div>
      </div>
    );
  }
}

export default MyMap;

第一次我点击地图标记出现，经过一段时间的延迟（XHR 请求）GeoJSON 渲染。但下次我单击地图时，我只看到标记位置发生变化，但旧的 GeoJSON 数据仍保留在地图上。调试组件的一部分正确呈现，并显示正确的数据。我如何强制

react-leaflet

重新渲染我的 GeoJSON 数据，或者我可能做错了什么？

更新：

在询问了

react-leafet

的作者后，我找到了如何达到预期的行为。

为了强制反应重新渲染我的 GeoJSON 数据，我需要将一些 data-uniq 密钥传递给组件：

<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} />

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

Answer 1

在询问

react-leafet

的作者后，我找到了如何达到预期的行为。

为了强制反应重新渲染我的 GeoJSON 数据，我需要将一些 data-uniq 密钥传递给组件：

<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} />

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

Answer 2

import hash from 'object-hash';

render() {
let blah = this.state; //or this.props or whatever
<GeoJSON
  key={hash(blah)}
  data={blah} />

Answer 3

从每次调用渲染方法时创建的函数调用标记和 geojson 的性能不会很高。另外，我认为您可能需要向地图元素添加一个键，以便它们可以正确重用和更新。

试试这个：

render() {

    return (
      <div className='my-map'>
        <div className='my-map__map-container'>
          <Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}>
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
            {this.props.map.point &&
              <Marker key='my-marker' position={this.props.map.point} />
            }
            {this.props.map.data.length > 0 && 
              <GeoJSON key='my-geojson' data={this.props.map.data.json} />
            }
          </Map>
        </div>
        <div className='my-map__debug'>
            {JSON.stringify(this.props.map)}
        </div>
      </div>
    );
  }

Answer 4

在新版本的React中我使用下面的代码

import { GeoJSON } from "react-leaflet/GeoJSON";

const [data, setData] = useState(null)
 useEffect(()=>{
      fetch("/geojson path...")
    .then((res) => {
      return res.json();
    })
    .then((geoJson) => {
      setData(geoJson);
 });

  },[])
  // use in JSX
  {currentGeoJsonData && (
  <GeoJSON
  ref={data}
  key={Math.random() + i}
  data={data}
  />
  )}