交互式农业地图

Question

在我的用例中，我需要创建交互式的农场地图，在这里我可以选择字段。我试图使用反应-简单-地图组件来完成这个任务。

所做的事

我在QGIS中创建了农场Shapfile文件映射。按照此TopoJSON使用Mapshaper转换为教程。

但是，映射没有正确呈现，请参见CodeSandbox。

我还能错过什么？

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

地图误差

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 }
        }
      ]
    }
  }
}

反应简单的地图组件

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
    }}