Рендеринг Topo JSON с реактивной листовкой

Question

Я использовал файл Geo Json для карты реактивных листовок, но файл был слишком большим, и мне прислали файл Topo Json. Существует не так много информации о том, как использовать это с реактивной листовкой.

Это мой код -

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

const topoJson = require("./assets/topo.json");

<Map center={[36.778259, -119.417931]} zoom={4}>
   <TileLayer
     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
   />
   <GeoJSON data={topoJson} />
</Map>

Это ошибка при визуализации - Ошибка : Недопустимый объект Geo JSON.

Любые идеи или отзывы о том, как использовать файл topo Json во время использования библиотекиact-leaflet, спасибо!

Answer 1

GeoJSON компонент из react-leflet не поддерживает рендеринг Topo JSON, может быть введен следующий компонент (который расширяет GeoJSON компонент и использует topojson) в этом отношении:

import React, { useRef, useEffect } from "react";
import { GeoJSON, withLeaflet } from "react-leaflet";
import * as topojson from "topojson";

function TopoJSON(props) {
  const layerRef = useRef(null);
  const { data, ...defProps } = props;

  function addData(layer, jsonData) {
    if (jsonData.type === "Topology") {
      for (let key in jsonData.objects) {
        let geojson = topojson.feature(jsonData, jsonData.objects[key]);
        layer.addData(geojson);
      }
    } else {
      layer.addData(jsonData);
    }
  }

  useEffect(() => {
    const layer = layerRef.current.leafletElement;
    addData(layer, props.data);
  }, []);

  return <GeoJSON ref={layerRef} {...defProps} />;
}

export default withLeaflet(TopoJSON);

Демонстрация в реальном времени

Us States Topo JSON file

Результат

Обновление Существует зависимость от пакета topojson, но с тех пор он устарел, topojson-client используется вместо