如何在 React 传单 MapContainer 中呈现 geojson 多边形？

Question

堆栈：Reactjs、Leafletjs、EsriLeafletjs

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

请看...

我的 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.}

如何在 React 传单 MapContainer 中呈现 geojson 多边形？

How to render geojson polygon in React leaflet MapContainer?

geojson

leaflet

reactjs

react-leaflet

Working Codesandbox