两个实用地图开源工具推荐：3D 可视化大屏 & 卫星底图下载器
近期发现了两个基于现代前端技术栈的地图相关开源项目，分别解决了3D 地图可视化展示和卫星瓦片底图下载两个不同场景的需求，在此推荐。
一、sc-datav：Three.js 3D 地图可视化大屏
GitHub：knight-L/sc-datav （590 Stars, 178 Forks, Apache-2.0）
在线预览：knight-l.github.io/sc-datav
项目简介
一个基于 Three.js + React 19 + ECharts 的 3D 地图可视化大屏项目，包含 3D 地图渲染、轮廓飞线、侧边扫光、多图表联动等丰富功能。以四川省地理轮廓为示例，精确呈现 3D 地图效果。
功能特性
- 3D 地图可视化：基于 Three.js 的 3D 地图渲染，轮廓飞线动画效果，侧边扫光视觉效果
- 省级地图展示：四川省地理轮廓精确呈现
- 多图表联动：柱状图、折线图等多种数据可视化形式
- 响应式设计：支持多种屏幕尺寸自适应
- 实时调试面板：使用 Leva 实现参数实时调整
技术栈
| 类别 | 技术 |
|---|---|
| 核心框架 | React 19 + TypeScript |
| 构建工具 | Vite (Rolldown 版本) |
| 3D 可视化 | Three.js + @react-three/fiber + @react-three/drei |
| 数据可视化 | ECharts |
| 地理数据处理 | D3-geo |
| 动画库 | GSAP |
| 样式库 | Styled-components |
| 调试工具 | Leva |
| 自适应布局 | autofit.js |
项目结构
src/
├── assets/ # 静态资源文件
│ ├── sc.json # 四川省地理数据
│ └── sc_outline.json # 四川省轮廓数据
├── components/ # 通用组件
│ ├── chart.tsx # 图表组件
│ └── seamVirtualScroll.tsx # 虚拟滚动组件
├── hooks/ # 自定义Hooks
├── pages/SCDataV/ # 数据大屏页面
│ ├── index.tsx # 页面入口
│ ├── scMap.tsx # 地图组件
│ ├── flyLine.tsx # 飞线动画组件
│ ├── chart1.tsx # 图表1
│ ├── chart2.tsx # 图表2
│ ├── chart3.tsx # 图表3
│ └── content.tsx # 内容布局组件
└── App.tsx # 应用根组件快速启动
pnpm install
pnpm dev # 启动开发服务器
pnpm build # 构建生产版本二、sat-hunter：卫星瓦片底图下载器
GitHub：knight-L/sat-hunter （90 Stars, 31 Forks, Apache-2.0）
在线预览：knight-l.github.io/sat-hunter
项目简介
基于 Vue 3 和 Leaflet 的在线卫星瓦片底图下载工具。支持多源底图（高德、Google、ESRI 等），可按行政区划搜索或矩形框选区域，自定义缩放级别，自动下载拼接并导出为图片。
主要功能
- 多源底图支持：高德卫星地图、Google 卫星地图、ESRI 影像（Imagery / Firefly / Light & Dark Gray）、地形图（Hill Shade）
- 灵活的选区模式：
- 区域轮廓下载：按行政区划（省、市、区/县）搜索并自动选中轮廓范围
- 矩形框选下载：画图工具自由绘制矩形框进行下载
- 自定义缩放级别：支持 6-18 级缩放级别调整，满足不同精度需求
- 实时预览与估算：实时显示瓦片数量估算，大数据量警告（>1000 张提示，>1500 张限制下载）
- 自动拼接下载：后端自动获取所有切片并在前端 Canvas 中拼接，一键导出为图片
- 暗色模式：支持 Dark Mode，根据系统设置自动切换或手动切换
技术栈
| 类别 | 技术 |
|---|---|
| 前端框架 | Vue 3 + TypeScript |
| 构建工具 | Vite |
| 样式库 | Tailwind CSS |
| 地图引擎 | Leaflet |
| 绘图插件 | Leaflet-Geoman |
快速启动
pnpm install
pnpm dev # 启动开发服务器（默认 http://localhost:5173）
pnpm build # 构建生产版本使用指南
- 选择底图：在左侧设置面板底部，点击选择底图风格（如"高德卫星"或"Google 卫星"）
- 确定范围：
- 区域搜索：在"按区域轮廓下载"输入框中输入城市名称（如"北京市"），选择对应行政区
- 手动框选：点击地图左侧工具栏的矩形图标，在地图上拖拽画出矩形框
- 调整精度：拖动"缩放级别"滑块，级别越高地图越清晰，瓦片数量也越多。建议关注"预计瓦片"数量，控制在 1000 张以内
- 开始下载：点击"开始下载"，系统自动下载并拼接，完成后弹出图片保存对话框
两个项目的互补关系
这两个项目可以很好地配合使用：
- sat-hunter 负责下载指定区域的卫星底图瓦片并拼接为高精度图片
- sc-datav 负责将地理数据以 3D 可视化的方式呈现，支持飞线、扫光等酷炫效果
典型工作流：先用 sat-hunter 获取目标区域的卫星底图作为纹理贴图素材，再将其集成到 sc-datav 的 3D 地图大屏中，实现更加真实震撼的展示效果。两个项目均使用 TypeScript + Vite 技术栈，开发体验一致，且均以 Apache-2.0 开源。
