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
相关推荐
PleaSure乐事14 分钟前
JS/JSP/JSX的区别与关联
前端·javascript·react.js·前端框架·jsp·jsx
夫琅禾费米线2 小时前
[有趣的JavaScript] 为什么typeof null返回 object
开发语言·前端·javascript
nothing_more_than6 小时前
draggable的el-dialog实现对话框标题可以选择
javascript·vue.js·element-plus
小镇程序员7 小时前
vue2 src自定义事件
前端·javascript·vue.js
炒毛豆7 小时前
vue3+echarts+ant design vue实现进度环形图
javascript·vue.js·echarts
nameofworld9 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
别拿曾经看以后~9 小时前
原生Android调用uniapp项目中的方法
android·vue.js·uni-app
前端fighter9 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
流着口水看上帝10 小时前
JavaScript完整原型链
开发语言·javascript·原型模式
guokanglun10 小时前
JavaScript数据类型判断之Object.prototype.toString.call() 的详解
开发语言·javascript·原型模式