Cesium自定义飞行漫游，可设定

痛定思痛。 2022-12-09 01:55 562阅读 0赞

前几天看到前辈操作一个三维软件，按住K键记录当前摄像头位置和视角，记录几个位置后，重复播放。然后要求我也应该实现这样的功能。

在前面的 [博客][Link 1] 中，我已经实现了按既定路线漫游的功能，甚至视角也可以动态的调整了。但“并不自♂由”！ 用户要可以自行设定浏览的位置和视角，并实现循环播放。

下面的思路是单位前辈提供的，相比之下简单到不能再简单了

### 思路 ###

1.  按键事件监听  
    这里是监听`k键`按下的事件
2.  记录`Camera`的位置(`position`)和视角(`heading`, `pitch`, `roll`)  
    注意不能直接存下`camera.position`，它是一个引用对象，必须保持当前值
3.  循环调用`flyTo`，依次遍历记录的位置  
    过渡动画使用`Cesium.EasingFunction.LINEAR_NONE`，这样在点切换时不会太突兀。

### 代码 ###

setCustomRoam() { 
          const points = []
          const camera = viewer.camera
    
          document.onkeydown = (event) => { 
            const e = event || window.event || arguments.callee.caller.arguments[0]
            if (e && e.keyCode === 75) { 
              points.push({ 
                position: Cesium.Cartesian3.clone(camera.position),
                heading: camera.heading,
                pitch: camera.pitch,
                roll: camera.roll,
                duration: 10
              })
            }
    
            if (e && e.keyCode === 13) { 
              let index = 0
              const fly = () => { 
                if (index >= points.length) { 
                  index = 0
                }
                camera.flyTo({ 
                  destination: points[index].position,
                  duration: points[index].duration,
                  orientation: { 
                    heading: points[index].heading,
                    pitch: points[index].pitch,
                    roll: points[index].roll
                  },
                  complete: function () { 
                    fly()
                  },
                  easingFunction: Cesium.EasingFunction.LINEAR_NONE
                })
    
                index++
              }
    
              fly()
            }
          }
        }

### 操作 ###

1.  调整好视角后，按下“k”键，然后在下一个位置，重复此操作；
2.  按下 “回车”键播放
    
    效果图就不放了，CSDN只支持5M大小，是在放不下了。

[Link 1]: https://blog.csdn.net/dahongdahong/article/details/108647230