# webgis-project

**Repository Path**: colazhao/webgis-project

## Basic Information

- **Project Name**: webgis-project
- **Description**: 本项目是一个基于Vue 3、TypeScript、Vite、Pinia、Three.js、Cesium的前端项目，用于展示三维地球和三维模型。项目结构清晰，代码规范，易于维护和扩展
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2025-12-02
- **Last Updated**: 2026-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Cesium, Threejs, Vue

## README

# Vue 3 + TypeScript + Vite + Pinia + ThreeJs + Cesium

## Project setup
```
npm install
```

### Compile and Hot-Reload for Development
```
npm run dev
```

## 项目介绍
本项目是一个基于Vue 3、TypeScript、Vite、Pinia、Three.js、Cesium的前端项目，用于展示三维地球和三维模型。项目结构清晰，代码规范，易于维护和扩展。
![alt text](src/assets/screenshap/dashboard.png)

## 功能介绍
### 1.Threejs案例

- 几何体：绘制three.js常见几何体，自定义设置其材质、纹理、光源等，实现几何体的自定义旋转动画
  效果。
- 城市展厅大屏：加载glb三维城市模型，通过相机控件实现模型的全方位展示。



### 2.Cesium案例

- 飞行可视化大屏：进行 3D 模型轻量化引入与场景搭建，驱动飞机模型沿自定义路径完成平滑运动，也可按方向键自主控制飞行，直观呈现动态飞行态势。
- 红蓝对抗态势大屏：进行核心交互逻辑开发，基于单例模式与发布订阅模式封装事件管理模块，挂载1 次全局鼠标事件实现多类型操作（绘制箭头、区域）的精准派发，提升系统性能与可维护性。
- 点云数据可视化大屏：优化点云数据渲染方案，分别采用Entity、Primitive实现高效点聚合效果，解决海量点云卡顿问题；同时引入 KML 地理数据文件，完成区域数据场景可视化。
- 智慧城市监控大屏：基于 GeoJSON 地理数据绘制区县区域，并关联多维指标实现区域差异化着色；集成 ECharts 图表库，设计折线图、饼图等组件直观展示城市核心运营指标。
- 火箭分离大屏：运用CZML实现火箭分离动画高精度模拟
- 3D Tile建筑：运用3D Tile加载建筑模型且自定义样式，通过控制LOD级别的参数、视口剔除、跳级加载等优化手段实现建筑模型的高效可视化



### 3.AI工具案例

- AI聊天：前端搭建AI聊天界面，请求本地后台服务；后台采用阿里云百炼大模型接入DeepSeek模型实现信息交互，因后端涉及API- KEY私密信息暂不公开发布