# cesium-learn

**Repository Path**: kelele/cesium-learn

## Basic Information

- **Project Name**: cesium-learn
- **Description**: cesium的一个学习项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-08
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CesiumJS 学习项目

基于 Vue 3 + Vite 的 CesiumJS 地球可视化学习平台。

## 📚 项目简介

这是一个用于学习 CesiumJS 的示例项目，集成了 Vue 3 和 Vite，提供了一个现代化的开发环境。

## 🔧 Chrome DevTools MCP 集成

本项目已集成 **Chrome DevTools MCP**，可以让 AI 直接调试和分析浏览器！

✅ **已配置完成** - 查看详细说明：
- 📖 [MCP 设置完成文档](./MCP_SETUP_COMPLETE.md)
- 📚 [MCP 使用指南](./CHROME_DEVTOOLS_MCP_GUIDE.md)
- 🚀 [快速启动脚本](./start-chrome-debug.ps1)

**快速启动 MCP 调试：**
```powershell
.\start-chrome-debug.ps1
```

然后重启 Cursor，即可使用 AI 调试浏览器！

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 📦 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **CesiumJS** - 三维地球和地图可视化库
- **vite-plugin-cesium** - Vite 的 Cesium 插件

## 🎯 学习内容

### 1. 基础地球
- 创建 Cesium Viewer
- 基础配置选项
- 地球渲染

### 2. 实体标注
- 添加点标注
- 添加线和面
- 自定义样式和标签

### 3. 3D 模型
- 加载 glTF/glb 模型
- 模型定位和旋转
- 模型动画

### 4. 地形展示
- 地形数据加载
- 高程数据可视化
- 地形夸张效果

### 5. 影像图层
- 在线影像服务
- 自定义图层
- 图层切换

### 6. 相机控制
- 相机定位
- 飞行动画
- 视角控制

## 📁 项目结构

```
cesium-learn/
├── public/              # 静态资源
├── src/
│   ├── assets/         # 项目资源文件
│   ├── components/     # Vue 组件
│   │   ├── CesiumViewer.vue    # Cesium 查看器组件
│   │   └── ExamplesList.vue    # 示例列表组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 应用入口
│   └── style.css       # 全局样式
├── index.html          # HTML 模板
├── package.json        # 项目配置
└── vite.config.js      # Vite 配置
```

## 🔧 配置说明

### Cesium Ion Token

如果需要使用 Cesium Ion 的在线资源（如地形、影像等），需要在 `CesiumViewer.vue` 中配置你的访问令牌：

```javascript
Cesium.Ion.defaultAccessToken = 'your_access_token_here'
```

可以在 [Cesium Ion](https://cesium.com/ion/) 免费注册并获取 Token。

## 📖 学习资源

- [CesiumJS 官方文档](https://cesium.com/docs/)
- [CesiumJS API 参考](https://cesium.com/learn/cesiumjs/ref-doc/)
- [Cesium Sandcastle](https://sandcastle.cesium.com/) - 在线示例
- [Vue 3 文档](https://cn.vuejs.org/)
- [Vite 文档](https://cn.vitejs.dev/)

## 🎨 特性

- ✅ 现代化的 UI 设计
- ✅ 响应式布局
- ✅ 示例列表展示
- ✅ 组件化开发
- ✅ 热模块替换 (HMR)
- ✅ 快速的开发体验

## 📝 注意事项

1. 确保 Node.js 版本 >= 16
2. 首次运行可能需要下载 Cesium 资源，请耐心等待
3. 某些功能可能需要网络连接来加载在线地图数据

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可

MIT License