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

相关推荐
唐璜Taro4 小时前
Vue3 + TypeScript 后台管理系统完整方案
前端·javascript·typescript
颜酱4 小时前
栈的经典应用:从基础到进阶,解决LeetCode高频栈类问题
javascript·后端·算法
Xin_z_4 小时前
Vue3 + Sticky 锚点跳转被遮挡问题解决方案
前端·javascript·vue.js
WeiXin_DZbishe5 小时前
基于django在线音乐数据采集的设计与实现-计算机毕设 附源码 22647
javascript·spring boot·mysql·django·node.js·php·html5
百思可瑞教育5 小时前
Vue 前端与 Node.js 后端文件上传与处理实现
前端·javascript·vue.js·前端框架·node.js·ecmascript·百思可瑞教育
小黑的铁粉5 小时前
什么是事件循环?调用堆栈和任务队列之间有什么区别?
前端·javascript
小黑的铁粉5 小时前
常见的内存泄漏有哪些?
前端·javascript
Railshiqian6 小时前
给android源码下的模拟器添加两个后排屏的修改
android·开发语言·javascript
敲敲了个代码6 小时前
[特殊字符] 空数组的迷惑行为:为什么 every 为真,some 为假?
前端·javascript·react.js·面试·职场和发展
青青家的小灰灰7 小时前
深入React源码:解析setState的批量更新与异步机制
前端·javascript·react.js