🗓️ 2022-08-07 🏷️ #GIS相关#

发现Cesium并没有像ol一样提供放大缩小的控件,查阅它的文档之后,找到了几个用于移动位置的api。

move 包含六个方向的move函数,分别是moveForward、moveBackward、moveRight、moveLeft、moveUp、moveDown,实现缩放需要用到前两个,来控制相机沿着视线方向移动,以下是api说明。

了解到api后,代码部分的编写就很简单,以下是js代码示例。

function zoomInByMove(flag){
      var position = viewer.camera.positionCartographic;
      // 1表示放大,0表示缩小
      if(flag){
          viewer.camera.moveForward(position.height * 0.5)
      }
      else{
          viewer.camera.moveBackward(position.height * 0.5)
      }
  }
//绑定两个控件事件
  document.getElementById('zoomIn').addEventListener('click', function (){
      zoomInByMove(1);
  })
  document.getElementById('zoomOut').addEventListener('click', function (){
      zoomInByMove(0);
  })

zoomIn &zoomOut

看起来,这两个函数才是缩放正统,实际的效果和前面的api趋于一致。

**flyToBoundingSphere ** 在缩放的过程中,前后视图变换间没有过渡,给人一股很僵硬的感觉,为了解决整个问题,引出了第三个缩放方法,借助flyToBoundingSphere方法,以下是api说明:

我觉得这个api,最重要的概念是BoundingSphere,暂且翻译作【包围球】吧,创建它需要指定一个三维空间的点和半径长度,思路是这样的,获取视图的中心点和相机的高度,根据二者创建一个包围球,最后在移动相机的过程中修改offset参数中的Range--即相机到中心点的距离,而pitch、heading等参数使用原始数值。

以下是相关的代码:

// 获取视图中心点
function  pickCenter() {
    var ellipsoid = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(
        viewer.canvas.clientWidth / 2,
        viewer.canvas.clientHeight / 2));
    var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(ellipsoid);
    var lon = curPosition.longitude * 180 / Math.PI;
    var lat = curPosition.latitude * 180 / Math.PI;
    return {
        lon: lon,
        lat: lat
    };
}
function  zoomByBound(flag){
    const center = pickCenter()
    var height = viewer.camera.positionCartographic.height;
    const camera = viewer.camera;
    var boundingSph = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(center.lon, center.lat, 1000), height);
    var moveRate = 0;
    if(flag){
        moveRate = 0.5
    }
    else{
        moveRate = 1.5
    }
    var zoomParams = {
        duration: 0.8,
        offset: new Cesium.HeadingPitchRange(camera.heading, camera.pitch, height * moveRate)
    }
    camera.flyToBoundingSphere(boundingSph,zoomParams);
}

document.getElementById('zoomIn').addEventListener('click', function (){
    // zoomInByMove(1);
    zoomByBound(1)
})
document.getElementById('zoomOut').addEventListener('click', function (){
    // zoomInByMove(0);
    zoomByBound(0)
})

效果:

如读到这篇记录的同学有更好的实现方法、记录有错误的地方,欢迎指出。参考:Camera - Cesium Documentation