React-Leaflet+TypeScript渲染GeoJSON数据失败求助

问题1：传递test.features时的TypeScript类型错误 #

原因：test.features是Feature数组，但React-Leaflet的GeoJSON组件data属性要求传入单个GeoJsonObject类型（比如FeatureCollection、单个Feature或Geometry），直接传数组不符合类型定义。

解决方式二选一：

• 直接传递完整的test对象（它是标准的FeatureCollection，符合类型要求）
• 遍历test.features数组，为每个Feature单独渲染GeoJSON组件：

{this.state.geoJSON && test.features.map((feature, idx) => (
  <GeoJSON key={idx} attribution="NEOM Map Data" data={feature} />
))}

问题2：传递完整test.json时地图无内容 #

原因：地图中心设为[0,0]，但你的GeoJSON数据坐标范围是经度100-105、纬度0-1，缩放级别12下，这个中心完全不在数据覆盖范围内，导致看不到内容。

解决方式二选一：

方式1：手动调整地图中心和缩放 #

直接把地图中心设为数据的大致中心，缩放级别调低：

<MapContainer style={{height: 400, width: 600}} zoom={6} center={[0.5, 102.5]}>
  {this.state.geoJSON && <GeoJSON attribution="NEOM Map Data" data={test} />}
</MapContainer>

方式2：动态适配GeoJSON边界 #

通过Leaflet的API计算数据边界，自动调整地图视图（类组件示例）：

import { MapContainer, GeoJSON, useMap } from 'react-leaflet';
import { useEffect } from 'react';

// 自定义组件用于适配边界
const FitBoundsControl = ({ data }) => {
  const map = useMap();
  useEffect(() => {
    const bounds = window.L.geoJSON(data).getBounds();
    map.fitBounds(bounds);
  }, [map, data]);
  return null;
};

// 地图组件中使用
<MapContainer style={{height: 400, width: 600}}>
  {this.state.geoJSON && (
    <>
      <GeoJSON attribution="NEOM Map Data" data={test} />
      <FitBoundsControl data={test} />
    </>
  )}
</MapContainer>

完整修正后的类组件代码 #

import React, { Component } from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
import test from "../test.json";
import 'leaflet/dist/leaflet.css';

class MapComponent extends Component {
  state = {
    geoJSON: true
  };

  render() {
    return (
      <MapContainer style={{height: 400, width: 600}} zoom={6} center={[0.5, 102.5]}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; OpenStreetMap contributors'
        />
        {this.state.geoJSON && <GeoJSON attribution="NEOM Map Data" data={test} />}
      </MapContainer>
    );
  }
}

export default MapComponent;

⚠️ 注意：必须引入Leaflet的CSS文件，否则地图会出现样式异常。

内容的提问来源于stack exchange，提问作者xw-liron