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

相关推荐
不爱吃糖的程序媛1 分钟前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大2 分钟前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT0621 分钟前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
光影少年1 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js
小毛驴8501 小时前
Vue 路由示例
前端·javascript·vue.js
发现一只大呆瓜2 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
wuhen_n3 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n3 小时前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
我是一只puppy3 小时前
使用AI进行代码审查
javascript·人工智能·git·安全·源代码管理
颜酱3 小时前
从二叉树到衍生结构:5种高频树结构原理+解析
javascript·后端·算法