使用 react-leaflet 渲染 TopoJSON

Question

我一直在使用 GeoJson 文件作为 react-leaflet 地图，但文件太大，我收到了一个 TopoJson 文件。关于如何将其与 react-leaflet 一起使用的信息不多。

这是我的代码 -

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>

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

关于在使用 react-leaflet 库时如何使用 topoJson 文件的任何想法或反馈，谢谢！

Answer 1

来自 react-leflet 的

GeoJSON 组件不支持呈现 TopoJSON，为此可以引入以下组件（扩展 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);

Live demo

Us States TopoJSON file

结果

更新 topojson 包有依赖性，但由于现在它已被弃用，因此使用 topojson-client 代替。

使用 react-leaflet 渲染 TopoJSON

Rendering TopoJSON with react-leaflet

javascript

leaflet

topojson

reactjs

react-leaflet