交互式农场地图

Question

在我的用例中，我需要创建交互式农场地图，我可以在其中 select 田地。我正在尝试使用 react-simple-maps 组件来执行此操作。

做了什么

我在 QGIS 中创建了农场 Shapfile 地图。使用 Mapshaper as per this tutorial.

转换为 TopoJSON

但是地图没有正确呈现，请参阅 CodeSandbox。

我可以缺少什么？

在这种情况下，这是最好的组件吗？

Map error

TopoJSON 地图

{
  "type": "Topology",
  "arcs": [
    [
      [0, 62],
      [51, 60],
      [60, -46],
      [-85, -76],
      [-26, 62]
    ],
    [
      [112, 77],
      [-60, 44],
      [92, 110],
      [57, -40],
      [0, -2],
      [-66, -60],
      [14, -19],
      [-37, -33]
    ]
  ],
  "transform": {
    "scale": [15.721852200470671, 19.17233904106825],
    "translate": [-65942.30731638917, 8482615.288037943]
  },
  "objects": {
    "Contorno_UTM": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "arcs": [[0]],
          "type": "Polygon",
          "properties": { "id": 1, "area_ha": 197.4585 }
        },
        {
          "arcs": [[1]],
          "type": "Polygon",
          "properties": { "id": 2, "area_ha": 299.0857 }
        }
      ]
    }
  }
}

React 简单地图组件

import React, { memo } from "react";
import {
  ZoomableGroup,
  ComposableMap,
  Geographies,
  Geography
} from "react-simple-maps";
import map from "./map.json";

const geoUrl = map;

const rounded = (num) => {
  if (num > 1000000000) {
    return Math.round(num / 100000000) / 10 + "Bn";
  } else if (num > 1000000) {
    return Math.round(num / 100000) / 10 + "M";
  } else {
    return Math.round(num / 100) / 10 + "K";
  }
};

const MapChart = ({ setTooltipContent }) => {
  return (
    <>
      <ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
        <ZoomableGroup>
          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map((geo) => (
                <Geography
                  key={geo.rsmKey}
                  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);

Answer 1

我设法解决了，问题在项目的SRC configuration，是UTM，正确的是WGS 84，我改了，导出在GeoJSON格式并使用 Mapshaper 转换为 TopoJSON，更改了投影和旋转，现在一切正常，如您在 CodeSandbox.

中所见

projection="geoAzimuthalEqualArea"
    projectionConfig={{
      rotate: [56.22, 13.66, 0],
      scale: 360000
    }}

交互式农场地图

Interactive farm maps

qgis

reactjs

mapshaper

react-simple-maps