react-simple-maps渲染农场TopoJSON交互地图异常问题咨询

渲染失败的缺失配置项 #

你遇到的渲染异常是三个配置错误共同导致的，按优先级修改即可：

• 投影不匹配：你导出的TopoJSON使用UTM平面坐标系，而react-simple-maps默认使用适配经纬度的等地球投影，完全不匹配本地小范围平面坐标。你需要替换为geoIdentity投影（适配平面坐标）或者对应你农场所在UTM区号的geoTransverseMercator投影，补充投影的中心点、旋转参数匹配你地块的实际坐标范围。
• 未指定TopoJSON解析对象：你的TopoJSON文件中几何数据存放在objects.Contorno_UTM字段下，Geographies组件默认不会自动识别该自定义字段，需要手动传入parseGeographies回调，从拓扑数据中提取对应字段的几何集合。
• 缩放和视口参数错误：当前projectionConfig的scale值仅为200，针对农场这种极小范围的地图，该值太小会导致地块缩放到视口外，需要将缩放值调至数千到数万量级，同时调整ZoomableGroup的center参数将地块平移到视口中心。

组件适配性说明 #

react-simple-maps完全适配你的业务场景，它底层基于d3-geo实现，支持自定义投影、地块交互、缩放平移等所有你需要的功能，是轻量实现自定义地块交互地图的最优选择之一。如果后续需要叠加卫星影像底图等更复杂的GIS功能，再考虑切换至重GIS类组件即可。

修改后的核心代码示例 #

修改时注意先安装topojson-client依赖用于拓扑数据解析，核心代码参考如下：

import React, { memo } from "react";
import { geoTransverseMercator } from "d3-geo";
import * as topojson from "topojson-client";
import {
  ZoomableGroup,
  ComposableMap,
  Geographies,
  Geography
} from "react-simple-maps";
import map from "./map.json";

// 自定义UTM投影，替换其中的中心坐标、旋转参数为你农场实际所在的UTM区参数
const customProjection = geoTransverseMercator()
  .rotate([-你的UTM中央经线, 0, 0])
  .center([0, 你农场的纬度])
  .scale(80000) // 根据实际显示大小调整
  .translate([800, 400]); // 视口居中偏移

const rounded = (num) => {
  return num.toFixed(2) + "公顷";
};

const MapChart = ({ setTooltipContent }) => {
  return (
    <>
      <ComposableMap 
        data-tip="" 
        projection={customProjection}
        width={1600}
        height={800}
      >
        <ZoomableGroup>
          <Geographies 
            geography={map}
            // 手动提取自定义的Contorno_UTM几何对象
            parseGeographies={(topology) => {
              return topojson.feature(topology, topology.objects.Contorno_UTM).features
            }}
          >
            {({ geographies }) =>
              geographies.map((geo) => (
                <Geography
                  key={geo.properties.id}
                  geography={geo}
                  onMouseEnter={() => {
                    const { id, area_ha } = geo.properties;
                    setTooltipContent(`${id} — ${rounded(area_ha)}`);
                  }}
                  onMouseLeave={() => {
                    setTooltipContent("");
                  }}
                  style={{
                    default: {
                      fill: "#D6D6DA",
                      outline: "none"
                    },
                    hover: {
                      fill: "#F53",
                      outline: "none"
                    },
                    pressed: {
                      fill: "#E42",
                      outline: "none"
                    }
                  }}
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
    </>
  );
};

export default memo(MapChart);

内容的提问来源于stack exchange，提问作者Cleiton Freitas