vite+vue集成cesium

1、创建项目、选择框架vue+js

复制代码
pnpm create vite demo_cesium

2、进入项目安装依赖

复制代码
cd demo_cesium
pnpm install

3、安装cesium及插件

复制代码
3、pnpm i cesium vite-plugin-cesium

4、修改vite-config.js

复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()],
})

5、删除style.css,修改App.vue

复制代码
<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
  Cesium.Ion.defaultAccessToken = '' //改为自己申请的token
  new Cesium.Viewer('cesiumContainer')   
})
</script>
<style scoped></style>

6、运行

复制代码
pnpm dev
相关推荐
超人气王23 分钟前
新手学前端 JavaScript 类型判断:一篇彻底搞懂 typeof、instanceof 和 Object.prototype.toString
前端·javascript
丷丩1 小时前
MapLibre GL JS第35课:显示带地形高程(三维地形)的卫星影像
javascript·gis·map·mapbox·maplibre gl js
三乐2281 小时前
node不认识类型?多半是没用上这几段代码
javascript
前端毕业班2 小时前
uni-app 小程序样式隔离实践指南和原理分析
前端·javascript·vue.js
吃口巧乐兹2 小时前
热加载与插件热插拔:Debug 模式 × E-Spi × H-Spi 全解析
javascript
仿生狮子2 小时前
🎼 从文本到交互界面——GenUI 的中庸之道
前端·vue.js·markdown
想不到ID了3 小时前
第八篇: 登录注册功能实现
java·javascript
ZC跨境爬虫3 小时前
跟着 MDN 学CSS day_37:(从文档流到粘性定位的底层原理)
前端·javascript·css·ui·html
十九画生3 小时前
从“会用函数”到“理解函数”:JavaScript 中函数为什么也是对象?
javascript
zzqssliu3 小时前
taocarts 跨境独立站 SEO 优化实践(多语言 + 反向海淘场景)
java·javascript·php