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

相关推荐
oak隔壁找我1 小时前
Node.js的package.json
前端·javascript
支撑前端荣耀2 小时前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
shanLion2 小时前
Vite项目中process报红问题的深层原因与解决方案
前端·javascript
烟袅2 小时前
从零构建一个待办事项应用:一次关于组件化与状态管理的深度思考
前端·javascript·react.js
我命由我123453 小时前
CSS 锚点定位 - 锚点定位引入(anchor-name、position-anchor)
开发语言·前端·javascript·css·学习·html·学习方法
哟哟耶耶3 小时前
js-清除首尾空白字符再进行空白匹配str.trim().match(...)
开发语言·前端·javascript
亚林瓜子4 小时前
nodejs里面的百分号解码之URLSearchParams
开发语言·javascript·ecmascript·node·url·百分号编码
南山安4 小时前
React学习:通过TodoList,完整理解组件通信
javascript·react.js·前端框架
瘦的可以下饭了4 小时前
Day04-APIs 日期对象
javascript
用户72600745695804 小时前
彻底搞懂前端动态图片加载:Vue、Vite与Webpack完全指南
javascript