vite+vue集成cesium

1、创建项目、选择框架vue+js

复制代码
pnpm create vite demo_cesium

2、进入项目安装依赖

复制代码
cd demo_cesium
pnpm install

3、安装cesium及插件

复制代码
3、pnpm i cesium vite-plugin-cesium

4、修改vite-config.js

复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()],
})

5、删除style.css,修改App.vue

复制代码
<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
  Cesium.Ion.defaultAccessToken = '' //改为自己申请的token
  new Cesium.Viewer('cesiumContainer')   
})
</script>
<style scoped></style>

6、运行

复制代码
pnpm dev
相关推荐
talenteddriver8 分钟前
mysql: MySQL中between子句和limit子句的区别
前端·javascript·数据库
q_19132846951 小时前
基于SpringBoot+Vue.js的高校竞赛活动信息平台
vue.js·spring boot·后端·mysql·程序员·计算机毕业设计
我是小邵1 小时前
【踩坑实录】一次 H5 页面在 PC 端的滚动条与轮播图修复全过程(Vue + Vant)
前端·javascript·vue.js
2501_946230981 小时前
Cordova&OpenHarmony外观主题设置
android·javascript
军军君011 小时前
Three.js基础功能学习一:环境资源及基础知识
开发语言·javascript·学习·3d·前端框架·threejs·三维
千寻girling1 小时前
面试官: “ 请你说一下什么是 ajax ? ”
前端·javascript
@大迁世界2 小时前
JavaScript 框架的终结
开发语言·前端·javascript·ecmascript
梦6502 小时前
Vue 实现动态路由
前端·javascript·vue.js
丶乘风破浪丶2 小时前
Vue项目中判断相同请求的实现方案:从原理到实战
前端·javascript·vue.js
0思必得02 小时前
[Web自动化] JS基础语法与数据类型
前端·javascript·自动化·html·web自动化