使用Vite快速创建Vue3+Cesium项目,通过vite-plugin-cesium插件简化配置。删除HelloWorld.vue,新建CesiumViewer.vue组件,引入Cesium并创建Viewer对象。删除默认小部件和版权信息,最终成功渲染三维地球场景。
npm create vite@latest vite-cesium-vue-test -- --template vue 安装Cesium与必要插件 使用VSCode打开目录【vite-cesium-vue-test】,打开控制台,执行命令: npm i cesium npm i cesiumvite-plugin-cesiumvite -D 配置插件 在vite.config.js中,添加cesium相关配置: import { defineConfig } from 'vite' import...
cesium token:必须要有,到cesium官网申请,项目跑起来需要用到的 viewer:视角,3D场景中必备 根元素:初始化canvas要用到的根元素 import { onMounted } from "vue"; import store from "@/store/store.js"; import * as Cesium from "cesium"; // cesium的token,可自行申请 Cesium.Ion.defaultAccessToken = ...
如果选择其他框架,则不用加--template vuepnpm create vite vite+vue3+cesium --template vue 进入项目cd vite-app 安装依赖pnpm install 运行项目pnpm run dev 看到这个页面就说明vite+vue3的项目初始化成功了,下面就是安装和初始化cesium框架和cesium的vite插件了 在vite项目中要正常使用cesium我目前知道的有两种...
构建完成的vue项目后,安装cesium,具体步骤如下: 步骤1:npm引入cesium npm install cesium 步骤2:在main.js中设定cesium的基础url路径,这里将基础路径设置为cesium,同时在public文件夹新建文件夹cesium,将下载得到的Cesium-1.104.zip文件包下的Build\Cesium文件夹内的所有文件拷贝到刚刚新建立的cesium文件夹。
import * as Cesium from 'cesium'; onMounted(() => { console.log('cesium', Cesium); const viewer = new Cesium.Viewer('cesium-container', { terrainProvider: Cesium.Terrain.fromWorldTerrain(), timeline: false, animation: false, baseLayerPicker: false, navigationHelpButton: false, }); //...
这次在项目打包的时候报了下面这个错误,一直说是缺少CESIUM_BASE_URL这个参数,我在查资料后,网上大多建议是全局定义一个这个变量,但是,我在定义变量后还是报这个错误。 最终解决方法是: 将项目中的"vite-plugin-cesium": "^1.2.10",改为了"vite-plugin-cesium": "^1.2.22"。
在Vite项目中引入Cesium,可以按照以下步骤进行: 1. 确认项目环境和配置要求 确保你已经安装了Node.js和npm(或yarn),并且已经初始化了一个Vite项目。如果还没有初始化项目,可以使用以下命令创建一个新的Vite项目: bash npm create vite@latest 按照提示选择Vue或其他框架,完成项目初始化。 2. 安装Cesium依赖 在项...
webdq/vite-vue-cesiumPublic NotificationsYou must be signed in to change notification settings Fork0 Star0 master 1Branch 0Tags Code Folders and files Name Last commit message Last commit date Latest commit webdq first commit Jun 27, 2022 ...
mount('#app'); //App.vue <template> </template> import { ref, onMounted } from "vue"; import * as Cesium from "cesium"; onMounted(() => { const viewer = new Cesium.Viewer("cesiumContainer", { animation: false, timeline: false, }); }); [工程下载](vue3+vite+cesiumJs...