react-leaflet：添加一个 TopoJSON 层

IT技术 javascript reactjs leaflet topojson react-leaflet
2021-05-23 22:45:39

我刚开始使用 react-leaflet 库，并获得了一张地图以使用 geoJSON 层加载，但是我想改用 TopoJSON 层。

我知道可以像这样使用纯传单：https : //gist.github.com/rclark/5779673/。

但是我将如何使用 React-Leaflet 来做到这一点？

编辑

class MapViz extends React.Component {

    getStyle() {...};

    render() {
        const position = [x,y];
        var geoData = topojson.feature(test_topo,test_topo.objects).geometries;
        return (
            <Map id="my-map" center={position} zoom={10.2}>
                <TileLayer ... />
                <GeoJSON data={geoData} style={this.getStyle} />
            </Map>
        )
    }
}
2个回答

基于提供的 TopoJSON 层，可以为react-leaflet库引入以下用于呈现 TopoJSON 的组件

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

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

笔记：

用法

<Map center={[37.2756537,-104.6561154]} zoom={5}>
    <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
    />
     <TopoJSON
      data={data}
      />
</Map>

结果

在此处输入图片说明

这是一个现场演示

它与您链接的要点非常相似。您需要将 TopoJSON 转换为 GeoJSON 并像通常使用 GeoJSON 一样设置数据。它可以在你的渲染方法中

 import topojson from 'topojson';
 ....
 ....


render() {
  geoData = topojson.feature(topoData,topoData.objects).features;

  return (
    <LeafletMap>
      <GeoJson
        data={geoData}
      />
     </LeafletMap>
  ) 
}
其它你可能感兴趣的问题
上一篇ReactJS 发送 GET 请求，响应 302 重定向，收到 CORS 错误 下一篇TouchableWithoutFeedback 中断 ScrollView。如何在不将视图放入 ScrollView 的情况下修复？