vue+cesium实例探索(一)

524 阅读1分钟

本节完成项目环境搭建,在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容器并创建实例

1-4创建cesium容器并创建实例.png

5. 效果展示

1-5效果图.png

6.思考

  • Cesium插件,本实例的cesium插件选用的是cesium、vite-plugin-cesium,这个插件的作用?而在“海的对岸”系列文中使用的是cesium、copy-webpack-plugin、webpack。有什么区别?(未解决)

  • 初始化的cesium实例放在onMounted生命周期钩子中?为什么? Viewer需要在页面渲染完的时候挂载

  • iframe是做什么的?(未解决)

7.官方链接

vite-plugin-cesiumcesiumvite