geo/README.md

186 lines
5.2 KiB
Markdown
Raw Permalink Normal View History

2025-07-31 16:12:17 +08:00
# Vue 3 + ArcGIS + 天地图分屏对比项目
这是一个基于Vue 3和ArcGIS API for JavaScript的天地图分屏对比项目。项目实现了同时显示矢量地图和影像地图的分屏功能支持多种交互和动画效果。
## ✨ 功能特点
### 🗺️ 地图功能
- ✅ 天地图矢量地图和影像地图加载
- ✅ 普通地图模式:支持图层切换
-**分屏对比模式**:同时显示两种地图类型
- ✅ 垂直/水平分割方向切换
- ✅ 可拖拽调整分割比例
### 🎮 交互控制
- ✅ 分割线位置实时显示
- ✅ 一键重置到中间位置
- ✅ 预设布局快速切换
- ✅ 平滑动画过渡效果
- ✅ 摆动演示动画
### 🎨 界面设计
- ✅ 响应式设计,适配移动端
- ✅ 现代化UI控件
- ✅ 实时状态显示
- ✅ 直观的操作反馈
## 🚀 快速开始
### 1. 安装依赖
```bash
npm install
```
### 2. 配置天地图API Key
**重要需要天地图API Key才能正常显示地图**
编辑 `src/config/tianditu.js`
```javascript
export const TIANDITU_CONFIG = {
API_KEY: '你的天地图API_KEY', // 替换这里
// ... 其他配置
}
```
获取API Key
1. 访问 [天地图开发者控制台](https://console.tianditu.gov.cn/)
2. 注册并创建应用
3. 获取API Key
详细配置说明:[TIANDITU_SETUP.md](./TIANDITU_SETUP.md)
### 3. 启动开发服务器
```bash
npm run dev
```
访问 http://localhost:5173
### 4. 构建生产版本
```bash
npm run build
```
## 📁 项目结构
```
geo/
├── src/
│ ├── components/
│ │ ├── TiandituMap.vue # 普通天地图组件
│ │ ├── SplitScreenMap.vue # 分屏对比组件
│ │ └── HelloWorld.vue # 示例组件
│ ├── config/
│ │ └── tianditu.js # 天地图配置
│ ├── utils/
│ │ └── splitScreen.js # 分屏工具类 ⭐
│ ├── App.vue # 主应用(模式切换)
│ └── main.js # 应用入口
├── TIANDITU_SETUP.md # 天地图配置指南
├── SPLIT_SCREEN_GUIDE.md # 分屏功能使用指南 ⭐
├── vite.config.js # Vite配置ArcGIS支持
└── package.json
```
## 🎯 核心功能说明
### 普通地图模式
- 矢量地图:道路、建筑、行政区划
- 影像地图:高清卫星影像
- 图层切换:右上角按钮切换
### 分屏对比模式 ⭐
- **同时显示**:左侧矢量,右侧影像(或上下分布)
- **实时对比**:相同区域不同图层的直观对比
- **交互同步**:缩放、平移操作同步到两个图层
- **分割线控制**:拖拽调整显示比例
### 高级功能
- **动画过渡**:平滑的位置变化动画
- **预设布局**:影像主导/矢量主导快速切换
- **摆动演示**:分割线摆动效果展示
- **实时反馈**:显示当前分割位置和方向
## 🛠️ 技术栈
- **前端框架**Vue 3 (Composition API)
- **构建工具**Vite
- **地图引擎**ArcGIS API for JavaScript
- **地图服务**:天地图 (国家地理信息公共服务平台)
- **核心功能**ArcGIS Swipe Widget
## 📖 使用指南
### 基础操作
1. 页面右上角切换"普通地图"/"分屏对比"
2. 分屏模式下,左上角控制面板进行操作
3. 拖拽分割线手动调整比例
### 控制面板功能
- **重置分割线**动画回到50%中间位置
- **方向切换**:垂直分割 ↔ 水平分割
- **影像主导**影像占70%显示区域
- **矢量主导**矢量占70%显示区域
- **摆动演示**:分割线摆动动画效果
### 高级定制
详细的自定义配置和扩展功能请查看:
- [分屏功能使用指南](./SPLIT_SCREEN_GUIDE.md)
- [天地图配置指南](./TIANDITU_SETUP.md)
## 🎨 界面预览
### 普通地图模式
- 右上角图层切换按钮
- 支持矢量/影像地图切换
### 分屏对比模式
- 左上角功能丰富的控制面板
- 实时显示分割状态信息
- 多种预设布局和动画效果
## 🔧 开发说明
### 核心文件
- `splitScreen.js`:分屏功能核心工具类
- `SplitScreenMap.vue`:分屏地图组件
- `tianditu.js`:天地图服务配置
### 自定义开发
```javascript
// 使用分屏管理器
import { SplitScreenManager } from './utils/splitScreen.js'
const manager = new SplitScreenManager(view)
manager.createSwipe(leadingLayers, trailingLayers)
// 使用动画器
import { SplitScreenAnimator } from './utils/splitScreen.js'
const animator = new SplitScreenAnimator(manager)
await animator.animateToPosition(75, 1000)
```
## 🐛 常见问题
### Q: 地图显示空白?
A: 检查天地图API Key是否正确配置
### Q: 分屏功能不工作?
A: 确认ArcGIS API版本支持Swipe小部件
### Q: 动画效果卡顿?
A: 检查浏览器性能,可调整动画时长
详细问题解答请查看 [SPLIT_SCREEN_GUIDE.md](./SPLIT_SCREEN_GUIDE.md)
## 📚 相关文档
- [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/latest/)
- [ArcGIS Swipe Widget](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html)
- [天地图官网](https://www.tianditu.gov.cn/)
- [Vue 3 官方文档](https://v3.vuejs.org/)
## 📄 许可证
MIT License