Добавление заархивированных шейп-файлов на карту React-Leaflet

Я хотел бы добавить шейп-файлы в заархивированной папке на карту листовок React. Я попытался преобразовать их в формат JSON и прочитать их с помощью этого пакета = ›https://www.npmjs.com/package/react-leaflet-shapefile Я не получаю никаких ошибок, но на карте ничего не отображается. Однако, когда я загружаю файл JSON на https://mapshaper.org/, формы становятся видимыми.


react-leaflet shapefile
person Priscilla Adong    schedule 30.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете создать свой собственный react-leaflet компонент, используя библиотеку shpjs, чтобы загрузить шейп-файл с помощью React & Leaflet.

Установите shpjs, используя npm i shpjs --save

Затем создайте Shapefile comp:

...
import { useLeaflet } from "react-leaflet";
import L from "leaflet";
import shp from "shpjs";

function Shapefile({ zipUrl }) {
  const { map } = useLeaflet();

  useEffect(() => {
    const geo = L.geoJson(
      { features: [] },
      {
        onEachFeature: function popUp(f, l) {
          var out = [];
          if (f.properties) {
            for (var key in f.properties) {
              out.push(key + ": " + f.properties[key]);
            }
            l.bindPopup(out.join("<br />"));
          }
        }
      }
    ).addTo(map);

    shp(zipUrl).then(function (data) {
      geo.addData(data);
    });
  }, []);

  return null;
}

Затем используйте его как дочерний элемент в компоненте Map от response-leaflet:

 ...
 import zipUrl from "./TM_WORLD_BORDERS_SIMPL-0.3.zip";
 import Shapefile from "./Shapefile";
  ...

<Map center={position} zoom={13} style={{ height: "100vh" }} ref={mapRef}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Shapefile zipUrl={zipUrl} />
    </Map>

Демо

person kboul    schedule 25.08.2020
comment
Я не понимаю, как вам удалось распаковать / прочитать zip-файл, чтобы обработать его ... Кроме того, не могли бы вы добавить кнопку загрузки в свою демонстрацию, чтобы выбрать, какой zip-файл вы хотите обработать? - person polycodor; 12.03.2021