
<template>
  <div class="container">
    <div id="cesiumContainer">
      <!--仓库数据-->
      <div class="text-box" v-if="newData.name">
        <div>
          <p>库房名称:</p>
          <p>{{newData.name}}</p>
        </div>
        <div>
          <p>所在位置:</p>
          <p>{{newData.address}}</p>
        </div>
        <div>
          <p>所属医疗队所名称:</p>
          <p>{{newData.teamSoName}}</p>
        </div>
        <div>
          <p>所属医疗队名称:</p>
          <p>{{newData.teamName}}</p>
        </div>
        <div>
          <p>配备人员数量:</p>
          <p>{{newData.peopleNum}}</p>
        </div>
        <div>
          <p>配备装备数量:</p>
          <p>{{newData.equipmentNum}}</p>
        </div>
        <div>
          <p>配备耗材数量:</p>
          <p>{{newData.suppliesNum}}</p>
        </div>
        <div>
          <p>温度监控:</p>
          <p>{{newData.temperature}}</p>
        </div>
        <div>
          <p>湿度监控:</p>
          <p>{{newData.humidity}}</p>
        </div>
      </div>
      <!--货架数据-->
      <div class="text-box" v-if="newList.name">
        <div>
          <p>货架编号:</p>
          <p>{{newList.name}}</p>
        </div>
        <div>
          <p>所在位置:</p>
          <p>{{newList.address}}</p>
        </div>
        <div>
          <p>物资类型:</p>
          <p>{{newList.className}}</p>
        </div>
      </div>
      <div class="text-box-right" v-if="newList.name">
        <div>
          <p>物资名称</p>
          <p>数量</p>
        </div>
        <div v-for="(item,index) in newList.list" :key="index">
          <p>{{item.name}}</p>
          <p>{{item.num}}</p>
        </div>
      </div>
      <!--货架详情-->
      <div class="text-box" v-if="minList.name">
        <div>
          <p>货架编号:</p>
          <p>{{minList.name}}</p>
        </div>
        <div>
          <p>所在位置:</p>
          <p>{{minList.address}}</p>
        </div>
        <div>
          <p>物资类型:</p>
          <p>{{minList.className}}</p>
        </div>
      </div>
      <div class="text-box-right" v-if="minList.name">
        <div>
          <p>物资名称</p>
          <p>数量</p>
        </div>
        <div v-for="(item,index) in minList.list" :key="index">
          <p>{{item.name}}</p>
          <p>{{item.num}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //所有API都需要先在这里加载
  import { Viewer,ArcGisMapServerImageryProvider,Rectangle,SingleTileImageryProvider } from 'cesium/Cesium'
  import { Cartesian3,Math,HeadingPitchRoll,Transforms,Color,LabelStyle } from 'cesium/Cesium'
  import { ScreenSpaceEventHandler,ScreenSpaceEventType,defined } from 'cesium/Cesium'
  import { PostProcessStageLibrary } from 'cesium/Cesium'
  import  'cesium/Widgets/widgets.css'
  export default {
    name: "demoOne",
    data() {
      return {
        //地图数据
        viewer:{},
        //模型数据
        entity:{},
        //初始一级数据
        addressList:[
          {
            id:"1",
            dataInfo:{
              name:"库房1",//库房名称
              address:"西大街1号",//位置
              teamSoName:"一所",//对应的医疗队所名称
              teamName:"一队",//医疗队名称
              peopleNum:"99",//人员数量（单位：人）
              equipmentNum:"1000",//装备数量（单位：台）
              suppliesNum:"2000",//耗材数量（单位：个）
              temperature:"20°",//温度
              humidity:"20"//湿度
            },
            bottomData:{
              id:"01",
              type:1,
              typeId:"1",
              name:"一层",
              lnt:108.941054,//经度
              lat:34.260056,//纬度
              img:"/static/img/mxTwo/4haolou1ceng.gltf",
              heading:-0.801,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.15,
              maximumScale:0.15,
              height:0
            },
            topData:{
              id:"02",
              type:1,
              typeId:"1",
              name:"房顶",
              lnt:108.94133,//经度
              lat:34.26022,//纬度
              img:"/static/img/mxTwo/4haoloudingceng.gltf",
              heading:-0.8,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.07,
              maximumScale:0.07,
              height:3.7
            },
            listData:[
              {
                id:"hj-1-01",
                type:2,
                typeId:"1",
                name:"货架-01",
                lnt:108.941525,//经度
                lat:34.260205,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-01",//库房名称
                  address:"西北侧一号位",//位置
                  className:"补给物资",
                  list:[
                    {
                      name:"补给物品1",
                      num:"99",
                    },
                    {
                      name:"补给物品2",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-1-02",
                type:2,
                typeId:"1",
                name:"货架-02",
                lnt:108.941475,//经度
                lat:34.260245,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-02",//库房名称
                  address:"西北侧二号位",//位置
                  className:"震灾物资",
                  list:[
                    {
                      name:"震灾物品1",
                      num:"99",
                    },
                    {
                      name:"震灾物品2",
                      num:"99",
                    },
                    {
                      name:"震灾物品3",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-1-03",
                type:2,
                typeId:"1",
                name:"货架-03",
                lnt:108.941425,//经度
                lat:34.260285,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-03",//库房名称
                  address:"西北侧三号位",//位置
                  className:"医疗物资",
                  list:[
                    {
                      name:"医疗物品1",
                      num:"99",
                    },
                    {
                      name:"医疗物品2",
                      num:"99",
                    },
                    {
                      name:"医疗物品3",
                      num:"99",
                    },
                    {
                      name:"医疗物品4",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-1-04",
                type:2,
                typeId:"1",
                name:"货架-04",
                lnt:108.941375,//经度
                lat:34.260325,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-04",//库房名称
                  address:"西北侧四号位",//位置
                  className:"常规物资",
                  list:[
                    {
                      name:"常规物品1",
                      num:"99",
                    },
                    {
                      name:"常规物品2",
                      num:"99",
                    },
                    {
                      name:"常规物品3",
                      num:"99",
                    },
                    {
                      name:"常规物品4",
                      num:"99",
                    },
                    {
                      name:"常规物品5",
                      num:"99",
                    },
                  ]
                }
              },
            ]
          },
          {
            id:"2",
            dataInfo:{
              name:"库房2",//库房名称
              address:"西大街2号",//位置
              teamSoName:"二所",//对应的医疗队所名称
              teamName:"二队",//医疗队名称
              peopleNum:"999",//人员数量（单位：人）
              equipmentNum:"10000",//装备数量（单位：台）
              suppliesNum:"20000",//耗材数量（单位：个）
              temperature:"15°",//温度
              humidity:"15"//湿度
            },
            bottomData:{
              id:"2-01",
              type:1,
              typeId:"2",
              name:"一层",
              lnt:108.942054,//经度
              lat:34.261056,//纬度
              img:"/static/img/mxTwo/4haolou1ceng.gltf",
              heading:-0.801,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.15,
              maximumScale:0.15,
              height:0
            },
            topData:{
              id:"2-02",
              type:1,
              typeId:"2",
              name:"房顶",
              lnt:108.94233,//经度
              lat:34.26122,//纬度
              img:"/static/img/mxTwo/4haoloudingceng.gltf",
              heading:-0.8,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.07,
              maximumScale:0.07,
              height:3.7
            },
            listData:[
              {
                id:"hj-2-01",
                type:2,
                typeId:"2",
                name:"货架-01",
                lnt:108.942525,//经度
                lat:34.261205,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-01",//库房名称
                  address:"西北侧一号位",//位置
                  className:"补给物资",
                  list:[
                    {
                      name:"补给物品1",
                      num:"99",
                    },
                    {
                      name:"补给物品2",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-2-02",
                type:2,
                typeId:"2",
                name:"货架-02",
                lnt:108.942475,//经度
                lat:34.261245,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-02",//库房名称
                  address:"西北侧二号位",//位置
                  className:"震灾物资",
                  list:[
                    {
                      name:"震灾物品1",
                      num:"99",
                    },
                    {
                      name:"震灾物品2",
                      num:"99",
                    },
                    {
                      name:"震灾物品3",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-2-03",
                type:2,
                typeId:"2",
                name:"货架-03",
                lnt:108.942425,//经度
                lat:34.261285,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-03",//库房名称
                  address:"西北侧三号位",//位置
                  className:"医疗物资",
                  list:[
                    {
                      name:"医疗物品1",
                      num:"99",
                    },
                    {
                      name:"医疗物品2",
                      num:"99",
                    },
                    {
                      name:"医疗物品3",
                      num:"99",
                    },
                    {
                      name:"医疗物品4",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-2-04",
                type:2,
                typeId:"2",
                name:"货架-04",
                lnt:108.942375,//经度
                lat:34.261325,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-04",//库房名称
                  address:"西北侧四号位",//位置
                  className:"常规物资",
                  list:[
                    {
                      name:"常规物品1",
                      num:"99",
                    },
                    {
                      name:"常规物品2",
                      num:"99",
                    },
                    {
                      name:"常规物品3",
                      num:"99",
                    },
                    {
                      name:"常规物品4",
                      num:"99",
                    },
                    {
                      name:"常规物品5",
                      num:"99",
                    },
                  ]
                }
              },
            ]
          },
          {
            id:"3",
            dataInfo:{
              name:"库房3",//库房名称
              address:"西大街3号",//位置
              teamSoName:"三所",//对应的医疗队所名称
              teamName:"三队",//医疗队名称
              peopleNum:"9",//人员数量（单位：人）
              equipmentNum:"100",//装备数量（单位：台）
              suppliesNum:"200",//耗材数量（单位：个）
              temperature:"10°",//温度
              humidity:"10"//湿度
            },
            bottomData:{
              id:"3-01",
              type:1,
              typeId:"3",
              name:"一层",
              lnt:108.941054,//经度
              lat:34.263056,//纬度
              img:"/static/img/mxTwo/4haolou1ceng.gltf",
              heading:-0.801,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.15,
              maximumScale:0.15,
              height:0
            },
            topData:{
              id:"3-02",
              type:1,
              typeId:"3",
              name:"房顶",
              lnt:108.94133,//经度
              lat:34.26322,//纬度
              img:"/static/img/mxTwo/4haoloudingceng.gltf",
              heading:-0.8,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.07,
              maximumScale:0.07,
              height:3.7
            },
            listData:[
              {
                id:"hj-3-01",
                type:2,
                typeId:"3",
                name:"货架-01",
                lnt:108.941525,//经度
                lat:34.263205,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-01",//库房名称
                  address:"西北侧一号位",//位置
                  className:"补给物资",
                  list:[
                    {
                      name:"补给物品1",
                      num:"99",
                    },
                    {
                      name:"补给物品2",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-3-02",
                type:2,
                typeId:"3",
                name:"货架-02",
                lnt:108.941475,//经度
                lat:34.263245,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-02",//库房名称
                  address:"西北侧二号位",//位置
                  className:"震灾物资",
                  list:[
                    {
                      name:"震灾物品1",
                      num:"99",
                    },
                    {
                      name:"震灾物品2",
                      num:"99",
                    },
                    {
                      name:"震灾物品3",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-3-03",
                type:2,
                typeId:"3",
                name:"货架-03",
                lnt:108.941425,//经度
                lat:34.263285,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-03",//库房名称
                  address:"西北侧三号位",//位置
                  className:"医疗物资",
                  list:[
                    {
                      name:"医疗物品1",
                      num:"99",
                    },
                    {
                      name:"医疗物品2",
                      num:"99",
                    },
                    {
                      name:"医疗物品3",
                      num:"99",
                    },
                    {
                      name:"医疗物品4",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-3-04",
                type:2,
                typeId:"3",
                name:"货架-04",
                lnt:108.941375,//经度
                lat:34.263325,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-04",//库房名称
                  address:"西北侧四号位",//位置
                  className:"常规物资",
                  list:[
                    {
                      name:"常规物品1",
                      num:"99",
                    },
                    {
                      name:"常规物品2",
                      num:"99",
                    },
                    {
                      name:"常规物品3",
                      num:"99",
                    },
                    {
                      name:"常规物品4",
                      num:"99",
                    },
                    {
                      name:"常规物品5",
                      num:"99",
                    },
                  ]
                }
              },
            ]
          },
          {
            id:"4",
            dataInfo:{
              name:"库房4",//库房名称
              address:"西大街4号",//位置
              teamSoName:"四所",//对应的医疗队所名称
              teamName:"四队",//医疗队名称
              peopleNum:"9999",//人员数量（单位：人）
              equipmentNum:"100000",//装备数量（单位：台）
              suppliesNum:"200000",//耗材数量（单位：个）
              temperature:"30°",//温度
              humidity:"30"//湿度
            },
            bottomData:{
              id:"4-01",
              type:1,
              typeId:"4",
              name:"一层",
              lnt:108.943054,//经度
              lat:34.260056,//纬度
              img:"/static/img/mxTwo/4haolou1ceng.gltf",
              heading:-0.801,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.15,
              maximumScale:0.15,
              height:0
            },
            topData:{
              id:"4-02",
              type:1,
              typeId:"4",
              name:"房顶",
              lnt:108.94333,//经度
              lat:34.26022,//纬度
              img:"/static/img/mxTwo/4haoloudingceng.gltf",
              heading:-0.8,//方向
              pitch:0,//俯视角度
              roll:0,//旋转角度
              minimumPixelSize:0.07,
              maximumScale:0.07,
              height:3.7
            },
            listData:[
              {
                id:"hj-4-01",
                type:2,
                typeId:"4",
                name:"货架-01",
                lnt:108.943525,//经度
                lat:34.260205,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-01",//库房名称
                  address:"西北侧一号位",//位置
                  className:"补给物资",
                  list:[
                    {
                      name:"补给物品1",
                      num:"99",
                    },
                    {
                      name:"补给物品2",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-4-02",
                type:2,
                typeId:"4",
                name:"货架-02",
                lnt:108.943475,//经度
                lat:34.260245,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-02",//库房名称
                  address:"西北侧二号位",//位置
                  className:"震灾物资",
                  list:[
                    {
                      name:"震灾物品1",
                      num:"99",
                    },
                    {
                      name:"震灾物品2",
                      num:"99",
                    },
                    {
                      name:"震灾物品3",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-4-03",
                type:2,
                typeId:"4",
                name:"货架-03",
                lnt:108.943425,//经度
                lat:34.260285,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-03",//库房名称
                  address:"西北侧三号位",//位置
                  className:"医疗物资",
                  list:[
                    {
                      name:"医疗物品1",
                      num:"99",
                    },
                    {
                      name:"医疗物品2",
                      num:"99",
                    },
                    {
                      name:"医疗物品3",
                      num:"99",
                    },
                    {
                      name:"医疗物品4",
                      num:"99",
                    },
                  ]
                }
              },
              {
                id:"hj-4-04",
                type:2,
                typeId:"4",
                name:"货架-04",
                lnt:108.943375,//经度
                lat:34.260325,//纬度
                img:"/static/img/gangshao3.gltf",
                heading:-0.45,//方向
                pitch:0,//俯视角度
                roll:0,//旋转角度
                minimumPixelSize:0.0152,
                maximumScale:0.0152,
                height:-2.8,
                dataInfo:{
                  name:"货架-04",//库房名称
                  address:"西北侧四号位",//位置
                  className:"常规物资",
                  list:[
                    {
                      name:"常规物品1",
                      num:"99",
                    },
                    {
                      name:"常规物品2",
                      num:"99",
                    },
                    {
                      name:"常规物品3",
                      num:"99",
                    },
                    {
                      name:"常规物品4",
                      num:"99",
                    },
                    {
                      name:"常规物品5",
                      num:"99",
                    },
                  ]
                }
              },
            ]
          }
        ],
        //点击选中数据展示
        newData:{},
        newList:[],
        minList:[],
        //点击事件1
        clickInfoOne:{},
        //点击事件2
        clickInfoTwo:{},
        //点击事件3
        minClickInfoOne:{},
        //点击事件4
        minClickInfoTwo:{},
        //镜头记忆
        lensMemory:{
          lnt:0,
          lat:0,
          height:0,
        }
      };
    },
    created(){

    },
    mounted() {
      this.initialMap();
    },
    methods: {
      //地图初始化
      initialMap(){
        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",
          })
        });
        // 限制最大镜头视野
        // viewer.scene.screenSpaceCameraController.maximumZoomDistance =10000;
        // 限制最小镜头视野
        // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
        //去除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.initialAddModel();
      },
      //首次加载模型数据
      initialAddModel(){
        let self = this;
        //循环数据 加载gltf格式数据到cesium
        for(let i=0;i<self.addressList.length;i++){
          //添加房子
          let bottomPosition = Cartesian3.fromDegrees(self.addressList[i].bottomData.lnt,self.addressList[i].bottomData.lat,self.addressList[i].bottomData.height);
          let bottomHpr = new HeadingPitchRoll(self.addressList[i].bottomData.heading, self.addressList[i].bottomData.pitch, self.addressList[i].bottomData.roll);
          let bottomOrientation = Transforms.headingPitchRollQuaternion(bottomPosition, bottomHpr);
          //添加模型实例
          self.entity = self.viewer.entities.add({
            id : self.addressList[i].bottomData.id,
            type : self.addressList[i].bottomData.type,//非官方-自定义增加的字段 可用于数据筛选
            typeId : self.addressList[i].bottomData.typeId,//非官方-自定义增加的字段 可用于数据筛选
            name : self.addressList[i].bottomData.name,
            position : bottomPosition,
            orientation : bottomOrientation,
            //模型在地图上标记文字
            label:{
              text:self.addressList[i].dataInfo.name,
              font: "24px Helvetica",
              fillColor: Color.SKYBLUE,
              outlineColor: Color.BLACK,
              outlineWidth: 2,
              style: LabelStyle.FILL_AND_OUTLINE,
            },
            //模型数据
            model : {
              uri: self.addressList[i].bottomData.img,
              minimumPixelSize : self.addressList[i].bottomData.minimumPixelSize,
              maximumScale : self.addressList[i].bottomData.maximumScale
            },
          });
          //添加房顶
          let topPosition = Cartesian3.fromDegrees(self.addressList[i].topData.lnt,self.addressList[i].topData.lat,self.addressList[i].topData.height);
          let topHpr = new HeadingPitchRoll(self.addressList[i].topData.heading, self.addressList[i].topData.pitch, self.addressList[i].topData.roll);
          let topOrientation = Transforms.headingPitchRollQuaternion(topPosition, topHpr);
          //添加模型实例
          self.entity = self.viewer.entities.add({
            id : self.addressList[i].topData.id,
            type : self.addressList[i].topData.type,//非官方-自定义增加的字段 可用于数据筛选
            typeId : self.addressList[i].topData.typeId,//非官方-自定义增加的字段 可用于数据筛选
            name : self.addressList[i].topData.name,
            position : topPosition,
            orientation : topOrientation,
            //模型数据
            model : {
              uri: self.addressList[i].topData.img,
              minimumPixelSize : self.addressList[i].topData.minimumPixelSize,
              maximumScale : self.addressList[i].topData.maximumScale
            },
          });
        }
        //判定镜头是否有历史记录
        if(self.lensMemory.height == 0){
          if(self.addressList[1]){
            // 计算中间点
            let lntList = [];
            let latList = [];
            for(let i = 0; i<self.addressList.length;i++){
              lntList.push(self.addressList[i].topData.lnt);
              latList.push(self.addressList[i].topData.lat);
            }
            lntList = lntList.sort(function(a, b){
              return a - b
            });
            latList = latList.sort(function(a, b){
              return a - b
            });
            let minLnt = lntList[0];
            let maxLnt = lntList[lntList.length-1];
            let minLat = latList[0];
            let maxLat = latList[latList.length-1];
            let lnt = (maxLnt - minLnt) / 2 + minLnt;
            let lat = (maxLat - minLat) / 2 + minLat;
            self.lensMemory.lnt = lnt-0.005;
            self.lensMemory.lat = lat;
            self.lensMemory.height = 600;
          }else{
            self.lensMemory.lnt = self.addressList[0].topData.lnt-0.00120;
            self.lensMemory.lat = self.addressList[0].topData.lat;
            self.lensMemory.height = 200;
          }
        }
        //镜头设定
        self.viewer.camera.flyTo({
          destination:Cartesian3.fromDegrees(self.lensMemory.lnt,self.lensMemory.lat,self.lensMemory.height),
          orientation:{
            // 指向
            heading:Math.toRadians(90,0),
            // 视角
            pitch:Math.toRadians(-55),
            roll:0.0
          }
        });
        self.addSingleClick();
        self.addDoubleClick();
      },
      //模型添加点击事件
      addSingleClick(){
        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.singleClickOne(pick.id);
          }
        }, ScreenSpaceEventType.LEFT_CLICK);
      },
      //点击事件1
      singleClickOne(item){
        let self = this;
        for(let i=0;i<self.addressList.length;i++){
          if (self.addressList[i].id==item.typeId) {
            self.newData = {...self.addressList[i].dataInfo};
            //镜头设定
            self.viewer.camera.flyTo({
              destination:Cartesian3.fromDegrees(self.addressList[i].topData.lnt-0.005,self.addressList[i].topData.lat,600),
              orientation:{
                // 指向
                heading:Math.toRadians(90,0),
                // 视角
                pitch:Math.toRadians(-55),
                roll:0.0
              }
            });
          }
        }
      },
      //模型添加双击事件(库房模型)
      addDoubleClick(){
        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.doubleClickOne(pick.id);
            // console.log("这是双击")
          }
        }, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      },
      //双击事件1(库房模型)
      doubleClickOne(item){
        let self = this;
        //清楚非选中模型
        for(let i=0;i<self.viewer.entities.values.length;i++){
          if(item.typeId!=self.viewer.entities.values[i].typeId){
            //根据选中ID清除模型
            self.viewer. entities.removeById(self.viewer.entities.values[i].id);
            i--;
          }else if(item.typeId==self.viewer.entities.values[i].typeId&&self.viewer.entities.values[i].name=="房顶"){
            //根据选中ID清除房顶模型
            self.viewer. entities.removeById(self.viewer.entities.values[i].id);
            i--;
          }
        }
        //清楚选模型的展示数据
        self.newData = {};
        //清除特定鼠标事件
        self.clickInfoOne.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
        self.clickInfoTwo.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

        for(let i=0;i<self.addressList.length;i++) {
          if (self.addressList[i].id == item.typeId) {
            //添加子模型
            for (let j = 0; j < self.addressList[i].listData.length; j++) {
              let position = Cartesian3.fromDegrees(self.addressList[i].listData[j].lnt, self.addressList[i].listData[j].lat, self.addressList[i].listData[j].height);
              let hpr = new HeadingPitchRoll(self.addressList[i].listData[j].heading, self.addressList[i].listData[j].pitch, self.addressList[i].listData[j].roll);
              let orientation = Transforms.headingPitchRollQuaternion(position, hpr);
              //添加模型实例
              self.entity = self.viewer.entities.add({
                id: self.addressList[i].listData[j].id,
                type: self.addressList[i].listData[j].type,//非官方-自定义增加的字段 可用于数据筛选
                typeId: self.addressList[i].listData[j].typeId,//非官方-自定义增加的字段 可用于数据筛选
                name: self.addressList[i].listData[j].name,
                position: position,
                orientation: orientation,
                //模型在地图上标记文字
                label: {
                  text: self.addressList[i].listData[j].name,
                  font: "16px Helvetica",
                  fillColor: Color.SKYBLUE,
                  outlineColor: Color.BLACK,
                  outlineWidth: 2,
                  style: LabelStyle.FILL_AND_OUTLINE,
                },
                //模型数据
                model: {
                  uri: self.addressList[i].listData[j].img,
                  minimumPixelSize: self.addressList[i].listData[j].minimumPixelSize,
                  maximumScale: self.addressList[i].listData[j].maximumScale
                },
              });
            }

            self.lensMemory.lnt = self.addressList[i].topData.lnt - 0.005;
            self.lensMemory.lat = self.addressList[i].topData.lat;
            self.lensMemory.height = 600;
            //镜头设定
            self.viewer.camera.flyTo({
              destination: Cartesian3.fromDegrees(self.addressList[i].bottomData.lnt - 0.00040, self.addressList[i].bottomData.lat + 0.00020, 80),
              orientation: {
                // 指向
                heading: Math.toRadians(90, 0),
                // 视角
                pitch: Math.toRadians(-55),
                roll: 0.0
              }
            });
            self.minAddSingleClick();
            self.minAaddDoubleClick();
          }
        }
      },
      //子模型点击事件
      minAddSingleClick(){
        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) && (pick.id.type == 2)) {
            self.minSingleClickOne(pick.id);
          }
        }, ScreenSpaceEventType.LEFT_CLICK);
      },
      minSingleClickOne(item){
        let self = this;
        for(let i=0;i<self.addressList.length;i++){
          if(self.addressList[i].id == item.typeId){
            for(let j=0;j<self.addressList[i].listData.length;j++){
              if(self.addressList[i].listData[j].id == item.id){
                self.newList = {...self.addressList[i].listData[j].dataInfo}
              }
            }
          }
        }
      },
      //子模型双击事件
      minAaddDoubleClick(){
        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)) {
            self.minDoubleClickOne();
            console.log("这是双击-返回");
          }else if(defined(pick) && (pick.id.id) && (pick.id.type == 2)){
            console.log("双击子模型");
            self.minDoubleClickOneTwo(pick.id);
          }
        }, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      },
      //库房模型下双击返回事件
      minDoubleClickOne(){
        let self = this;
        //清楚当前子模型
        for(let i=0;i<self.viewer.entities.values.length;i++){
          if(self.viewer.entities.values[i]&&self.viewer.entities.values[i].type!=1){
            self.viewer. entities.removeById(self.viewer.entities.values[i].id);
            i--;
          }
        }
        //添加所有母模型
        for(let i=0;i<self.addressList.length;i++){
          if(self.addressList[i].id == self.viewer.entities.values[0].typeId){
            //添加房顶
            let topPosition = Cartesian3.fromDegrees(self.addressList[i].topData.lnt,self.addressList[i].topData.lat,self.addressList[i].topData.height);
            let topHpr = new HeadingPitchRoll(self.addressList[i].topData.heading, self.addressList[i].topData.pitch, self.addressList[i].topData.roll);
            let topOrientation = Transforms.headingPitchRollQuaternion(topPosition, topHpr);
            //添加模型实例
            self.entity = self.viewer.entities.add({
              id : self.addressList[i].topData.id,
              type : self.addressList[i].topData.type,//非官方-自定义增加的字段 可用于数据筛选
              typeId : self.addressList[i].topData.typeId,//非官方-自定义增加的字段 可用于数据筛选
              name : self.addressList[i].topData.name,
              position : topPosition,
              orientation : topOrientation,
              //模型数据
              model : {
                uri: self.addressList[i].topData.img,
                minimumPixelSize : self.addressList[i].topData.minimumPixelSize,
                maximumScale : self.addressList[i].topData.maximumScale
              },
            });
          }else{
            //添加房子
            let bottomPosition = Cartesian3.fromDegrees(self.addressList[i].bottomData.lnt,self.addressList[i].bottomData.lat,self.addressList[i].bottomData.height);
            let bottomHpr = new HeadingPitchRoll(self.addressList[i].bottomData.heading, self.addressList[i].bottomData.pitch, self.addressList[i].bottomData.roll);
            let bottomOrientation = Transforms.headingPitchRollQuaternion(bottomPosition, bottomHpr);
            //添加模型实例
            self.entity = self.viewer.entities.add({
              id : self.addressList[i].bottomData.id,
              type : self.addressList[i].bottomData.type,//非官方-自定义增加的字段 可用于数据筛选
              typeId : self.addressList[i].bottomData.typeId,//非官方-自定义增加的字段 可用于数据筛选
              name : self.addressList[i].bottomData.name,
              position : bottomPosition,
              orientation : bottomOrientation,
              //模型在地图上标记文字
              label:{
                text:self.addressList[i].dataInfo.name,
                font: "24px Helvetica",
                fillColor: Color.SKYBLUE,
                outlineColor: Color.BLACK,
                outlineWidth: 2,
                style: LabelStyle.FILL_AND_OUTLINE,
              },
              //模型数据
              model : {
                uri: self.addressList[i].bottomData.img,
                minimumPixelSize : self.addressList[i].bottomData.minimumPixelSize,
                maximumScale : self.addressList[i].bottomData.maximumScale
              },
            });
            //添加房顶
            let topPosition = Cartesian3.fromDegrees(self.addressList[i].topData.lnt,self.addressList[i].topData.lat,self.addressList[i].topData.height);
            let topHpr = new HeadingPitchRoll(self.addressList[i].topData.heading, self.addressList[i].topData.pitch, self.addressList[i].topData.roll);
            let topOrientation = Transforms.headingPitchRollQuaternion(topPosition, topHpr);
            //添加模型实例
            self.entity = self.viewer.entities.add({
              id : self.addressList[i].topData.id,
              type : self.addressList[i].topData.type,//非官方-自定义增加的字段 可用于数据筛选
              typeId : self.addressList[i].topData.typeId,//非官方-自定义增加的字段 可用于数据筛选
              name : self.addressList[i].topData.name,
              position : topPosition,
              orientation : topOrientation,
              //模型数据
              model : {
                uri: self.addressList[i].topData.img,
                minimumPixelSize : self.addressList[i].topData.minimumPixelSize,
                maximumScale : self.addressList[i].topData.maximumScale
              },
            });
          }
        }
        //清楚选模型的展示数据
        self.newData = {};
        self.newList = {};
        //清除特定鼠标事件
        self.clickInfoOne.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
        self.clickInfoTwo.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

        //镜头设定
        self.viewer.camera.flyTo({
          destination:Cartesian3.fromDegrees(self.lensMemory.lnt,self.lensMemory.lat,self.lensMemory.height),
          orientation:{
            // 指向
            heading:Math.toRadians(90,0),
            // 视角
            pitch:Math.toRadians(-55),
            roll:0.0
          }
        });
        self.addSingleClick();
        self.addDoubleClick();
        // self.initialAddModel();
      },
      //库房模型下双击货架时间
      minDoubleClickOneTwo(item){
        let self = this;
        for(let i=0;i<self.addressList.length;i++){
          for(let j=0;j<self.addressList[i].listData.length;j++){
            if (self.addressList[i].listData[j].id == item.id){
              console.log("item.id",item.id)
              //清除模型
              self.viewer.entities.removeAll();
              //清楚选模型的展示数据
              self.newData = {};
              self.newList = {};
              //清除特定鼠标事件
              self.clickInfoOne.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
              self.clickInfoTwo.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
              //添加展示数据
              self.minList = {...self.addressList[i].listData[j].dataInfo}
              //添加房屋一层
              let bottomPosition = Cartesian3.fromDegrees(self.addressList[i].bottomData.lnt,self.addressList[i].bottomData.lat,self.addressList[i].bottomData.height);
              let bottomHpr = new HeadingPitchRoll(self.addressList[i].bottomData.heading, self.addressList[i].bottomData.pitch, self.addressList[i].bottomData.roll);
              let bottomOrientation = Transforms.headingPitchRollQuaternion(bottomPosition, bottomHpr);
              //添加模型实例
              self.entity = self.viewer.entities.add({
                id : self.addressList[i].bottomData.id,
                type : self.addressList[i].bottomData.type,//非官方-自定义增加的字段 可用于数据筛选
                typeId : self.addressList[i].bottomData.typeId,//非官方-自定义增加的字段 可用于数据筛选
                name : self.addressList[i].bottomData.name,
                position : bottomPosition,
                orientation : bottomOrientation,
                //模型在地图上标记文字
                label:{
                  text:self.addressList[i].dataInfo.name,
                  font: "24px Helvetica",
                  fillColor: Color.SKYBLUE,
                  outlineColor: Color.BLACK,
                  outlineWidth: 2,
                  style: LabelStyle.FILL_AND_OUTLINE,
                },
                //模型数据
                model : {
                  uri: self.addressList[i].bottomData.img,
                  minimumPixelSize : self.addressList[i].bottomData.minimumPixelSize,
                  maximumScale : self.addressList[i].bottomData.maximumScale
                },
              });
              //添加货柜
              let position = Cartesian3.fromDegrees(self.addressList[i].listData[j].lnt,self.addressList[i].listData[j].lat,self.addressList[i].listData[j].height);
              let hpr = new HeadingPitchRoll(self.addressList[i].listData[j].heading, self.addressList[i].listData[j].pitch, self.addressList[i].listData[j].roll);
              let orientation = Transforms.headingPitchRollQuaternion(position, hpr);
              //添加模型实例
              self.entity = self.viewer.entities.add({
                id : self.addressList[i].listData[j].id,
                type : self.addressList[i].listData[j].type,//非官方-自定义增加的字段 可用于数据筛选
                typeId : self.addressList[i].listData[j].typeId,//非官方-自定义增加的字段 可用于数据筛选
                name : self.addressList[i].listData[j].name,
                position : position,
                orientation : orientation,
                //模型在地图上标记文字
                label:{
                  text:self.addressList[i].listData[j].name,
                  font: "16px Helvetica",
                  fillColor: Color.SKYBLUE,
                  outlineColor: Color.BLACK,
                  outlineWidth: 2,
                  style: LabelStyle.FILL_AND_OUTLINE,
                },
                //模型数据
                model : {
                  uri: self.addressList[i].listData[j].img,
                  minimumPixelSize : self.addressList[i].listData[j].minimumPixelSize,
                  maximumScale : self.addressList[i].listData[j].maximumScale
                },
              });
              //镜头设定
              self.viewer.camera.flyTo({
                destination:Cartesian3.fromDegrees(self.addressList[i].listData[j].lnt-0.0001,self.addressList[i].listData[j].lat-0.0001,4),
                orientation:{
                  // 指向
                  heading:Math.toRadians(45,0),
                  // 视角
                  pitch:Math.toRadians(-25),
                  roll:0.0
                }
              });
              self.addDoubleClickMin();
            }
          }
        }
      },
      //子模型双击事件
      addDoubleClickMin(){
        let self = this;
        self.clickInfoTwo = new ScreenSpaceEventHandler(self.viewer.scene.canvas);
        self.clickInfoTwo.setInputAction(function (movement) {
          //清楚选模型的展示数据
          self.newData = {};
          self.newList = {};
          self.minList = {};
          //清除模型
          self.viewer.entities.removeAll();
          //清楚选模型的展示数据
          self.newData = {};
          self.newList = {};
          //清除特定鼠标事件
          self.clickInfoOne.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
          self.clickInfoTwo.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
          self.initialAddModel();
        }, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      },
      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;
  }
  .text-box-right{
    position: absolute;
    right:10px;
    bottom: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-right div{
    display: flex;
  }
  .text-box-right div p{
    padding:0;
    margin:0;
    text-align: left;
  }
  .text-box-right div p:nth-child(1){
    flex:1;
  }
  .text-box-right div p:nth-child(2){
    width:110px;
  }
</style>
