在React中使用react-simple-maps调整地图大小

Question

我正在尝试使用react-simple-maps 显示法国地图。但是，我遇到了地图显得太小的问题。尽管尝试了CSS调整、修改宽度和高度属性以及使用ZoomableGroup等各种方法，但我一直无法成功地将其放大。有人可以帮我解决这个问题吗？

这是我的代码：

import { Page } from "@/components/ui/page";
import {
  ComposableMap,
  Geographies,
  Geography,
  ZoomableGroup,
} from "react-simple-maps";

const geoUrl =
  "https://france-geojson.gregoiredavid.fr/repo/departements.geojson";

export default () => {
  return (
    <Page className="gap-10 w-full">
      <Page.Header className="flex flex-col gap-4 items-start">
        <h1 className="mt-[70px] text-3xl">Carte</h1>
        <h2 className="text-xs text-dark opacity-65">Carte des departements</h2>
      </Page.Header>

      <Page.Body>
        <ComposableMap
          projectionConfig={{
            scale: 155,
          }}
          width={800}
          height={400}
          style={{ width: "100%", height: "auto" }}
        >
          <ZoomableGroup disablePanning zoom={1}>
            <Geographies geography={geoUrl}>
              {({ geographies }) =>
                geographies.map((geo) => (
                  <Geography key={geo.rsmKey} geography={geo} />
                ))
              }
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
      </Page.Body>
    </Page>
  );
};

这是图片：

Answer 1

这是我的第一个答案，但请耐心等待。我自己也面临着同样的问题，法国（和邻国）地图。我能够通过尝试不同的配置来解决这个问题，这对我有用：

<ComposableMap
    width={800}
    height={600}
    projection="geoMercator"
    projectionConfig={{
      scale: 900,
      center: [0, 52],
    }}
  >

我建议您执行以下操作： 首先确保你的比例尺是一个很小的值，（暂时不要使用可缩放组件），如果地图出现，无论多小，尝试增加比例尺值，看看它是否仍然出现或消失，（如果消失然后使用可缩放组件拖动并将其放在视图上，然后使用不同的配置重试）然后使用中心 [x,y] 数组定位地图，对我来说，我发现，将 x 居中于 0 对我有用，而且我只有调整 y 值以使其成为我的 div 的中心，这就是我的地图在我的配置中的显示方式：

法国及邻国地图