Javascript 用react传单呈现TopoJSON

我一直在为react传单地图使用GeoJson文件，但该文件太大，我收到了一个TopoJson文件。关于如何在react传单中使用此功能的信息不多

这是我的密码-

从“react传单”导入{Map，TileLayer，GeoJSON}

const-topoJson=require（“./assets/topo.json”）



这是渲染时的错误-错误：无效的GeoJSON对象。

关于如何在使用react传单库时使用topoJson文件的任何想法或反馈，谢谢
 
GeoJSON
来自
react-leflet
的组件不支持呈现TopoJSON，因此可以引入以下组件（扩展
GeoJSON
组件并使用）：

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);

import React，{useRef，useffect}来自“React”；
从“react传单”中导入{GeoJSON，WithFailate}；
从“topojson”导入*作为topojson；
函数TopoJSON（props）{
const layerRef=useRef（空）；
常量{data，…defProps}=props；
函数addData（层，jsonData）{
if（jsonData.type==“拓扑”）{
for（输入jsonData.objects）{
让geojson=topojson.feature（jsonData，jsonData.objects[key]）；
layer.addData（geojson）；
}
}否则{
layer.addData（jsonData）；
}
}
useffect（（）=>{
常量层=layerRef.current.Element；
添加数据（图层、道具数据）；
}, []);
返回；
}
使用传单导出默认值（TopoJSON）；



结果


更新
存在对
topojson
包的依赖关系，但由于现在它已被弃用，因此被使用
 谢谢你，我在发布的那天用topojson客户端修复了这个问题，这与你上面所做的非常相似，谢谢你的帮助。我正试图找出如何添加其他功能，当使用react单张而不是普通单张时，我发现这非常困难。例如，添加一个传奇几乎是不可能的…@Andrew，很高兴知道。事实上，实现react传单的定制功能可能并不是那么简单，可以作为起点。关于图例，P.S.最近还参与了可视化choropleth地图和实施
react传单
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);