Cesium Vue(三)— 相机配置

1. 坐标系转换

1.1 cesium使用到的坐标系

  1. 屏幕坐标系,二维的笛卡尔坐标系,API => Cartesian2
  2. 地理空间坐标系,WGS-84坐标系, API => Cartographic(经度,维度,高度)
  3. 三维笛卡尔空间直角坐标系,API => Cartesian3

1.2 坐标转换具体实现

  • 角度与弧度的转换
js 复制代码
var radians=Cesium.Math.toRadians(90);
console.log("radians ==> "+radians);
  • 弧度转角度
js 复制代码
var degrees=Cesium.Math.toDegrees(2*Math.PI);
console.log("degrees ==> "+degrees);
  • 将经纬度转成笛卡尔坐标系
js 复制代码
var cartesian3=Cesium.Cartesian3.fromDegrees(
  89.5,//经度
  20.4,//纬度
  100//高度
);
console.log("cartesian3 ==> "+cartesian3);
  • 将笛卡尔坐标系转换为经纬度
js 复制代码
var cartographic=Cesium.Cartographic.fromCartesian(cartesian3);
console.log("cartographic ==> "+cartographic);
//得到结果弧度,转成角度
var longitude=Cesium.Math.toDegrees(cartographic.longitude);
var latitude=Cesium.Math.toDegrees(cartographic.latitude);
console.log("LonLat ==> "+longitude+","+latitude);

2. 设置相机的位置和视角

  • 设置相机位置和视角
js 复制代码
 // 设置相机视角瞬间到达指定位置,角度
  // (116.393428, 39.90923)生成position是天安门的位置
  var position = Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100);
  viewer.camera.setView({
    // 指定相机位置
    destination: position,
    // 指定相机视角
    orientation: {
      // 指定相机的朝向,偏航角,相当于 X 角
      heading: Cesium.Math.toRadians(0),
      // 指定相机的俯仰角,0度是竖直向上,-90度是向下  相当于 y 角
      pitch: Cesium.Math.toRadians(-20),
      // 指定相机的滚转角,翻滚角   相当于 z 角
      roll: 0,
    },
  });
  • 设置带相机动画的位置和视角
js 复制代码
// flyto,让相机飞往某个地方
viewer.camera.flyTo({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-20),
      roll: 0,
    },
});

3. 使用键盘控制相机的位置和视角

js 复制代码
// 通过按键移动相机
  document.addEventListener("keydown", (e) => {
    // console.log(e);
    // 获取相机离地面的高度
    var height = viewer.camera.positionCartographic.height;
    var moveRate = height / 100;
    if (e.key == "w") {
      // 设置相机向前移动
      viewer.camera.moveForward(moveRate);
    } else if (e.key == "s") {
      // 设置相机向后移动
      viewer.camera.moveBackward(moveRate);
    } else if (e.key == "a") {
      // 设置相机向左移动
      viewer.camera.moveLeft(moveRate);
    } else if (e.key == "d") {
      // 设置相机向右移动
      viewer.camera.moveRight(moveRate);
    } else if (e.key == "q") {
      // 设置相机向左旋转相机
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key == "e") {
      // 设置相机向右旋转相机
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
    } else if (e.key == "r") {
      // 设置相机向上旋转相机
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1));
    } else if (e.key == "f") {
      // 设置相机向下旋转相机
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
    } else if (e.key == "g") {
      // 向左逆时针翻滚
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key == "h") {
      // 向右顺时针翻滚
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
    }
  });
相关推荐
Aotman_35 分钟前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61436 分钟前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf40 分钟前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育1 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9492 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld2 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu2 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子2 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖2 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
qq_12498707533 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计