如何让react-simple-maps中选中的州放大至铺满地图？

一、基于react-simple-maps的优化方案 #

当前代码的核心问题是切换GeoJSON数据源后，未调整地图的中心坐标与缩放级别，导致选中州无法铺满视图。通过结合d3-geo工具计算地理边界与中心，配合动态设置地图视图参数，可实现需求：

修改后的完整代码 #

import React, { useState } from "react";
import {
  ComposableMap,
  Geographies,
  Geography,
  Marker
} from "react-simple-maps";
import { stateCodes } from "./data/allstates";
import { geoCentroid, geoBounds, scaleLinear } from "d3-geo";

const baseUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";

const MapChart = () => {
  const [geoUrl, setGeoUrl] = useState(baseUrl);
  const [selectedState, setSelectedState] = useState(null);
  const [mapView, setMapView] = useState({ center: [0, 0], zoom: 1 });
  const events = [
    {
      type: "Security",
      occurance: 30,
      coordinates: [-74.006, 40.7128]
    }
  ];

  // 计算选中州的中心坐标与适配容器的缩放比例
  const calcMapView = (geo) => {
    const centroid = geoCentroid(geo);
    const bounds = geoBounds(geo);
    const containerWidth = 800;
    const containerHeight = 600;

    // 根据边界宽度计算缩放值，确保州铺满容器
    const widthDiff = bounds[1][0] - bounds[0][0];
    const heightDiff = bounds[1][1] - bounds[0][1];
    const maxDiff = Math.max(widthDiff, heightDiff);
    const zoom = scaleLinear()
      .domain([0, maxDiff])
      .range([containerWidth * 0.9, containerWidth])
      (maxDiff);

    return { center: centroid, zoom };
  };

  const handleClick = (geo) => {
    if (selectedState === geo.properties.name) {
      // 返回全国视图
      setGeoUrl(baseUrl);
      setSelectedState(null);
      setMapView({ center: [0, 0], zoom: 1 });
    } else {
      // 切换到选中州视图
      setSelectedState(geo.properties.name);
      const stateGeoUrl = `https://raw.githubusercontent.com/johan/world.geo.json/master/countries/USA/${stateCodes[geo.properties.name]}.geo.json`;
      setGeoUrl(stateGeoUrl);
      setMapView(calcMapView(geo));
    }
  };

  return (
    <div className="card flex flex-row map-container">
      <div className="map" style={{ width: "800px", height: "600px" }}>
        <ComposableMap
          projection="geoAlbersUsa"
          center={mapView.center}
          zoom={mapView.zoom}
          style={{ transition: "zoom 0.5s, center 0.5s" }}
        >
          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map((geo) => (
                <Geography
                  onClick={() => handleClick(geo)}
                  key={geo.rsmKey}
                  geography={geo}
                  stroke="#FFF"
                  fill={selectedState === geo.properties.name ? "#2F85EB" : "#DDD"}
                />
              ))
            }
          </Geographies>
          {events.map((event, index) => (
            <Marker key={index} coordinates={event.coordinates}>
              <circle
                r={2 + event.occurance * 0.3}
                fill="#2F85EB80"
                stroke="#fff"
                strokeWidth={2}
              />
            </Marker>
          ))}
        </ComposableMap>
      </div>
    </div>
  );
};

export default MapChart;

关键改进点 #

1. 新增mapView状态维护地图中心与缩放值，配合CSS过渡实现平滑动画
2. 用d3-geo的geoCentroid获取州中心坐标，geoBounds计算边界范围，动态生成适配容器的缩放比例
3. 维护selectedState状态，实现选中州高亮与视图切换逻辑

二、替代方案：使用Leaflet（更适合复杂地图交互） #

如果不局限于react-simple-maps，Leaflet是更成熟的选择，原生支持地图缩放、边界适配，且有丰富插件支持地址解析（添加定位标记）：

实现代码 #

import React, { useState, useEffect } from "react";
import { MapContainer, TileLayer, GeoJSON, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { stateCodes } from "./data/allstates";

// 修复Leaflet默认图标加载问题
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
  iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
  shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png"
});

const baseGeoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";

const MapChart = () => {
  const [geoData, setGeoData] = useState(null);
  const [selectedStateGeo, setSelectedStateGeo] = useState(null);
  const [mapInstance, setMapInstance] = useState(null);
  const events = [
    {
      type: "Security",
      occurance: 30,
      coordinates: [40.7128, -74.006] // Leaflet使用[纬度, 经度]格式
    }
  ];

  // 加载全国州地图数据
  useEffect(() => {
    fetch(baseGeoUrl)
      .then(res => res.json())
      .then(data => setGeoData(data));
  }, []);

  // 加载选中州的地图数据并适配视图
  const loadStateGeo = (stateName) => {
    const stateCode = stateCodes[stateName];
    fetch(`https://raw.githubusercontent.com/johan/world.geo.json/master/countries/USA/${stateCode}.geo.json`)
      .then(res => res.json())
      .then(data => {
        setSelectedStateGeo(data);
        const bounds = L.geoJSON(data).getBounds();
        mapInstance.fitBounds(bounds);
      });
  };

  const handleStateClick = (e) => {
    const stateName = e.feature.properties.name;
    if (selectedStateGeo) {
      // 返回全国视图
      setSelectedStateGeo(null);
      mapInstance.fitBounds(L.geoJSON(geoData).getBounds());
    } else {
      loadStateGeo(stateName);
    }
  };

  return (
    <div className="card flex flex-row map-container">
      <div className="map" style={{ width: "800px", height: "600px" }}>
        <MapContainer
          center={[37.0902, -95.7129]} // 美国地理中心坐标
          zoom={4}
          style={{ height: "100%", width: "100%" }}
          whenCreated={setMapInstance}
        >
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          />
          {/* 全国州图层 */}
          {geoData && !selectedStateGeo && (
            <GeoJSON
              data={geoData}
              style={{ fillColor: "#DDD", color: "#FFF", weight: 2 }}
              onClick={handleStateClick}
            />
          )}
          {/* 选中州图层 */}
          {selectedStateGeo && (
            <GeoJSON
              data={selectedStateGeo}
              style={{ fillColor: "#2F85EB", color: "#FFF", weight: 2 }}
              onClick={handleStateClick}
            />
          )}
          {/* 事件标记 */}
          {events.map((event, index) => (
            <Marker key={index} position={event.coordinates}>
              <Popup>
                <h3>{event.type}</h3>
                <p>发生次数: {event.occurance}</p>
              </Popup>
            </Marker>
          ))}
        </MapContainer>
      </div>
    </div>
  );
};

export default MapChart;

优势说明 #

• 原生支持fitBounds方法，一键实现选中区域铺满视图
• 生态丰富，可通过leaflet-geocoder插件快速实现地址解析添加标记
• 地图交互体验更流畅，支持拖拽、滚轮缩放等原生操作

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