如何在ReactJS中通过Leaflet/react-leaflet读取加载压缩Shapefile

针对你使用的React 18.2.0、Leaflet 1.9.3、react-leaflet 4.1.0和shpjs 4.0.4版本，以下是适配的实现方案，解决旧示例版本不兼容的问题：

步骤1：确认依赖安装 #

确保已安装所有必要依赖（如果还没装）：

npm install react leaflet react-leaflet shpjs

步骤2：实现加载组件 #

创建一个可复用的组件，完成压缩Shapefile的加载、解析和渲染：

import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
import shp from 'shpjs';
import 'leaflet/dist/leaflet.css';

const ShapefileMap = () => {
  const [geoData, setGeoData] = useState(null);
  // 替换为你的压缩Shapefile路径（本地public目录或远程URL）
  const shapefileUrl = '/path/to/your/shapefile.zip';

  useEffect(() => {
    const loadShapefile = async () => {
      try {
        // 使用shpjs解析压缩Shapefile
        const geojson = await shp(shapefileUrl);
        setGeoData(geojson);
      } catch (error) {
        console.error('加载Shapefile失败:', error);
      }
    };

    loadShapefile();
  }, [shapefileUrl]);

  // 自定义GeoJSON样式
  const styleFunction = () => {
    return {
      fillColor: '#2E8B57',
      fillOpacity: 0.5,
      color: '#000',
      weight: 1
    };
  };

  return (
    <MapContainer
      center={[39.8283, -98.5795]} // 替换为你的地图初始中心点
      zoom={4}
      style={{ height: '80vh', width: '100%' }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      {geoData && (
        <GeoJSON data={geoData} style={styleFunction} />
      )}
    </MapContainer>
  );
};

export default ShapefileMap;

关键注意事项 #

• 路径处理：如果是本地Shapefile，将压缩包放在项目的public目录下，路径直接写/filename.zip即可；如果是远程资源，确保服务器配置了CORS允许跨域访问。
• 版本适配：react-leaflet v4.x使用MapContainer替代了旧版的Map组件，所有子组件（如TileLayer、GeoJSON）都需要作为MapContainer的子元素，不再使用withLeaflet高阶组件。
• 错误处理：添加了try/catch捕获加载过程中的错误，便于排查问题（比如文件路径错误、格式不兼容等）。

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