Vue3+Vite 初始化Cesium

Vue3+Vite 初始化Cesium

安装依赖

js 复制代码
yarn add cesium
yarn add vite-plugin-cesium -D

加载vite-plugin-cesium插件

js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
 
 
export default defineConfig({
  plugins: [vue(),cesium()]
});

初始化Cesium

js 复制代码
<template>
	<div id="map"></div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

onMounted(() => {
	const viewer = new Cesium.Viewer('map')
	window.viewer = viewer
})
</script>

<style lang="scss" scoped>
#map {
	width: 100%;
	height: 100%;
}
</style>

git

相关推荐
木子李BLOG7 分钟前
Element Plus
前端·javascript·vue.js
Miketutu12 分钟前
【大屏优化秘籍】Element UI El-Table 表格透明化与自定义行样式实战
前端·javascript·vue.js
止水编程 water_proof19 分钟前
JavaScript基础
开发语言·javascript·ecmascript
少卿2 小时前
React Compiler 完全指南:自动化性能优化的未来
前端·javascript
爱隐身的官人2 小时前
beef-xss hook.js访问失败500错误
javascript·xss
军军3602 小时前
从图片到点阵:用JavaScript重现复古数码点阵艺术图
前端·javascript
znhy@1232 小时前
Vue基础知识(一)
前端·javascript·vue.js
学习吖3 小时前
vue中封装的函数常用方法(持续更新)
大数据·javascript·vue.js·ajax·前端框架
范特东南西北风3 小时前
Wappalyzer 原型链漏洞问题完整解决过程
前端·javascript
fruge3 小时前
自制浏览器插件:实现网页内容高亮、自动整理收藏夹功能
开发语言·前端·javascript