vue3.x +Cesium Cesium camera相机的使用（二）
2024-04-05 10:27:08
Cesium camera 相机系统 setView flyTo lookAt viewBoundingSphere
setView 的使用 通过设定目的地的三维坐标和视线方向将视角切换到设定视域范围内
const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);window.viewer.camera.setView({destination: position,orientation: { //相机视口方向heading: Cesium.Math.toRadians(0),//视口方向水平旋转，y轴 0正北方向pitch: Cesium.Math.toRadians(-90),//视口上下旋转，x轴 -90俯视朝向地面roll: 0 //视口翻转角度，z轴 0 不翻转}})flyTo 的使用 空间飞行逐步切换效果，设置飞行时间
window.viewer.camera.flyTo({destination: position,orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-90),roll: 0},duration: 5})lookAt 的使用 直接将视角跳转到目的地，鼠标旋转不会改变位置，锁定某个场景视角
var center = Cesium.Cartesian3.fromDegrees(116.39, 39.91)var heading = Cesium.Math.toRadians(50)var pitch = Cesium.Math.toRadians(-90)var range = 2500window.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))viewBoundingSphere 的使用 没有飞行过渡效果，直接切换视口到指定目的地,对一个物体进行多角度观测，建筑为进行定点漫游
var posi = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90), 0, 0)var orientation = Cesium.Transforms.headingPitchRollQuaternion(posi, hpr)//加载模型 var entity = window.viewer.entities.add({position: posi,orientation: orientation,model: {uri: '/cesium/SampleData/models/scen2/scene.gltf',minimumPixelSize: 10,maximumScale: 10,scale: 0.004,show: true}})var posi1 = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)var hpr1 = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-90), 0, 0)var orientation1 = Cesium.Transforms.headingPitchRollQuaternion(posi1, hpr1)window.viewer.entities.add({position: posi1,orientation: orientation1,model: {uri: '/cesium/SampleData/models/sangshi/scene.glb',minimumPixelSize: 10,maximumScale: 10,scale: 0.4,show: true}})window.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(posi, 100), new Cesium.HeadingPitchRange(0, 0, 0))全部代码：
<template><div class="map-box"><div class="cesium-camera-methods"><el-button @click="changeHeading">缩放地球</el-button></div><div id="cesiumCamera"></div></div>
</template><script>
import { getCurrentInstance, onMounted } from "vue";export default {name: "",mounted() {},setup() {onMounted(() => {const { appContext: { config: { globalProperties: { $axios: $axios } } } } = getCurrentInstance()// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)// 默认定位到中国上空，home定位到中国范围window.viewer = new Cesium.Viewer("cesiumCamera", {animation: true, //是否显示动画控件homeButton: true, //是否显示home键geocoder: true, //是否显示地名查找控件 如果设置为true，则无法查询baseLayerPicker: false, //是否显示图层选择控件timeline: false, //是否显示时间线控件fullscreenButton: true, //是否全屏显示scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源infoBox: false, //是否显示点击要素之后显示的信息sceneModePicker: true, //是否显示投影方式控件 三维/二维navigationInstructionsInitiallyVisible: true,navigationHelpButton: false, //是否显示帮助信息控件selectionIndicator: false, //是否显示指示器组件shouldAnimate: true,//模型动起来//1 加载天地图// imageryProvider: new Cesium.WebMapTileServiceImageryProvider({// url:// "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=edb7720e01611625116ff8ec05cae258",// layer: "tdtBasicLayer",// style: "default",// format: "image/jpeg",// tileMatrixSetID: "GoogleMapsCompatible",// show: true,// mininumLevel: 0,// maximumLevel: 16// })});// 隐藏版权window.viewer._cesiumWidget._creditContainer.style.display = "none";// 显示月亮window.viewer.scene.moon.show = true/** Cesium camera 相机系统 setView flyTo lookAt viewBoundingSphere***** *//* setView 的使用 通过设定目的地的三维坐标和视线方向将视角切换到设定视域范围内*/// const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);// window.viewer.camera.setView({// destination: position,// orientation: { //相机视口方向// heading: Cesium.Math.toRadians(0),//视口方向水平旋转，y轴 0正北方向// pitch: Cesium.Math.toRadians(-90),//视口上下旋转，x轴 -90俯视朝向地面// roll: 0 //视口翻转角度，z轴 0 不翻转// }// })/* flyTo 的使用 空间飞行逐步切换效果，设置飞行时间*/// window.viewer.camera.flyTo({// destination: position,// orientation: {// heading: Cesium.Math.toRadians(0),// pitch: Cesium.Math.toRadians(-90),// roll: 0// },// duration: 5// })/* lookAt 的使用 直接将视角跳转到目的地，鼠标旋转不会改变位置，锁定某个场景视角*/// var center = Cesium.Cartesian3.fromDegrees(116.39, 39.91)// var heading = Cesium.Math.toRadians(50)// var pitch = Cesium.Math.toRadians(-90)// var range = 2500// window.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))/* viewBoundingSphere 的使用 没有飞行过渡效果，直接切换视口到指定目的地,对一个物体进行多角度观测，建筑为进行定点漫游*/var posi = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90), 0, 0)var orientation = Cesium.Transforms.headingPitchRollQuaternion(posi, hpr)var entity = window.viewer.entities.add({position: posi,orientation: orientation,model: {uri: '/cesium/SampleData/models/scen2/scene.gltf',minimumPixelSize: 10,maximumScale: 10,scale: 0.004,show: true}})var posi1 = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)var hpr1 = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-90), 0, 0)var orientation1 = Cesium.Transforms.headingPitchRollQuaternion(posi1, hpr1)window.viewer.entities.add({position: posi1,orientation: orientation1,model: {uri: '/cesium/SampleData/models/sangshi/scene.glb',minimumPixelSize: 10,maximumScale: 10,scale: 0.4,show: true}})window.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(posi, 100), new Cesium.HeadingPitchRange(0, 0, 0))// window.viewer.entities.removeAll();// const position = Cesium.Cartesian3.fromDegrees(// -123.0744619,// 44.0503706,// 0// );// const heading = Cesium.Math.toRadians(0);// const pitch = 0;// const roll = 0;// const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);// const orientation = Cesium.Transforms.headingPitchRollQuaternion(// position,// hpr// );// const entity = window.viewer.entities.add({// position: position,// orientation: orientation,// model: {// uri: '/cesium/SampleData/models/GroundVehicle/GroundVehicle.glb',// minimumPixelSize: 100,// maximumScale: 1000,// },// });// window.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 100), new Cesium.HeadingPitchRange(0, 0, 0));})let changeHeading = () => {// let center = Cesium.Cartesian3.fromDegrees(116.39, 39.91)let heading = Cesium.Math.toRadians(90)let pitch = Cesium.Math.toRadians(-10)let range = 2000// console.log("centercenter", center, heading, pitch, range)// window.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))window.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-123.0724519, 44.0588, 1000),orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-90),roll: 0},duration: 5})window.viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-123.0724519, 44.0588, 0),new Cesium.HeadingPitchRange(heading, pitch, range))}return {changeHeading}}
};
</script>
<style lang="scss" scoped>
.map-box {width: 100%;height: 100%;display: flex;justify-content: space-between;.cesium-camera-methods {width: 160px;background: #ccc;padding: 20px;box-sizing: border-box;}
}#cesiumCamera {flex: 1;width: 100%;height: 100%;
}
</style>
vue3.x +Cesium Cesium camera相机的使用（二）相关推荐
- 第一章：Vue3.0+Openlayers+Cesium创建二三维联动项目
Vue3.0+Openlayers+Cesium创建二三维联动项目 简介 Vue项目创建 安装依赖 框架结构 地图加载 显示效果 结语 简介 大家好!从今天开始,我将分享我在GIS开发的过程中如何利用 ...
- Cesium中的相机—旋转矩阵
在学习坐标旋转的时候,一不小心就会把坐标系的旋转和矢量的旋转弄错,这里给出详细的两种旋转过程: 两种旋转矩阵的定义 下面仅以绕Z轴旋转为例,给出两种旋转的过程定义. 坐标系旋转,点不变(见下左图) 两 ...
- Cesium中的相机—HeadingPitchRoll
在Cesium中,常常使用HeadingPitchRoll三个角度来定义相机坐标系相对某基准坐标系的方位. 在详细阐述这个概念之前,先阐述在航空飞行中常用的yaw/pitch/roll. 偏航(yaw ...
- 基于Vue3+TS+Vite+Cesium创建项目
基于Vue3+TS+Vite+Cesium创建项目 基于Vite构建项目 安装配置Cesium 创建Cesium三维视图 运行结果 随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS ...
- vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
- 分享一个基于Vue3+TS构建Cesium组件库
分享一个基于Vue3+TS构建Cesium组件库 点击进入 Vue Cesium官网 //vc-navigation <template><el-row ref="view ...
- 手机相机里面的m_荣耀V30 PRO详细评测：Matrix Camera相机矩阵开启5G视频时代
[IT168 评测]随着手机摄像头的配置越来越高,手机上已经能实现不俗的拍照效果,甚至超越了数码相机(DC)成为了人们最常用的拍照工具.进入今年的下半年,随着5G的商用,手机厂商对于手机的摄像头功能优 ...
- 【Camera相机开发】实现相机预览
文章目录 认识 Parameters 设置预览尺寸 添加预览 Surface 开启和关闭预览 校正预览画面方向 自然方向 设备方向 局部坐标系 屏幕方向 摄像头传感器方向 画面方向校正 适配预览比例 ...
- QT中Camera相机调用
一:摄像头配置 1.创建摄像头类,获取电脑端的所有摄像头 cameras = QCameraInfo::availableCameras(); //获取所有相机的列表 if (cameras.coun ...
最新文章
- unity3d教程运行物理机制
- （转）Android 判断用户2G/3G/4G移动数据网络
- ubuntu下安装zabbix
- 图片压缩上传Thumbnailator 插件
- WPF 如何在代码中使用自定义的鼠标资源
- shell下如何删除文件的某一列
- 最新Discuz验证码和PhpWind验证码的识别
- UE4之判断点是否在矩形内
- bookstore项目学到的对象
- oracle sql中查询语句where中字段不为空用if怎么写_MyBatis手把手跟我做系列(三) --- 动态SQL标签...
- 用Python统计新浪微博各种表情使用频率
- C#.NET身份证验证算法
- 解决MyEclipse中导入项目的javascript文件中文乱码
- 由浅入深了解统计机器翻译模型
- Android GIF图片显示
- 【数据库】数据库错题集（一）
- signature=89d6821c2fe7d31483f21edf9c96c63b,Forage harvester
- 制造企业生产管理创新理念
- WiFi模块的AP模式和STA模式
- 中控指纹考勤机使用实战