
<template>
  <div class="container">
    <div id="cesiumContainer">
    </div>
  </div>
</template>

<script>
  //所有API都需要先在这里加载
  import { Viewer,ArcGisMapServerImageryProvider } from 'cesium/Cesium'
  import { Cartesian3,Math } from 'cesium/Cesium'
  import { ScreenSpaceEventHandler,ScreenSpaceEventType } from 'cesium/Cesium'
  import { PostProcessStageLibrary } from 'cesium/Cesium'
  import { SampledPositionProperty,TimeIntervalCollection,VelocityOrientationProperty,TimeInterval,ClockRange,JulianDate } from 'cesium/Cesium'
  import { Cartographic } from 'cesium/Cesium'
  import { Color,fromDegreesArray } from 'cesium/Cesium'
  import  'cesium/Widgets/widgets.css'
  export default {
    //回放功能
    name: "demo",
    data() {
      return {
        //地图数据
        viewer:{},
        //模型数据
        planeModel:{},
        //线数据
        polylineGeometry:{},
        //路线数据
        newData:[
          [{lnt:108.94297917888396, lat:34.260861373, height:6, time:0},
            {lnt:108.94926415648776, lat:34.26093525807751, height:6, time:5},
            {lnt:108.94910903353652, lat:34.25749013219453, height:6, time:10},
            {lnt:108.94236480853006, lat:34.257595830041254, height:6, time:15},
            {lnt:108.94228312403446, lat:34.2603692753018, height:6, time:20},
            {lnt:108.94297937130402, lat:34.26085621909053, height:6, time:25}]
        ],
        start:{},
        stop:{}
      };
    },
    created(){

    },
    mounted() {
      this.demoMap();
    },
    methods: {
      //地图初始化
      demoMap(){
        let viewer = new Viewer('cesiumContainer',{
          animation:true,       //是否显示动画控件
          homeButton:false,       //是否显示home键
          geocoder:false,         //是否显示地名查找控件        如果设置为true，则无法查询
          baseLayerPicker:false, //是否显示图层选择控件
          timeline:true,        //是否显示时间线控件
          fullscreenButton:false, //是否全屏显示
          scene3DOnly:true,     //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
          infoBox:false,         //是否显示点击要素之后显示的信息
          sceneModePicker:false,  //是否显示投影方式控件  三维/二维
          navigationInstructionsInitiallyVisible:false,
          navigationHelpButton:false,     //是否显示帮助信息控件
          selectionIndicator:false,        //是否显示指示器组件
          imageryProvider : new ArcGisMapServerImageryProvider({
            url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
          })
        });
        //去除logo
        viewer._cesiumWidget._creditContainer.style.display = "none";
        //取消默认点击 双击事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
        this.viewer = viewer;

        //镜头设定
        this.viewer.camera.flyTo({
          destination:Cartesian3.fromDegrees(108.94233931810786,34.260897788582035,600),
          orientation:{
            // 指向
            heading:Math.toRadians(0,0),
            // 视角
            pitch:Math.toRadians(-55),
            roll:0.0
          }
        });
        console.log(this.viewer.animation);
        this.initialAddModel();
      },
      //加载模型数据
      initialAddModel(){
        let self = this;
        self.viewer.scene.globe.enableLighting = true;
// 起始时间
        self.start = JulianDate.fromDate(new Date(2021,1,28));
// 持续时间
        let time = self.newData[self.newData.length-1][self.newData[self.newData.length-1].length-1].time;
// 结束时间
        self.stop = JulianDate.addSeconds(self.start, time, new JulianDate());

// 设置始时钟始时间
        self.viewer.clock.startTime = self.start.clone();
// 设置时钟当前时间
        self.viewer.clock.currentTime = self.start.clone();
// 设置始终停止时间
        self.viewer.clock.stopTime  = self.stop.clone();
// 时间速率，数字越大时间过的越快
        self.viewer.clock.multiplier = 1;
// 时间轴
        self.viewer.timeline.zoomTo(self.start,self.stop);
// 循环执行,即为2，到达终止时间，重新从起点时间开始
        self.viewer.clock.clockRange = ClockRange.LOOP_STOP;

        for(let j=0; j<self.newData.length; j++){
          let property = self.computeFlight(self.newData[j]);
          //console.log(property)
          // 添加模型
          self.planeModel = self.viewer.entities.add({
            // 和时间轴关联
            availability : new TimeIntervalCollection([new TimeInterval({
              start : self.start,
              stop : self.stop
            })]),
            position: property,
            // 根据所提供的速度计算模型的朝向
            orientation: new VelocityOrientationProperty(property),
            // 模型数据
            model: {
              uri: '/static/img/gangshao3.gltf',
              minimumPixelSize:0.1,
              maximumScale : 0.1
            }
          });
        }
        self.drawPolyline();
        self.dbClick(self.viewer);
      },
      computeFlight(source) {
        let self = this;
        // 取样位置 相当于一个集合
        let property = new SampledPositionProperty();
        for(let i=0; i<source.length; i++){
          let time = JulianDate.addSeconds(self.start, source[i].time, new JulianDate);
          let position = Cartesian3.fromDegrees(source[i].lnt, source[i].lat, source[i].height);
          // 添加位置，和时间对应
          property.addSample(time, position);
        }
        return property;
      },
      //绘制线
      drawPolyline() {
        let self = this;
        let address = [];
        for(let i=0;i<self.newData[0].length;i++){
          address.push(self.newData[0][i].lnt);
          address.push(self.newData[0][i].lat);
        }
        self.polylineGeometry = self.viewer.entities.add({
          name: 'Red line on the surface',
          polyline: {
            positions: Cartesian3.fromDegreesArray(address),
            width: 8,
            material: Color.fromBytes(0.2,255,255,255)
          }
        });
        self.viewer.play();
      },
      //点击事件
      dbClick(viewer) {
        let handler= new ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (event) {
          let earthPosition  = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
          let cartographic = Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cartographic());
          let lat=Math.toDegrees(cartographic.latitude);
          let lng=Math.toDegrees(cartographic.longitude);
          let height=cartographic.latitude;
          console.log(lng);
          console.log(lat);
          console.log(height);
        }, ScreenSpaceEventType.LEFT_CLICK);

      },
    },
  };
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
  }
  #cesiumContainer {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  .text-box{
    position: absolute;
    left:10px;
    top:10px;
    width:300px;
    background:rgba(255,255,255,0.6);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index:1;
    padding:20px;
  }
  .text-box div{
    display: flex;
  }
  .text-box div p{
    padding:0;
    margin:0;
    text-align: left;
  }
  .text-box div p:nth-child(1){
    flex:1;
  }
  .text-box div p:nth-child(2){
    width:110px;
  }

</style>
