使用 react-leaflet 渲染 GeoJSON [英] Rendering GeoJSON with react-leaflet

问题描述

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

import React, { Component } from 'react';从'react-leaflet'导入{地图、标记、TileLayer、GeoJSON}；导入传单/dist/leaflet.css"；从'react-redux'导入{连接}；导入'./style.css';import { setPoint, fetchData } from '../../actions/map';@connect(store => {返回 {地图:store.map}})类 MyMap 扩展组件 {地图点击(e){this.props.dispatch(setPoint(e.latlng));this.props.dispatch(fetchData(e.latlng));}使成为() {const 标记 = () =>{如果(this.props.map.point){return <Marker position={this.props.map.point}/>;}};常量数据 = () =>{如果(this.props.map.data.length > 0){const json = this.props.map.data;返回 <GeoJSON 数据={json}/>}}返回 (<div className='my-map'><div className='my-map__map-container'><地图中心={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>贡献者/>{标记()}{数据()}</地图>

<div className='my-map__debug'>{JSON.stringify(this.props.map)}

);}}导出默认的 MyMap；

然后我第一次点击地图标记出现，经过一些延迟(XHR 请求)GeoJSON 呈现.但是下次我点击地图时，我只会改变标记位置，但旧的 GeoJSON 数据仍保留在地图上.调试部分组件正确呈现，并显示正确的数据.如何强制 react-leaflet 重新渲染我的 GeoJSON 数据，或者我做错了什么?

UPD:

在询问 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/问题/332#issuecomment-304228071

解决方案

在询问 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/问题/332#issuecomment-304228071

I've got simple component to pick point on map and then display some GeoJSON data related to this point:

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;

First time then I'm clicking on map marker appears and after some delay (XHR request) GeoJSON renders. But next time I'm clicking on map, I've got only changes in marker position, but old GeoJSON data remains on map. Debug part of component renders properly, and showing proper data. How can I force react-leaflet to re-render my GeoJSON data or maybe I'm doing something wrong?

UPD:

After asking author of react-leafet I've found how to reach expected behavior.

To force react to re-render my GeoJSON data I need to pass some data-uniq key to component:

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

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

解决方案

After asking author of react-leafet I've found how to reach expected behavior.

To force react to re-render my GeoJSON data I need to pass some data-uniq key to component:

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

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

这篇关于使用 react-leaflet 渲染 GeoJSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！