VUE3构建Cesium项目

目录

1.Cesium开发参考资料

2.VUE中使用Cesium

2.1 使用VUE创建项目

1.创建test项目

2.项目中引入Cesium

3.修改App.vue如下

4.运行效果

---

1.Cesium开发参考资料

Cesium官方网站：Cesium: The Platform for 3D Geospatial

Cesium Javascript库网站：https://cesium.com/cesiumjs/

Cesium开发文档：https://cesium.com/docs/

Cesium开发示例：https://cesium.com/blog/categories/userstories/

Cesium官方论坛：https://groups.google.com/forum/#!forum/cesium-dev

Cesium源码：https://github.com/CesiumGS/cesium

Cesium中文开发教程：http://cesium.marsgis.cn/docs/go.html?id=12 （来源火星科技）

Cesium中文网：http://cesium.xin/

Cesium实验室（支持Cesium的数据处理）：https://www.cesiumlab.com/

MarsGIS for Cesium官方网站：http://cesium.marsgis.cn/

三维地球开发书籍(Cesium创始人Patrick Cozzi 作品) ：http://www.virtualglobebook.com/

Cesium Language (CZML)指南：https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide

3D Tiles数据格式说明：https://github.com/CesiumGS/3d-tiles

glTF格式文档：https://github.com/KhronosGroup/glTF

2.VUE中使用Cesium

2.1 使用VUE创建项目

1.创建test项目

vue create test

 Default([Vue 3] babel, eslint):vue3的项目，只包含js编译器babel，代码检测工具eslint。
Default([Vue 2] babel, eslint):vue2的项目，只包含js编译器babel，代码检测工具eslint。
Manually select features:自定义添加选择功能。

• Babel：js编译器
• Typescript：js的超集
• Progressive Web App Support:渐进式的网页应用程序
• Router:vue的路由
• Vuex:vue的状态管理
• CSS Pre-processors:css的预处理器
• Linter/Formatter:代码风格检测与格式化(如果自己代码不是很规范的话可以用这个约束下自己,也可不选择，按照自己的风格)
• Unit Testing:单元测试
• E2E Testing:端对端测试

（选项根据个人需求选择） 

选择VUE3版本：

 Babel、ESLint 等的配置存放选择都存放在package.json中，选择第二项：

 

 是否选择保存配置：

 

 选择打包方式：

 

 项目创建完成：

 运行项目：

 运行结果：

2.项目中引入Cesium

在项目目录中安装cesium

yarn add cesium

 3.修改App.vue如下

在项目node_modules中复制/Widgets/widgets.css文件在src目录下，方便使用：

也可以通过其他方式修改配置方便使用。

4.运行效果