使用shpjs在Leaflet地图导入Shapefile遇nodebuffer不支持问题求解决

错误原因 #

你当前代码将File对象通过FileReader转成ArrayBuffer后传给shpjs，但shpjs在浏览器环境下，直接传入File/Blob对象会自动适配处理；而传入ArrayBuffer时会触发Node.js环境的Buffer逻辑，导致浏览器不兼容，从而抛出该错误。

修复方案 #

直接将选中的File对象传给shpjs，无需转成ArrayBuffer，具体代码修改如下：

简化版核心代码

const [geoJson, setGeoJson] = useState(null);

const onChangeFile = async ({ target }) => {
  const file = target.files[0];
  if (!file) return;
  try {
    // 直接传入File对象解析
    const parsedData = await shp(file);
    setGeoJson(parsedData);
    // 后续可将GeoJSON添加到Leaflet地图
  } catch (err) {
    console.error('解析失败:', err);
  }
};

完整React + Leaflet示例代码

import React, { useState, useEffect } from 'react';
import shp from 'shp';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const ShapefileMap = () => {
  const [geoJsonData, setGeoJsonData] = useState(null);
  const [leafletMap, setLeafletMap] = useState(null);

  // 初始化Leaflet地图
  useEffect(() => {
    const map = L.map('map-container').setView([39.9042, 116.4074], 11);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    setLeafletMap(map);
    return () => map.remove();
  }, []);

  // 当GeoJSON数据更新时，添加到地图
  useEffect(() => {
    if (!leafletMap || !geoJsonData) return;
    // 清除旧图层
    leafletMap.eachLayer(layer => {
      if (layer instanceof L.GeoJSON) leafletMap.removeLayer(layer);
    });
    // 添加新GeoJSON图层
    const geoLayer = L.geoJSON(geoJsonData).addTo(leafletMap);
    // 自动适配地图视野
    leafletMap.fitBounds(geoLayer.getBounds());
  }, [leafletMap, geoJsonData]);

  // 文件选择处理
  const handleFileChange = async ({ target }) => {
    const file = target.files[0];
    if (!file || !file.name.endsWith('.zip')) {
      alert('请选择有效的Shapefile压缩包（.zip格式）');
      return;
    }
    try {
      const geoJson = await shp(file);
      setGeoJsonData(geoJson);
    } catch (err) {
      console.error('Shapefile解析错误:', err);
      alert('解析失败，请检查文件是否完整包含.shp、.shx、.dbf等必要文件');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <input
        type="file"
        accept=".zip"
        onChange={handleFileChange}
        style={{ marginBottom: '10px' }}
      />
      <div id="map-container" style={{ width: '100%', height: '600px' }}></div>
    </div>
  );
};

export default ShapefileMap;

额外注意事项 #

• 上传的zip压缩包必须包含Shapefile的核心文件：.shp（几何数据）、.shx（索引文件）、.dbf（属性数据），缺少任一文件都会导致解析失败。
• 确保安装了正确的依赖包：npm install shp leaflet
• 若因特殊场景必须使用ArrayBuffer，可将其转成Blob后再传入：

  const geoJson = await shp.parseZip(new Blob([geoData]));
  

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