使用react-simple-maps渲染法国地图尺寸过小的问题求助

你的代码里有几个关键参数设置不合理，导致地图显示过小，直接按下面的修改调整即可：

关键修改点 #

• 增大投影缩放比例：projectionConfig.scale值过低，直接调高到合适数值
• 添加地图中心定位：确保法国区域居中显示，避免放大后地图偏移
• 优化ZoomableGroup的缩放值：提升zoom参数实现进一步放大
• 统一尺寸配置：避免width/height属性与style设置冲突

修改后的完整代码 #

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: 6000, // 大幅提升缩放比例，适配法国地图
            center: [2.2137, 46.2276] // 法国地理中心经纬度，确保地图居中
          }}
          style={{ width: "100%", height: "600px" }} // 固定高度，宽度自适应
        >
          <ZoomableGroup zoom={1.2}> {/* 适度提升缩放值，可根据需求调整 */}
            <Geographies geography={geoUrl}>
              {({ geographies }) =>
                geographies.map((geo) => (
                  <Geography key={geo.rsmKey} geography={geo} />
                ))
              }
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
      </Page.Body>
    </Page>
  );
};

额外说明 #

• scale值可以根据你的容器大小进一步调整（数值越大，地图显示越大）
• 如果需要允许用户手动缩放/拖拽，可移除ZoomableGroup的disablePanning属性，并添加onZoomChange等事件监听
• 若要保持高度自适应，可以把style里的height设为auto，但建议给容器设置最小高度避免显示异常

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