# vue3-ts-cesium-map-show

**Repository Path**: hawk86104/vue3-ts-cesium-map-show

## Basic Information

- **Project Name**: vue3-ts-cesium-map-show
- **Description**: 🔥前端 vue3.0 + typescript
三维可视化 数字城市 数字孪生
选用 cesium开源GIS库
加入 主流地图 WebGL效果 完全开源
配合后台 实现可视化编辑保存
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://map.217dan.com/addons/cesiummapv
- **GVP Project**: No

## Statistics

- **Stars**: 1526
- **Forks**: 532
- **Created**: 2021-06-17
- **Last Updated**: 2025-06-16

## Categories & Tags

**Categories**: gis

**Tags**: vue3, TypeScript, element-plus, Cesium, 地图可视化

## README

<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: Hawk
 * @Date: 2021-06-17 15:09:27
 * @LastEditors: 地虎降天龙
 * @LastEditTime: 2023-11-10 08:46:24
-->
# vue3-typescript-cesium-elementPlus

🎉🎉🎊最近折腾threeJS🎊🎉🎉 迁移了部分功能，也增加了更多实用功能，同样开源地址是：
### 点击跳转: [gitee.com/ice-gl/icegl-three-vue-tres](https://gitee.com/ice-gl/icegl-three-vue-tres/) 
<p align = "left">   
<img src="https://gitee.com/ice-gl/icegl-three-vue-tres/raw/master/preview/%E5%9C%B0%E7%90%833.gif" width="300" />
</p>

### 开源不易，还望点击关注star⭐️ 

## 截图展示
![展示](https://jdvop.oss-cn-qingdao.aliyuncs.com/assets/img/3ddemo/index.png)

## 演示地址
前台地址：【由于白膜数据量大，请耐心等待】
[map.217dan.com/addons/cesiummapv](http://map.217dan.com/addons/cesiummapv)

后台地址:
[map.217dan.com/aeSAZtOfuN.php](http://map.217dan.com/aeSAZtOfuN.php)
```
用户名:test
密码:12345678
```
前端使用的技术栈为：
```
vue3.0 CLI4.x脚手架搭建，使用typescript作为逻辑代码，UI界面为elementPlus
GIS地图部分，使用Cesium-1.82开源库，简单了修改了地图展示部分代码
加入了主流的一些WebGL动态效果类
配合后台【thinkphp + mysql】
```
后台源码地址：
[gitee.com/hawk86104/vue3-ts-cesium-map-show-backend](https://gitee.com/hawk86104/vue3-ts-cesium-map-show-backend)


## 安装依赖
```
npm install
```
### 调试模式
```
npm run serve
```
### 编译
```
npm run build
```
## 学习交流群
欢迎大家也加入微信群，已有4个群已满，一起学习讨论webgl。加微信我拉进群
<p align = "left">    
<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20230731/17d59bab46815cce1f4f1e09dcbb6ccc.png" width="300" />
</p>

## 学习交流社区
最近和ice.gl搭建了 ICE图形学社区：专门为入门或者从事webgl开发和学习的朋友提供交流的平台: https://www.icegl.cn/
<p align = "left">   
<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20230421/QQ20230421-121209.png" width="980" />
</p>
内含免费丰富的webgl课程、课程源码 以及shader文档等，还有社区问答，不懂的都可以在线提问。