将GeoJSON文件导入React-Leaflet

npm install react react-dom react-leaflet leaflet

import React from 'react';
import { Map, TileLayer, GeoJSON } from 'react-leaflet';

class MapComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      geojsonData: null
    };
  }

  componentDidMount() {
    // 在这里进行异步操作，从服务器或本地文件加载GeoJSON数据
    // 并将数据存储到this.state.geojsonData中
    // 例如，使用fetch从服务器加载数据：
    fetch('path/to/geojson/file.json')
      .then(response => response.json())
      .then(data => {
        this.setState({ geojsonData: data });
      });
  }

  render() {
    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {this.state.geojsonData && (
          <GeoJSON data={this.state.geojsonData} />
        )}
      </Map>
    );
  }
}

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<MapComponent />, document.getElementById('root'));