要在纯前端（无后端依赖）环境中实现：

  1. 将 GeoJSON 转换为 Shapefile（SHP）格式
  2. 将生成的 SHP 相关文件（.shp, .shx, .dbf, .prj）打包成 ZIP
  3. 并允许用户下载该 ZIP 文件

你可以结合以下前端库来实现完整流程：

✅ 所需库

库名作用CDN
terraformerGeoJSON 与其他格式的转换工具https://unpkg.com/terraformer@1.0.12
shp-write将 GeoJSON 转换成 shapefile 文件https://unpkg.com/shp-write@latest
jszip创建并打包 ZIP 文件https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js
file-saver下载生成的 zip 文件https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js

💻 实现核心逻辑（示例代码）

你可以将以下代码直接放在前端 HTML 文件中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GeoJSON to SHP ZIP</title>
  <script src="https://unpkg.com/shp-write@latest/shpwrite.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
  <button onclick="downloadShape()">下载Shapefile ZIP</button>

  <script>
    function downloadShape() {
      // 示例 GeoJSON FeatureCollection
      const geojson = {
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "properties": { "name": "示例点" },
            "geometry": {
              "type": "Point",
              "coordinates": [113.323, 23.097]
            }
          }
        ]
      };

      // 生成 shapefile buffer
      const options = {
        folder: 'shapefile',
        types: {
          point: 'Points'
        }
      };

      const zip = shpwrite.zip(geojson, options);

      // 使用 FileSaver 下载
      saveAs(zip, "shapefile.zip");
    }
  </script>
</body>
</html>

📂 最终 ZIP 包内容

shp-write 自动生成以下文件：

文件名描述
.shp几何数据（如点、线、多边形）
.shx索引文件
.dbf属性数据
.prj投影信息（默认为 WGS84）

📝 注意事项

  1. 纯前端无法写入文件系统，只能借助 Blob + FileSaver 来触发浏览器下载；
  2. shp-write 支持 Point、LineString、Polygon，不支持 GeometryCollection；
  3. shp-write 默认编码为 UTF-8，中文属性字段可能在旧版 GIS 软件中乱码；
  4. shp-write 所生成的 .prj 投影默认是 WGS 84（EPSG:4326）；
  5. Mapbox 与此流程无直接关系，GeoJSON 只需从 Mapbox 中获取即可（如通过 map.querySourceFeatures()）。

🔄 示例：从 Mapbox 导出图层为 SHP ZIP

假设你已在 Mapbox GL JS 地图上绘制了一些图形（例如用 draw 插件），你可以这样获取并转换：

const features = map.queryRenderedFeatures(); // 或从 Mapbox Draw 获取 GeoJSON
const geojson = {
  type: "FeatureCollection",
  features: features
};
const zip = shpwrite.zip(geojson);
saveAs(zip, "drawn_shapes.zip");

✅ 效果演示页面（可选）

你可以将这段代码部署为一个静态页面，供用户在前端完成绘图并一键导出为 ZIP 文件，适用于：

  • 城市标注导出
  • 地图工具绘制数据保存
  • GIS 学生项目提交

如需扩展支持自定义字段、投影选择、属性编辑界面等，也可以进一步集成 Vue 或 React + ShpWrite + Turf.js 来构建更复杂的工具。