# vue3-cesium

**Repository Path**: guonan01/vue3-cesium

## Basic Information

- **Project Name**: vue3-cesium
- **Description**: 三维可视化
vue3+vite+cesium
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 3
- **Created**: 2022-05-20
- **Last Updated**: 2025-02-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Cesium + Vue 3 + Vite + Typescript

![Cesium](./img/earth.jpg)

## 去Cesium官网注册token
 
```javascript
Cesium.Ion.defaultAccessToken = 'ssss';
```
## 清理首页其他元素
```json
const viewer = new Cesium.Viewer(cesiumContainer, {
    animation: false, // 动画小组件
    baseLayerPicker: false, // 图层选择器（底图组件）
    fullscreenButton: false, // 全屏按钮
    geocoder: false, // 地名查找组件，地理编码，搜索按钮
    homeButton: false, // 首页，点击之后试图将跳转到默认视角。地图中心点按钮
    infoBox: false, // 信息框，显示要素的详细信息
    vrButton: false, // VR模式；平面和全景切换按钮
    sceneModePicker: false, // 场景模式选择器,切换2D，3D和哥伦布视图模式
    selectionIndicator: false, // 选择指示器，显示当前选择的要素
    timeline: false, // 时间线，显示时间轴
    navigationHelpButton: false, // 帮助按钮
    navigationInstructionsInitiallyVisible: false, // 导航指示初始化是否可见
})
          
```

## Api
![影像](imgs/Cesium_api.png)
### Viewer类
* imagerLayers 影像
![影像](imgs/imageryLayer.png)
* terrainProvider 地形
![五种地形](imgs/terrain.png)
* dataSource矢量数据
![矢量数据](imgs/datasource.png)
* entities 几何实体集合（用于空间数据可视化）
![entities](imgs/entities.png)
* Widgets组件，即Viewer初始化界面上的组件
![Widgets组件](imgs/widgets.png)
* Camera相机
![相机](imgs/camera.png)
* Event事件，鼠标事件，集体选中事件
![Event事件](imgs/events.png)
### Scence类
* primitives 图元
* postProcessStages 后期处理
* 环境对象，如大气圈，天空盒，太阳，月亮等
* Event事件，如更新，渲染事件等
### Camera类
* 位置，方位角，俯仰角，翻滚角
### 空间计算
* 三维矩阵，四元素啊，斯维矩阵，转换
![笛卡尔坐标转换](imgs/笛卡尔坐标转换.png)
![terrainprovider](imgs/terrainprovider.png)