Блог

Стек : Reactjs, Листовки, EsriLeafletjs

Я пытаюсь отобразить один полигон в GeoJSON в контейнере карты листовки. Моя главная проблема заключается в том, что когда я использую Leaflet.GeoJSON(данные), он возвращает недопустимый объект 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:
                'amp;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>
    
      )
    }
 

const dataParcel = axios.get это не то, что вы думаете. axios.get является асинхронной функцией, поэтому dataParcel является не результатом того, что было возвращено из Обещания, а скорее самим обещанием. Вам нужно сделать это в правильном синтаксисе async/await. В react-листовке это делается еще проще. С вами вообще не нужно работать L.map , в листовке вы охвачены.

Создайте компонент специально для извлечения данных, который будет извлекать данные при монтировании, и отобразит 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>
  );
};
 

Рабочий Код и Коробка

_{Кроме того, для удовольствия, если вы работаете с компонентами esri-листовки в приложении react-листовки, вы можете попробовать react-esri-листовку.}