本节完成项目环境搭建,在vue环境中搭建cesium。
1. 创建vue项目
- PowerShell控制台打开(从项目所在文件夹处,管理员身份运行)
- npm init vite@latest
- 根据提示输入项目名称、选择vue-ts
2. 安装Cesium相关插件
yarn add cesium vite-plugin-cesium vite -D
注意需要先安装yarn(包管理器)
3. vite.config.js中引入插件
import cesium from 'vite-plugin-cesium';
export default defineConfig({ plugins:[vue(),cesium()] })
4. App.vue中创建cesium容器并创建实例
5. 效果展示
6.思考
-
Cesium插件,本实例的cesium插件选用的是cesium、vite-plugin-cesium,这个插件的作用?而在“海的对岸”系列文中使用的是cesium、copy-webpack-plugin、webpack。有什么区别?(未解决)
-
初始化的cesium实例放在onMounted生命周期钩子中?为什么? Viewer需要在页面渲染完的时候挂载
-
iframe是做什么的?(未解决)