cesium相机视角跳转定位方法汇总

       下面汇总的相机视角跳转方法有很多种,都是根据某一个经纬度高程坐标[x,y,z],Entity实体或者矩形四至范围[west , south , east , north]作为视图跳转到目标范围的中心,然后在该位置上设置相机相对的偏移量,这个偏移量主要是设置相机的偏航角、航向角和翻滚角或者椭球范围,请大家根据实际情况选择合适的相机视角跳转方法 。以下方法都不适合一般的运动轨迹视角跟随。
viewer.trackedEntity =entity    //注意,这个方法一般用于动画轨迹视图跟踪。此时视图可以旋转缩放,不能平移,因为实体对象会一直保持在当前视图中心。在一些极端情况下会出些一些bug,比如缩放到距离实体很近的时候,实体运动会拖影卡顿,并且可以平移地图使得实体移除到视图之外,建议在远距离跟踪的时候使用该方法。
import * as Cesium from "cesium";

/**
 * 相机移动到某一个坐标或者矩形范围内
 * @param {Cesium.Viewer} viewer -地图对象
 * @param {Object} option -参数对象
 * @param {Number} option.duration -视图跳转时间(单位/s)
 * @param {String} option.type -跳转目标类型方式,‘point’:相机移动到某一个坐标;‘rectangle’:相机移动到矩形范围内
 * @param {Array} option.xyz -跳转目标类型方式:‘point’,则xyz为[x,y,z]
 * @param {Array} option.wsen -跳转目标类型方式:‘rectangle’,则wsen为[west , south , east , north],(单位/度)
 * @param {Number} option.heading -相机航向角
 * @param {Number} option.pitch -相机俯仰角
 * @param {Number} option.roll -相机翻滚角
 */
export function cameraFlyTo(viewer, option) {
  let destination;
  if ((option.type == "point")) {
    destination = Cesium.Cartesian3.fromDegrees(...option.xyz);
  } else if ((option.type == "rectangle")) {
    destination = Cesium.Rectangle.fromDegrees(...option.ewsn);
  }
  viewer.camera.flyTo({
    duration: option.duration,
    destination,
    orientation: {
      heading: Cesium.Math.toRadians(option.heading),
      pitch: Cesium.Math.toRadians(option.pitch),
      roll: option.roll,
    },
  });
}

/**
 * 相机移动到某一坐标点上,可以用于视角跟踪实体对象,但是视角是以坐标点为中心固定的,不可以平移
 * 适合视角跟随的情况:实时运动轨迹,可以获取前后两个点,实时计算偏北角(航向角)
 * @param {Cesium.Viewer} viewer -地图对象
 * @param {Object} option -参数对象
 * @param {Array} option.xyz -跳转椭球体中心坐标数组[x,y,z]
 * @param {Number} option.heading -相机航向角
 * @param {Number} option.pitch -相机俯仰角
 * @param {Number} option.range -以椭球体中心坐标为中心的的范围大小(单位/m)
 */
export function cameraLookAt(viewer, option) {
  viewer.camera.lookAt(
    Cesium.Cartesian3.fromDegrees(...option.xyz),
    new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(option.heading),
      Cesium.Math.toRadians(option.pitch),
      option.range
    )
  );
}

/**
 * 相机移动到某一坐标点上,不可用于视角跟踪实体对象
 * @param {Cesium.Viewer} viewer -地图对象
 * @param {Object} option -参数对象
 * @param {Array} option.xyz -跳转椭球体中心坐标数组[x,y,z]
 * @param {Number} option.duration -视图跳转时间(单位/s)
 * @param {Number} option.heading -相机航向角
 * @param {Number} option.pitch -相机俯仰角
 * @param {Number} option.roll -相机翻滚角
 */
export function cameraSetView(viewer, option) {
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(...option.xyz),
    orientation: {
      heading: Cesium.Math.toRadians(option.heading),
      pitch: Cesium.Math.toRadians(option.pitch),
      roll: option.roll,
    },
  });
}

/**
 * 相机视图移动到移到某一个坐标范围内,注意可以用来定位用,不可用于视角跟踪实体对象!!!!
 * @param {Cesium.Viewer} viewer -地图对象
 * @param {Object} option -参数对象
 * @param {Array} option.xyz -跳转椭球体中心坐标数组[x,y,z]
 * @param {Number} option.radius -跳转椭球体半径(单位/m)
 * @param {Number} option.duration -视图跳转时间(单位/s)
 * @param {Number} option.heading -相机航向角
 * @param {Number} option.pitch -相机俯仰角
 * @param {Number} option.range -以跳转坐标为中心的的范围大小(单位/m)
 */
export function cameraflyToBoundingSphere(viewer, option) {
  viewer.camera.flyToBoundingSphere(
    new Cesium.BoundingSphere(
      Cesium.Cartesian3.fromDegrees(...option.xyz),
      option.radius
    ),
    {
      duration: option.duration,
      offset: {
        heading: Cesium.Math.toRadians(option.heading),
        pitch: Cesium.Math.toRadians(option.pitch),
        range: option.range,
      },
      complete: function () {
        console.log("飞行完成!");
      },
      cancel: function () {
        console.log("飞行取消!");
      },
    }
  );
}

/**
 * 相机移动到某一entity实体上 === viewer.zoomTo(entity),不可用于视角跟踪实体对象
 * @param {Cesium.Viewer} viewer -地图对象
 * @param {Object} option -参数对象
 * @param {Object} option.target -target可以是单个或者多个entity对象,以及各自cesium支持的图层,不能是坐标
 * @param {Number} option.duration -视图跳转时间(单位/s)
 * @param {Number} option.heading -相机航向角
 * @param {Number} option.pitch -相机俯仰角
 * @param {Number} option.range -以entity为中心的的范围大小(单位/m)
 */
export function viewerFlyTo(viewer, option) {
  viewer.flyTo(option.target, {
    duration: option.duration,
    offset: {
      heading: Cesium.Math.toRadians(option.heading),
      pitch: Cesium.Math.toRadians(option.pitch),
      range: option.range,
    },
    // 视角跳转最大高度(一般不用)
    // maximumHeight: 20000,
  });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不要随地大便

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值