如何在 React 传单 MapContainer 中渲染 geojson 多边形？

Question

堆栈：Reactjs、Leafletjs、EsriLeafletjs

我正在尝试在传单地图容器上的 GeoJson 中显示一个多边形。我的主要问题是当我使用 Leaflet.geoJson(data) 它返回无效的 JSON 对象。

请看...

我的 JSON 文件如下所示。它包含一个多边形。 https://gist.githubusercontent.com/UmairMughal901/d43ee77a9be27f2dcd006038fe8f07e7/raw/8650f4f3585ff0c1706da7a434251cfc70f1907b/map.geojson

我的地图组件

    import React, { useEffect, useRef } from 'react';
    import * as L from 'leaflet';
    import 'leaflet/dist/leaflet.css';
    import * as EL from "esri-leaflet";
    import axios from 'axios';
    import { GeoJSON } from 'react-leaflet';

    export default function Mapfun() {
      const mapCanvas = useRef(null);
    
      const dataParcel = axios.get('https://gist.githubusercontent.com/UmairMughal901/d43ee77a9be27f2dcd006038fe8f07e7/raw/8650f4f3585ff0c1706da7a434251cfc70f1907b/map.geojson').then(resp => {
    
        console.log(resp.data);
      });
    
    
      useEffect(() => {
        mapCanvas.current = L.map('mapdiv', {
          center: [31, 72],
          zoom: 6,
          layers: [
            L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
              attribution:
                '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }),
            EL.featureLayer({ url: 'http://localhost:6080/arcgis/rest/services/Pu/PB_/MapServer/11' }),
  //Main Issue here          
L.geoJSON(dataParcel),
    
    
          ]
        })
    
        
      }
        );
    
      //todo 
    
    
      return (
        <div id='mapdiv' style={{ width: '100%' }}>
        </div>
    
      )
    }

Answer 1

const dataParcel = axios.get 不是你想象的那样。 axios.get 是一个异步函数，因此 dataParcel 不是 Promise 返回的结果，而是 Promise 本身。您需要在正确的async/await syntax 中执行此操作。在 react-leaflet 中，这变得更加容易。您根本不需要使用 L.map，reat-leaflet 已经为您提供服务。

专门为你的数据获取创建一个组件，它将在挂载时获取数据，并在数据准备好时呈现一个 react-leaflet GeoJSON：

const MyData = () => {
  // create state variable to hold data when it is fetched
  const [data, setData] = React.useState();

  // useEffect to fetch data on mount
  useEffect(() => {
    // async function!
    const getData = async () => {
      // 'await' the data
      const response = await axios.get("url");
      // save data to state
      setData(response.data);
    };
    getData();
  }, []);

  // render react-leaflet GeoJSON when the data is ready
  if (data) {
    return <GeoJSON data={data} />;
  } else {
    return null;
  }
};


// Use your component in a MapContainer
const Map = (props) => {
  return (
    <MapContainer {...mapcontainerprops}>
      <MyData />
    </MapContainer>
  );
};

Working Codesandbox

_{另外，如果您在 react-leaflet 应用程序中使用 esri-leaflet 组件，则可以尝试react-esri-leaflet。}