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

VUE3构建Cesium项目_第1张图片

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

VUE3构建Cesium项目_第2张图片

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

(选项根据个人需求选择) 

选择VUE3版本:

VUE3构建Cesium项目_第3张图片

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

 VUE3构建Cesium项目_第4张图片

 是否选择保存配置:

 VUE3构建Cesium项目_第5张图片

 选择打包方式:

 VUE3构建Cesium项目_第6张图片

 项目创建完成:VUE3构建Cesium项目_第7张图片

 运行项目:

 运行结果:

VUE3构建Cesium项目_第8张图片

2.项目中引入Cesium

在项目目录中安装cesium

yarn add cesium

 3.修改App.vue如下






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

VUE3构建Cesium项目_第9张图片

VUE3构建Cesium项目_第10张图片

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

4.运行效果

你可能感兴趣的:(Cesium,vue.js,javascript,前端,cesium)