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
相关推荐
摘星编程2 小时前
OpenHarmony + RN:Placeholder文本占位
javascript·react native·react.js
a1117763 小时前
医院挂号预约系统(开源 Fastapi+vue2)
前端·vue.js·python·html5·fastapi
计算机毕设VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
行走的陀螺仪5 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
地狱为王5 小时前
Cesium for Unity叠加行政区划线
unity·gis·cesium
摘星编程5 小时前
React Native + OpenHarmony:Spinner旋转加载器
javascript·react native·react.js
普通网友7 小时前
新手必看!HCCDA-HarmonyOS & Cloud Apps 实验保姆级教程
javascript·angular.js
用户新7 小时前
V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
前端·javascript
Next_Tech_AI7 小时前
别用 JS 惯坏了鸿蒙
开发语言·前端·javascript·个人开发·ai编程·harmonyos
-凌凌漆-7 小时前
【vue】选项式api与组合式api
前端·javascript·vue.js