# Gis

**Repository Path**: adakf/gis

## Basic Information

- **Project Name**: Gis
- **Description**: 将原先的混乱代码进行模块化处理，利于后期维护
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-27
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue WebGIS 应用

基于 Vue 3 的现代化 WebGIS 应用，支持 2D/3D 地图展示和多种地理信息处理功能。

## 技术栈

- **前端框架**：Vue 3
- **构建工具**：Vite
- **地图引擎**：
  - OpenLayers (2D)
  - Cesium (3D)
  - ol-cesium-viewer (2D/3D 融合)
- **UI 组件**：Element Plus
- **状态管理**：Pinia
- **CSS 框架**：TailwindCSS
- **其他工具**：
  - Axios (HTTP 请求)
  - Less (CSS 预处理器)
  - PostCSS
  - Vite 插件生态

## 功能特性

- 🌍 2D/3D 地图无缝切换
  - 支持 OpenLayers 和 Cesium 引擎切换
  - 平滑的视图转换
  - 自动调整相机位置和视角
  - [详细实现文档](docs/2d-3d-switch.md)

- 📏 地图测量工具
  - 距离和面积测量功能
  - 实时测量结果显示
  - 支持2D和3D模式
  - [详细实现文档](docs/measure-tools.md)

- ✏️ 绘图工具
  - 多种图形绘制功能
  - 图标添加和编辑功能
  - 支持保存和加载绘制内容
  - [详细实现文档](docs/draw-tools.md)

- 🛣️ 轨迹回放
  - 轨迹数据加载和回放
  - 动画控制功能
  - 支持暂停和继续
  - [详细实现文档](docs/trajectory-player.md)

- 🔄 3D 环绕功能
  - 相机围绕目标点自动旋转
  - 键盘控制支持
  - 自定义环绕参数
  - [详细实现文档](docs/3d-orbit.md)

- 🎨 现代化 UI 界面
  - 响应式设计
  - 清晰的用户反馈
  - 主题定制支持
  - [详细实现文档](docs/ui-design.md)

## 项目结构

```
src/
├── api/          # API 接口定义
├── assets/       # 静态资源
├── components/   # Vue 组件
├── configs/      # 配置文件
├── hooks/        # Vue 组合式 API hooks
├── libs/         # 第三方库
├── services/     # 服务层
├── stores/       # Pinia 状态管理
└── utils/        # 工具函数
```

## 主要组件

- `MapApplication.vue` - 主应用组件
- `MapContainer.vue` - 地图容器组件
- `DrawTools.vue` - 绘图工具组件
- `MeasureTools.vue` - 测量工具组件
- `TrajectoryPlayer.vue` - 轨迹回放组件

## 快速开始

1. 安装依赖
```bash
npm install
# 或
pnpm install
```

2. 启动开发服务器
```bash
npm run dev
# 或
pnpm dev
```

3. 构建生产版本
```bash
npm run build
# 或
pnpm build
```

## 环境要求

- Node.js >= 14.0.0
- npm >= 6.0.0 或 pnpm >= 6.0.0

## 开发指南

### 添加新功能

1. 在 `src/components` 中创建新组件
2. 在 `src/stores` 中添加相关状态管理
3. 在 `src/api` 中定义相关接口
4. 在 `src/services` 中实现业务逻辑

### 地图功能扩展

1. 2D 地图功能扩展：
   - 使用 OpenLayers API
   - 在 `MapContainer.vue` 中集成

2. 3D 地图功能扩展：
   - 使用 Cesium API
   - 通过 `ol-cesium-viewer` 进行集成

## 注意事项

- 确保正确配置地图服务地址
- 注意 2D/3D 切换时的性能优化
- 大量数据加载时注意内存管理
- 建议使用 Chrome 最新版本进行开发

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 许可证

[MIT License](LICENSE)

## 联系方式

如有问题或建议，请提交 Issue 或 Pull Request。