下面汇总的相机视角跳转方法有很多种,都是根据某一个经纬度高程坐标[x,y,z],Entity实体或者矩形四至范围[west , south , east , north]作为视图跳转到目标范围的中心,然后在该位置上设置相机相对的偏移量,这个偏移量主要是设置相机的偏航角、航向角和翻滚角或者椭球范围,请大家根据实际情况选择合适的相机视角跳转方法 。
import * as Cesium from "cesium";
/**
* 相机移动到某一个坐标或者矩形范围内
* @param {Object} 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.Cartesian3.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 {Object} 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.flyTo({
target: Cesium.Cartesian3.fromDegrees(...option.xyz),
offset: {
heading: Cesium.Math.toRadians(option.heading),
pitch: Cesium.Math.toRadians(option.pitch),
range: option.range,
},
});
}
/**
* 相机移动到某一坐标范围内
* @param {Object} 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(90.0), // east, default value is 0.0 (north)
pitch: Cesium.Math.toRadians(-90), // default value (looking down)
roll: 0.0, // default value
},
});
}
/**
* 相机移动到移到某一个坐标范围内
* @param {Object} 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)===viewer.trackedEntity =entity
* @param {Object} viewer -地图对象
* @param {Object} option -参数对象
* @param {Object} option.entity -entity对象
* @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.entity, {
duration: option.duration,
offset: {
heading: Cesium.Math.toRadians(option.heading),
pitch: Cesium.Math.toRadians(option.pitch),
range: option.range,
},
// 视角跳转最大高度(一般不用)
// maximumHeight: 20000,
});
}
本文含有隐藏内容,请 开通VIP 后查看