话不多说,咱们来看如何使用Cesium开始项目
Vue3+Vite+Cesium
使用pnpm创建项目
pnpm create vite my_cesium
安装项目依赖
pnpm install
安装Cesium包
pnpm install -g cesium@1.99 vite-plugin-cesium
修改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()]
})
在项目中调包
import * as Cesium from 'cesium'
运行
pnpm dev
Hello Cesium
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';
console.log(Cesium)
onMounted(()=>{
//获取许可
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NmQ2YjQwMC0wOTAzLTQxYWItODliMC1iYTFjMzdiM2U4YzEiLCJpZCI6MjMyMjU4LCJpYXQiOjE3MjI1ODkzNzV9._ql6Oa6Tls-APS5Ag0692Co91xG_QqcEmd4sAo8azJ8'
//定义基本视图
const viewer = new Cesium.Viewer('container',{
})
})
</script>
<template>
<div id="container"></div>
</template>
<style scoped>
*{
margin: 0;
padding: 0;
}
#container{
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>
移除地图组件
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';
console.log(Cesium)
onMounted(()=>{
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NmQ2YjQwMC0wOTAzLTQxYWItODliMC1iYTFjMzdiM2U4YzEiLCJpZCI6MjMyMjU4LCJpYXQiOjE3MjI1ODkzNzV9._ql6Oa6Tls-APS5Ag0692Co91xG_QqcEmd4sAo8azJ8'
const viewer = new Cesium.Viewer('container',{
homeButton: false, //主页按钮
animation: false, //动画控件
timeline: false, //时间轴控件
geocoder: false, //搜索控件
fullscreenButton: false, //全屏控件
sceneModePicker: false, //投影方式按钮
baseLayerPicker: false, //图层选择按钮
navigationHelpButton: false //帮助手势按钮
})
})
</script>
<template>
<div id="container"></div>
</template>
<style scoped>
*{
margin: 0;
padding: 0;
}
#container{
width: 100vw;
height: 100vh;
overflow: hidden;
}
:deep(.cesium-widget-credits){
display: none;
}
</style>
关于Viewer中options设置,请看详细描述:Viewer - Cesium Documentation