Cesium在vue3中的安装、使用
1.cesium插件引入,vite-plugin-cesium
是一个专门为 Vite 构建工具定制的插件,用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程,并提供了一些额外的功能和配置选项。而直接安装 Cesium 库,你需要手动配置 Vite 项目以确保正确引入和使用 Cesium。这可能涉及到配置模块加载器、处理依赖关系、解决版本冲突等问题。相比之下,使用 vite-plugin-cesium
插件可以让这些步骤更加简单和方便,所以要使用vite构建项目。
1 | npm i cesium vite-plugin-cesium vite -D |
2.配置vite.config.js
import cesium from 'vite-plugin-cesium' export default defineConfig({ plugins: [ cesium() ] })
3.在组件中,cesium挂载前,容器需要已经渲染挂载,放在生命周期onMounted中。viewer中的配置项
<template> <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div> </template>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script setup lang= "ts" > import * as Cesium from 'cesium' import { onMounted ref } from 'vue' const viewer = ref () onMounted(() => { viewer.value = new Cesium.Viewer( 'cesiumContainer' , { infoBox: false , // 禁用沙箱,解决控制台报错 navigationHelpButton: false , }) viewer.value.camera.setView({ // 设置相机位置,经度,纬度,高度 destination: Cesium.Cartesian3.fromDegrees(118.03, 24.485, 10000), orientation: { // 初始视角 heading: Cesium.Math.toRadians(0), // 偏航角,单位弧度 pitch: Cesium.Math.toRadians(-45), // 仰俯角,单位弧度 roll: Cesium.Math.toRadians(0) // 翻滚角,单位弧度 } }) })</script> |
viewer.value.cesiumWidget.creditContainer.style.display = "none" // 去除cesium ion logo
viewer中的可配置项,可参考官网:https://www.cesium.com/
偏航角、仰俯角、翻滚角理解参考:https://www.pianshen.com/article/59611147769/
1 2 3 4 5 6 7 8 9 10 11 12 13 | geocoder: 位置查找工具 baseLayerPicker: 图层选择器(地形影像服务) homeButton: 视角返回初始位置 fullscreenButton: 全屏 animation: 左下角仪表盘(动画器件) timeline: 底部时间线 sceneModePicker: 选择视角的模式(球体、平铺、斜视平铺) navigationHelpButton: 导航帮助按钮 infoBox: 信息框控件 navigationInstructionsInitiallyVisible: 导航说明初始可见 shouldAnimate: 动画 requestWaterMask: 请求水面罩 requestVertexNormals: 请求顶点法线 |
代码地址:https://gitee.com/yuexiayunsheng/vue3learn/commit/c275c354d68a4bf63415bab88be6e83597b8a957
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
2023-03-06 在vue3中使用tesseract.js实现OCR实现文字识别(识别图片中的文字)