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

  

posted @   月下云生  阅读(1915)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
历史上的今天:
2023-03-06 在vue3中使用tesseract.js实现OCR实现文字识别(识别图片中的文字)
点击右上角即可分享
微信分享提示