自定义Cesium缩放控件

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

move

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

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

1.  
   function zoomInByMove(flag){
2.  
   var position = viewer.camera.positionCartographic;
3.  
   // 1表示放大，0表示缩小
4.  
   if(flag){
5.  
   viewer.camera.moveForward(position.height * 0.5)
6.  
   }
7.  
   else{
8.  
   viewer.camera.moveBackward(position.height * 0.5)
9.  
   }
10.  
    }
11.  
    //绑定两个控件事件
12.  
    document.getElementById('zoomIn').addEventListener('click', function (){
13.  
    zoomInByMove(1);
14.  
    })
15.  
    document.getElementById('zoomOut').addEventListener('click', function (){
16.  
    zoomInByMove(0);
17.  
    })

zoomIn&zoomOut

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

flyToBoundingSphere       

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

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

以下是相关的代码：

1.  
   // 获取视图中心点
2.  
   function pickCenter() {
3.  
   var ellipsoid = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(
4.  
   viewer.canvas.clientWidth / 2,
5.  
   viewer.canvas.clientHeight / 2));
6.  
   var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(ellipsoid);
7.  
   var lon = curPosition.longitude * 180 / Math.PI;
8.  
   var lat = curPosition.latitude * 180 / Math.PI;
9.  
   return {
10.  
    lon: lon,
11.  
    lat: lat
12.  
    };
13.  
    }
14.  
    function zoomByBound(flag){
15.  
    const center = pickCenter()
16.  
    var height = viewer.camera.positionCartographic.height;
17.  
    const camera = viewer.camera;
18.  
    var boundingSph = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(center.lon, center.lat, 1000), height);
19.  
    var moveRate = 0;
20.  
    if(flag){
21.  
    moveRate = 0.5
22.  
    }
23.  
    else{
24.  
    moveRate = 1.5
25.  
    }
26.  
    var zoomParams = {
27.  
    duration: 0.8,
28.  
    offset: new Cesium.HeadingPitchRange(camera.heading, camera.pitch, height * moveRate)
29.  
    }
30.  
    camera.flyToBoundingSphere(boundingSph,zoomParams);
31.  
    }
32.  
     
33.  
    document.getElementById('zoomIn').addEventListener('click', function (){
34.  
    // zoomInByMove(1);
35.  
    zoomByBound(1)
36.  
    })
37.  
    document.getElementById('zoomOut').addEventListener('click', function (){
38.  
    // zoomInByMove(0);
39.  
    zoomByBound(0)
40.  
    })

效果：

如读到这篇记录的同学有更好的实现方法、记录有错误的地方，欢迎指出。

参考： 

Camera - Cesium Documentation

这篇好文章是转载于：学新通技术网