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

相关推荐
yanlele1 小时前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤2 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
cc.ChenLy6 小时前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css
西门吹-禅6 小时前
node js 性能处理
开发语言·javascript·ecmascript
一只大侠的侠6 小时前
React Native for OpenHarmony:日期范围选择器实现
javascript·react native·react.js
EstherNi7 小时前
仿照elementui写图片放大的案例,但多加了下载按钮,vue3
javascript·vue.js·elementui
一只大侠的侠7 小时前
React Native for OpenHarmony:DatePicker 日期选择器组件详解
javascript·react native·react.js
JosieBook7 小时前
【Vue】15 Vue技术——Vue计算属性简写:提升代码简洁性的高效实践
前端·javascript·vue.js
x-cmd8 小时前
[x-cmd] Node.js 的关键一步:原生运行 TypeScript 正式进入 Stable
javascript·typescript·node.js·x-cmd
御坂10101号9 小时前
JIT 上的 JIT:Elysia JS 的优化实践与争议
开发语言·javascript·网络·性能优化·node.js·express