Cesium（四）自定义飞行站点飞行

看了超图的例子，飞行路线是通过导入kml文件来实现的，这也适用于单个场景，但是我搭建的是一个平台，用的vue的组件化开发，就想做一个能在各个场景都能用的飞行工具，让用户自己定义几个站点，来实现飞行功能。

思路

1.渲染飞行的工具栏
2.添加和删除站点功能
3.飞行路线的显示与隐藏
4.开始、暂停、停止功能

飞行工具栏

<div id='toolbar' class="fly" v-if="isShow==='3'" position="top-left">
      <a type="button" class="button" @click="startFly">开始</a>
      <a type="button" class="button" @click="pauseFly">暂停</a>
      <a type="button" class="button" @click="stopFly">停止</a>
      <div style="width: 150px;">
          <a type="button" class="button" @click="addPlace">添加站点</a>
          <a type="button" class="button" @click="cleanPlace">清除站点</a>
      </div>
      <div class="checkbox">
          <label>
              <input type="checkbox" id="show-line" checked @change="changeLine"> 显示站点和路线
          </label>
      </div>
    </div>
<style>
.fly{
    position: fixed;
    z-index: 999;
    margin-top: 8px;
    margin-left: 8px;
    padding: 8px;
    background: #333131;
    border-radius: 5px;
    opacity: 0.8;
}
.button{
  border:1px solid darkgray;
  background: rgb(0, 0, 0);
  margin: 8px;
  font-size: 14px;
  padding: 3px;
  border-radius: 3px;
  color: #fff;
}
</style>

添加和删除站点功能

addPlace(){
      var Stop ={};
      var position=viewer.scene.camera.position;     
      //参数传入站点变量  
      Stop.heading=viewer.scene.camera.heading;
      Stop.pitch=viewer.scene.camera.pitch;
      Stop.roll=viewer.scene.camera.roll;
      Stop.time=10;
      //传入飞行站点数组
      this.allStops.push(Stop);
      this.$message.success('设置站点成功');
      //显示飞行路线
      var drowStop = {};
      var cartographic = Cesium.Cartographic.fromCartesian(position);
      drowStop.longitude = Cesium.Math.toDegrees(cartographic.longitude);
      drowStop.latitude = Cesium.Math.toDegrees(cartographic.latitude);
      drowStop.height = cartographic.height;
    
      this.drowallStops.push(drowStop);

      var length=this.drowallStops.length
      // 飞行路线和飞行站点
      if(this.line_bool){
          if(this.drowallStops.length>1){
            // 实体路线
              viewer.entities.add({
                    id:this.drowallStops.length+1000,
                    name : this.drowallStops.length+1000,
                    polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArrayHeights([this.drowallStops[length-2].longitude, this.drowallStops[length-2].latitude, this.drowallStops[length-2].height,this.drowallStops[length-1].longitude, this.drowallStops[length-1].latitude, this.drowallStops[length-1].height]),
                    width : 5,
                    material : Cesium.Color.BLUE
                    }
              });
          }
            //站点地标 
          viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(this.drowallStops[length-1].longitude,this.drowallStops[length-1].latitude,this.drowallStops[length-1].height),
                box : {
                    dimensions : new Cesium.Cartesian3(0.5, 0.5, 1.0),
                    material : Cesium.Color.WHITE
                },
            name : this.drowallStops.length+1000000,
            id:this.drowallStops.length+1000000
          });
      }
    
      //如果关闭显示了站点和飞行路线，添加的新站点和飞行路线将先不显示
      if(!this.line_bool){
            if(this.drowallStops.length>1){
                viewer.entities.add({
                    id:this.drowallStops.length+1000,
                      name : this.drowallStops.length+1000,
                      show:false,
                      polyline : {
                      positions : Cesium.Cartesian3.fromDegreesArrayHeights([this.drowallStops[length-2].longitude, this.drowallStops[length-2].latitude, this.drowallStops[length-2].height,this.drowallStops[length-1].longitude, this.drowallStops[length-1].latitude, this.drowallStops[length-1].height]),
                      width : 5,
                      material : Cesium.Color.BLUE
                      }
                });
            }
           viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(this.drowallStops[length-1].longitude,this.drowallStops[length-1].latitude,this.drowallStops[length-1].height),
                //这里可以换成图片，我用方形盒子代替
                    box : {
                        dimensions : new Cesium.Cartesian3(0.5, 0.5, 1.0),
                        material : Cesium.Color.WHITE
                    },
                      name : this.drowallStops.length+1000000,
                      id:this.drowallStops.length+1000000,
                      show:false
            });  
        }
    },
 cleanPlace(){
   this.allStops = []
   this.drowallStops = []
   viewer.entities._entities._array.forEach((res)=>{
     if(res.id>=1000){
       viewer.entities.removeById(res.id)
     }
   })
 },

飞行路线的显示与隐藏

changeLine(){
      viewer.entities.show=!viewer.entities.show
      this.line_bool = !this.line_bool
      this.copyIndex = undefined
    },

开始、暂停、停止功能

startFly(){
      var that = this 
      if(this.copyIndex){
        this.index = this.copyIndex
        this.copyIndex = undefined
        if(this.index<this.allStops.length){
        scene.screenSpaceCameraController.enableRotate = false;
        scene.screenSpaceCameraController.enableTranslate = false;
        scene.screenSpaceCameraController.enableZoom = false;
        scene.screenSpaceCameraController.enableTilt = false;
        scene.screenSpaceCameraController.enableLook = false;
        
        viewer.camera.setView({
          destination : new Cesium.Cartesian3.fromDegrees(this.drowallStops[this.index-1].longitude, this.drowallStops[this.index-1].latitude, this.drowallStops[this.index-1].height),
          orientation: {
                    heading :this.allStops[this.index-1].heading, 
                    pitch :this.allStops[this.index-1].pitch,
                    roll : this.allStops[this.index-1].roll                           
                }
        });
          fly();
      }
      }else{
        this.index = 1
        if(this.index<this.allStops.length){
          scene.screenSpaceCameraController.enableRotate = false;
          scene.screenSpaceCameraController.enableTranslate = false;
          scene.screenSpaceCameraController.enableZoom = false;
          scene.screenSpaceCameraController.enableTilt = false;
          scene.screenSpaceCameraController.enableLook = false;
          
          viewer.camera.setView({
            destination : new Cesium.Cartesian3.fromDegrees(this.drowallStops[0].longitude, this.drowallStops[0].latitude, this.drowallStops[0].height),
            orientation: {
                      heading :this.allStops[0].heading, 
                      pitch :this.allStops[0].pitch,
                      roll : this.allStops[0].roll                           
                  }
          });
            fly();
        }
      }

      function fly(){
        if(that.index>=that.drowallStops.length){
          scene.screenSpaceCameraController.enableRotate = true;
          scene.screenSpaceCameraController.enableTranslate = true;
          scene.screenSpaceCameraController.enableZoom = true;
          scene.screenSpaceCameraController.enableTilt = true;
          scene.screenSpaceCameraController.enableLook = true;
        }else{
          let l = that.index
          viewer.camera.flyTo({
              	destination : new Cesium.Cartesian3.fromDegrees(that.drowallStops[l].longitude, that.drowallStops[l].latitude, that.drowallStops[l].height), // 设置位置
                orientation: {
                    heading : that.allStops[l].heading, // 方向
                    pitch : that.allStops[l].pitch,// 倾斜角度
                    roll : that.allStops[l].roll
                },
                duration:5, // 设置飞行持续时间，默认会根据距离来计算
                complete: function () {
                  fly()
                },             
            });
            that.index++
        }
      }
    },
    // 飞行暂停
    pauseFly(){
      this.copyIndex = this.index
      this.index = this.drowallStops.length+1
    },
    // 飞行停止
    stopFly(){
      this.index = this.drowallStops.length+1
      this.copyIndex = undefined
    },