cesiumweb前端

cesium的三种视角定位方式

2021-09-18  本文已影响0人  姜治宇

过渡定位-flyTo

这种方式切换视角有个过渡的过程,比较常用。

const viewer = new Cesium.Viewer('appCesium');
let params = {
    lon: 119.98,
    lat: 30.22,
    alt: 0,
    heading: Cesium.Math.toRadians(60.0),
    pitch: Cesium.Math.toRadians(30.0),
    roll: 0.0,
    range: 5000.0
};
viewer.camera.flyTo({
    // fromDegrees()将经纬度和高程转换为世界坐标
    destination: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt),
    orientation: {
        // 指向
        heading: params.heading,
        // 视角
        pitch: params.pitch,
        roll: params.roll
    }
});

直接定位-setView

这种方式是直接切换到目标视角,比较生硬,没有过渡效果。

const viewer = new Cesium.Viewer('appCesium');
viewer.camera.setView({
  destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 设置位置
  orientation: {
    heading : Cesium.Math.toRadians(20.0), // 方向
    pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
    roll : 0
  }
});

直接定位-lookAt

这种方式跟setView一样,都是直接切换到目标视角。

const viewer = new Cesium.Viewer('appCesium');
let params = {
    lon: 119.98,
    lat: 30.22,
    alt: 0,
    heading: Cesium.Math.toRadians(60.0),
    pitch: Cesium.Math.toRadians(30.0),
    roll: 0.0,
    range: 5000.0
};
let destination = Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt);
let orientation = new Cesium.HeadingPitchRange(params.heading, params.pitch, params.range);
viewer.scene.camera.lookAt(destination, orientation);

值得注意的是,lookAt这种方式无法用鼠标滚轮切换视角,而flyTo可以。

上一篇下一篇

猜你喜欢

热点阅读