Cesium初探2

话不多说，咱们来看如何使用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