在React应用中实现浏览器端Shapefile到GeoJSON的转换

npm install shpjs
# 或者
yarn add shpjs

import shp from "shpjs";

/**
 * 从压缩的Shapefile中解析并提取地理数据
 * @param {FileList} files - 包含地理空间数据（压缩Shapefile）的文件列表
 * @param {boolean} [featureCollection=false] - 确定返回FeatureCollection对象还是仅返回Features数组
 * @returns {Promise<{hasError: boolean, errorMessage: string | null, data: any | null}>} - 包含解析结果、错误信息和数据的对象
 */
const extractShapes = async (files: FileList, featureCollection: boolean = false) => {
  let result: { hasError: boolean; errorMessage: string | null; data: any | null } = {
    hasError: false,
    errorMessage: null,
    data: null,
  };

  // 辅助函数：根据featureCollection参数格式化数据
  const _formatShape = (_data: any) => {
    return featureCollection ? _data : _data.features;
  };

  // 辅助函数：解析单个文件
  const _parseFile = async (_file: File) => {
    let _result: { hasError: boolean; errorMessage: string | null; data: any | null } = {
      hasError: false,
      errorMessage: null,
      data: null,
    };

    // 将文件读取为ArrayBuffer，然后使用shpjs解析
    let _data = await _file
      .arrayBuffer()
      .then((_buffer) => shp(_buffer))
      .catch((_err) => {
        console.error("文件解析错误:", _err);
        _result.hasError = true;
        _result.errorMessage = "IMPORT_UNRECOGNISED_FILE"; // 文件类型无法识别或解析失败
        return null;
      });

    if (_result.hasError || !_data) {
      return _result;
    }

    _result.data = _formatShape(_data);

    if (!_result.data || _result.data.length < 1) {
      _result.hasError = true;
      _result.errorMessage = "EXTRACT_FILE_EMPTY"; // 提取的数据为空
    }

    return _result;
  };

  // 遍历所有文件并并行解析
  const parsedFiles = await Promise.all(
    Array.from(files).map(_parseFile)
  ).catch((err) => {
    console.error("文件处理过程中发生错误:", err);
    result.hasError = true;
    result.errorMessage = "Extract went wrong"; // 整体提取过程出错
    return null;
  });

  if (result.hasError || !parsedFiles) {
    return result;
  }

  // 检查是否有任何文件解析失败
  const firstError = parsedFiles.find(p => p.hasError);
  if (firstError) {
      return firstError; // 返回第一个遇到的错误
  }

  // 假设我们只处理单个Shapefile，返回第一个文件的GeoJSON数据
  // 如果需要处理多个，可以根据需求合并或返回数组
  if (parsedFiles.length < 1 || !parsedFiles[0].data) {
      result.hasError = true;
      result.errorMessage = "IMPORT_SHAPE_EMPTY"; // 未能提取到Shapefile数据
      return result;
  }

  result.data = parsedFiles[0].data;
  return result;
};

export { extractShapes };

import React from 'react';
import { extractShapes } from './utils/shp-parser'; // 假设你的extractShapes函数在'./utils/shp-parser.ts'

interface AppState {
  geoJsonData: any | null;
  error: string | null;
  loading: boolean;
}

class App extends React.PureComponent<{}, AppState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      geoJsonData: null,
      error: null,
      loading: false,
    };
  }

  async handleFileUpload(files: FileList | null) {
    if (!files || files.length === 0) {
      this.setState({ error: "请选择一个文件。", geoJsonData: null });
      return;
    }

    this.setState({ loading: true, error: null, geoJsonData: null });

    try {
      const result = await extractShapes(files, true); // 转换为FeatureCollection

      if (result.hasError) {
        this.setState({ error: `文件解析失败: ${result.errorMessage}`, geoJsonData: null });
      } else if (result.data) {
        this.setState({ geoJsonData: result.data, error: null });
        console.log("成功解析GeoJSON数据:", result.data);
        // 在这里可以将geoJsonData用于地图渲染或其他操作
      } else {
        this.setState({ error: "未能从文件中提取到任何数据。", geoJsonData: null });
      }
    } catch (err) {
      console.error("文件上传和解析过程中发生未知错误:", err);
      this.setState({ error: "处理文件时发生未知错误。", geoJsonData: null });
    } finally {
      this.setState({ loading: false });
    }
  }

  render() {
    const { geoJsonData, error, loading } = this.state;

    return (
      <div className="App" style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
        <header className="App-header">
          <h1>Shapefile上传与GeoJSON转换</h1>
          <p>
            请选择一个压缩的Shapefile (.zip) 进行上传和转换。
          </p>
          <input
            id="fileInput"
            type="file"
            accept=".zip" // 限制只接受zip文件
            multiple={false} // 通常Shapefile是一个压缩包，只允许上传一个
            onChange={(e) => this.handleFileUpload(e.target.files)}
            style={{ marginBottom: '20px' }}
          />
        </header>

        {loading && <p>正在解析文件，请稍候...</p>}
        {error && <p style={{ color: 'red' }}>错误: {error}</p>}

        {geoJsonData && (
          <div>
            <h2>GeoJSON 数据预览:</h2>
            <pre style={{
              backgroundColor: '#f4f4f4',
              padding: '10px',
              borderRadius: '5px',
              maxHeight: '400px',
              overflowY: 'auto',
              whiteSpace: 'pre-wrap',
              wordBreak: 'break-all'
            }}>
              {JSON.stringify(geoJsonData, null, 2)}
            </pre>
          </div>
        )}
      </div>
    );
  }
}

export default App;