
<template>
  <div class="container">
    <div id="cesiumContainer">
      <div class="text-box" v-if="newData.dataInfo">
        <p @click="delObj">选中</p>
        <div>
          <p>库房名称:</p>
          <p>{{newData.dataInfo.name}}</p>
        </div>
        <div>
          <p>所在位置:</p>
          <p>{{newData.dataInfo.address}}</p>
        </div>
        <div>
          <p>所属医疗队所名称:</p>
          <p>{{newData.dataInfo.teamSoName}}</p>
        </div>
        <div>
          <p>所属医疗队名称:</p>
          <p>{{newData.dataInfo.teamName}}</p>
        </div>
        <div>
          <p>配备人员数量:</p>
          <p>{{newData.dataInfo.peopleNum}}</p>
        </div>
        <div>
          <p>配备装备数量:</p>
          <p>{{newData.dataInfo.equipmentNum}}</p>
        </div>
        <div>
          <p>配备耗材数量:</p>
          <p>{{newData.dataInfo.suppliesNum}}</p>
        </div>
        <div>
          <p>温度监控:</p>
          <p>{{newData.dataInfo.temperature}}</p>
        </div>
        <div>
          <p>湿度监控:</p>
          <p>{{newData.dataInfo.humidity}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //所有API都需要先在这里加载
  import { Viewer,ArcGisMapServerImageryProvider } from 'cesium/Cesium'
  import { Cartesian3,Math,HeadingPitchRoll,Transforms,Color,LabelStyle } from 'cesium/Cesium'
  import { ScreenSpaceEventHandler,ScreenSpaceEventType,defined } from 'cesium/Cesium'
  import  'cesium/Widgets/widgets.css'
  export default {
    name: "earth",
    data() {
      return {
        //地图数据
        viewer:{},
        //模型数据
        entity:{},
        //初始一级数据
        addressList:[
          {
            id:"01",
            type:"1",
            name:"岗哨1",
            lnt:108.942354,//经度
            lat:34.261056,//纬度
            img:"/static/img/gangshao3.gltf",
            heading:0.35,//方向
            pitch:0,//俯视角度
            roll:0,//旋转角度
            minimumPixelSize:0.01,
            maximumScale:0.01,
            dataInfo:{
              name:"库房1",//库房名称
              address:"西大街1号",//位置
              teamSoName:"一所",//对应的医疗队所名称
              teamName:"一队",//医疗队名称
              peopleNum:"99",//人员数量（单位：人）
              equipmentNum:"1000",//装备数量（单位：台）
              suppliesNum:"2000",//耗材数量（单位：个）
              temperature:"20°",//温度
              humidity:"20"//湿度
            }
          },
          {
            id:"02",
            type:"2",
            name:"岗哨2",
            lnt:108.942354,//经度
            lat:34.261006,//纬度
            img:"/static/img/gangshao3.gltf",
            heading:0.35,//方向
            pitch:0,//俯视角度
            roll:0,//旋转角度
            minimumPixelSize:0.01,
            maximumScale:0.01,
            dataInfo:{
              name:"库房2",//库房名称
              address:"西大街2号",//位置
              teamSoName:"二所",//对应的医疗队所名称
              teamName:"二队",//医疗队名称
              peopleNum:"99",//人员数量（单位：人）
              equipmentNum:"1000",//装备数量（单位：台）
              suppliesNum:"2000",//耗材数量（单位：个）
              temperature:"20°",//温度
              humidity:"20"//湿度
            }
          },
          {
            id:"03",
            type:"3",
            name:"岗哨3",
            lnt:108.942354,//经度
            lat:34.260956,//纬度
            img:"/static/img/gangshao3.gltf",
            heading:0.35,//方向
            pitch:0,//俯视角度
            roll:0,//旋转角度
            minimumPixelSize:0.01,
            maximumScale:0.01,
            dataInfo:{
              name:"库房3",//库房名称
              address:"西大街3号",//位置
              teamSoName:"三所",//对应的医疗队所名称
              teamName:"三队",//医疗队名称
              peopleNum:"99",//人员数量（单位：人）
              equipmentNum:"1000",//装备数量（单位：台）
              suppliesNum:"2000",//耗材数量（单位：个）
              temperature:"20°",//温度
              humidity:"20"//湿度
            }
          },
          {
            id:"04",
            type:"4",
            name:"岗哨4",
            lnt:108.942354,//经度
            lat:34.260906,//纬度
            img:"/static/img/gangshao3.gltf",
            heading:0.35,//方向
            pitch:0,//俯视角度
            roll:0,//旋转角度
            minimumPixelSize:0.01,
            maximumScale:0.01,
            dataInfo:{
              name:"库房4",//库房名称
              address:"西大街4号",//位置
              teamSoName:"四所",//对应的医疗队所名称
              teamName:"四队",//医疗队名称
              peopleNum:"99",//人员数量（单位：人）
              equipmentNum:"1000",//装备数量（单位：台）
              suppliesNum:"2000",//耗材数量（单位：个）
              temperature:"20°",//温度
              humidity:"20"//湿度
            }
          },
        ],
        //点击选中数据展示
        newData:{},
        //点击事件1
        clickInfoOne:{},
        //点击事件2
        clickInfoTwo:{},
      };
    },
    created(){

    },
    mounted() {

      this.demoMap();
    },
    methods: {
      //地图初始化
      demoMap(){
        let viewer = new Viewer('cesiumContainer',{
          animation:false,       //是否显示动画控件
          homeButton:false,       //是否显示home键
          geocoder:false,         //是否显示地名查找控件        如果设置为true，则无法查询
          baseLayerPicker:false, //是否显示图层选择控件
          timeline:false,        //是否显示时间线控件
          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.demoOne();
      },
      //加载模型数据
      demoOne(){
        let self = this;
        //循环数据 加载gltf格式数据到cesium
        for(let i=0;i<self.addressList.length;i++){
          let position = Cartesian3.fromDegrees(self.addressList[i].lnt,self.addressList[i].lat, 0);
          let hpr = new HeadingPitchRoll(self.addressList[i].heading, self.addressList[i].pitch, self.addressList[i].roll);
          let orientation = Transforms.headingPitchRollQuaternion(position, hpr);
          //添加模型实例
          self.entity = self.viewer.entities.add({
            id : self.addressList[i].id,
            type : self.addressList[i].type,//非官方-自定义增加的字段 可用于数据筛选
            name : self.addressList[i].name,
            position : position,
            orientation : orientation,
            //模型在地图上标记文字
            label:{
              text:self.addressList[i].name,
              font: "24px Helvetica",
              fillColor: Color.SKYBLUE,
              outlineColor: Color.BLACK,
              outlineWidth: 2,
              style: LabelStyle.FILL_AND_OUTLINE,
            },
            //模型数据
            model : {
              uri: self.addressList[i].img,
              minimumPixelSize : self.addressList[i].minimumPixelSize,
              maximumScale : self.addressList[i].maximumScale
            },
          });
        }
        //镜头设定
        self.viewer.camera.setView({
          destination:Cartesian3.fromDegrees(self.addressList[0].lnt-0.00015,self.addressList[0].lat,20),
          orientation:{
            // 指向
            heading:Math.toRadians(90,0),
            // 视角
            pitch:Math.toRadians(-55),
            roll:0.0
          }
        });
        this.demoTwo();
        this.clickAdd();
      },
      //模型添加点击事件
      demoTwo(){
        let self = this;
        self.clickInfoOne = new ScreenSpaceEventHandler(self.viewer.scene.canvas);
        self.clickInfoOne.setInputAction(function (movement) {
          let pick = self.viewer.scene.pick(movement.position);
          if (defined(pick) && (pick.id.id)) {
            self.clickOne(pick.id);
          }
        }, ScreenSpaceEventType.LEFT_CLICK);
      },
      //点击事件1
      clickOne(item){
        let self = this;
        for(let i=0;i<self.addressList.length;i++){
          if (self.addressList[i].id==item.id) {
            self.newData = {...self.addressList[i]};
          }
        }
      },
      //模型添加双击事件
      clickAdd(){
        let self = this;
        self.clickInfoTwo = new ScreenSpaceEventHandler(self.viewer.scene.canvas);
        self.clickInfoTwo.setInputAction(function (movement) {
          let pick = self.viewer.scene.pick(movement.position);
          if (defined(pick) && (pick.id.id)) {
            self.clickAddOne(pick.id);
            // console.log("这是双击")
          }
        }, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      },
      //双击事件1
      clickAddOne(item){
        let self = this;
        for(let i=0;i<self.addressList.length;i++){
          if (self.addressList[i].id==item.id) {
            //镜头设定
            self.viewer.camera.setView({
              destination:Cartesian3.fromDegrees(self.addressList[i].lnt-0.00015,self.addressList[i].lat,20),
              orientation:{
                // 指向
                heading:Math.toRadians(90,0),
                // 视角
                pitch:Math.toRadians(-55),
                roll:0.0
              }
            });
          }
        }
      },
      delObj(){
        let self = this;
        self.viewer.entities.removeAll();
        //清除特定鼠标事件
        self.clickInfoOne.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
        self.clickInfoTwo.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
        //添加选中模型
        let position = Cartesian3.fromDegrees(self.newData.lnt,self.newData.lat, 0);
        let hpr = new HeadingPitchRoll(self.newData.heading, self.newData.pitch, self.newData.roll);
        let orientation = Transforms.headingPitchRollQuaternion(position, hpr);
        //添加模型实例
        self.entity = self.viewer.entities.add({
          id : self.newData.id,
          type : self.newData.type,//非官方-自定义增加的字段 可用于数据筛选
          name : self.newData.name,
          position : position,
          orientation : orientation,
          //模型在地图上标记文字
          label:{
            text:self.newData.name,
            font: "24px Helvetica",
            fillColor: Color.SKYBLUE,
            outlineColor: Color.BLACK,
            outlineWidth: 2,
            style: LabelStyle.FILL_AND_OUTLINE,
          },
          //模型数据
          model : {
            uri: self.newData.img,
            minimumPixelSize : self.newData.minimumPixelSize,
            maximumScale : self.newData.maximumScale
          },
        });

      },
    },
  };
</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>
