Project_yhfu/src/components/supermap-2.5d.vue

<template>
  <div id="supermap3D" style="width: 100%; height: 100%;background: none;overflow-y: auto;">
    <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
      <!--地图top 显示 开始-->
      <transition name='fade'>
        <div class="map-tit" v-show="mapshow">
          <div class="top-tit">
            <i class="iconfont sj-icon-jkzx"></i>
            <span><img src="../assets/images/close.svg" @click="mapShow"/></span>
          </div>
          <div class="map-txt" v-html="bindPopupHtml">
          </div>
          <div id="super2"/>
        </div>
      </transition>
      <!--地图top 显示 结束-->
    </div>
  </div>
</template>

<script>
import {
  iconList,
  getDeviceList
} from '@/api/components/supermap.js'
import Cookies from 'js-cookie'
import {
  getConfigKey
} from "@/api/system/config";

export default {
  name: 'supermap-2.5d',
  data() {
    return {
      bindPopupHtml: null,
      mapshow: false,
      superMapRootUrl: null,
      viewer: null,
      scene: null,
      handler: null,
      pick: null,
      back_position: null,
      content: null,
      mvtMap0: null,
      shuixi_name: null,
      mvtMap1: null,
      mvtMap2: null,
      mvtMap3: null,
      road_name: null,
      layer_xiangzhenjie_name: null,
      markerboxEntity: [], //地图落点实体
      markerboxEntityRadius: [], //地图落点实体
      connectBoxEntity: null, //地图线实体
      graphicsBoxEntity: [], //地图面实体
      connectBoxEntityTwo: null, //地图线实体
      timer: null,
      /*************************原地图属性*********************/
      isEditableLayers: false, //绘图控件
      selOptV: 2, // 贴地量算
      clampMode: 1, // 空间模式
      handlerDis: null, // 距离
      handlerArea: null, // 面积

      /*************************原地图属性*********************/
      aac: null,
      queryParams: {
        name: null,
        mapData: null,
        mapName: null
      },
      showLayer: null,
      clickTime: new Date().getTime(),
      cacheData: {
        ProvinceRoad: "",
        CountyRoad: "",
        StateRoad: "",
        ShuiXi: "",
        XianJie: "",
        XiangZhenJie: "",
        Cun: "",
      },
      supermapUrls: [
        [
          "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",//底图
          "/3D-local3DCache-0608XinBanQingXieShiJing/rest/realspace",//3D模型（二级图层）
          "/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian",//水系图
          "/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi",//林地图
          "/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian",//农田图
          "/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian",//路网图
          "/3D-road_Name_S/rest/realspace",//路网名称
          "ProvinceRoad_L@SiPing#1",//名称图层叠加
          "CountyRoad_L@SiPing#1",//名称图层叠加
          "StateRoad_L@SiPing#1",//名称图层叠加
          "/3D-shuixi_Name/rest/realspace",//水系名称
          "ShuiXi@SiPing#1",//水系名称叠加
          "/map-SIPING/rest/maps/XianJie_XiangZhenJie",//乡镇街界限
          "/3D-Name_he/rest/realspace",//乡镇街名称
          "XianJie@SiPing#1",//县界名称
          "XiangZhenJie@SiPing#2",//乡镇街名称
          "Cun@SiPing#1",//村名称
        ],
        [
          "/3D-shuangliaoYX/rest/realspace/datas/siping_2m_shuangliao@spyx4326",
          "/3D-shuangliaoYX/rest/realspace/datas/shuangliao@spyx4326",
          "/map-mvt-shuiximianshuangliao/restjsr/v1/vectortile/maps/shuixi_mian_shuangliao",
          "/map-mvt-lindishuangliao/restjsr/v1/vectortile/maps/lindi_shuangliao",
          "/map-mvt-nongtianshuangliao/restjsr/v1/vectortile/maps/nongtian_shuangliao",
          "/map-mvt-roadxianshuangliao/restjsr/v1/vectortile/maps/road_xian_shuangliao",
          "/3D-road_Name_S_shuangliao/rest/realspace",
          "ProvinceRoad_L_shuangliao@Road#1",
          "CountyRoad_L_shuangliao@Road#1",
          "StateRoad_L_shuangliao@Road#1",
          "/3D-shuixi_Name_shuangliao/rest/realspace",
          "ShuiXi_shuangliao@Road#1",
          "/map-SIPING/rest/maps/xiangzhenjie_shuangliao",
          "/3D-Name_he_shuangliao/rest/realspace",
          "shuangliaoshi@gengdi#1",
          "XiangZhenJie_shuangliao@gengdi#1",
          "Cun_shuangliao@SiPing#1",
        ],
        [
          "/3D-lishuYX/rest/realspace/datas/siping_2m_lishu@spyx4326",
          "/3D-lishuYX/rest/realspace/datas/lishu_1@spyx4326",
          "/map-mvt-shuiximianlishu/restjsr/v1/vectortile/maps/shuixi_mian_lishu",
          "/map-mvt-lindilishu/restjsr/v1/vectortile/maps/lindi_lishu",
          "/map-mvt-nongtianlishu/restjsr/v1/vectortile/maps/nongtian_lishu",
          "/map-mvt-roadxianlishu/restjsr/v1/vectortile/maps/road_xian_lishu",
          "/3D-road_Name_S_lishu/rest/realspace",
          "ProvinceRoad_L_lishu@Road#1",
          "CountyRoad_L_lishu@Road#1",
          "StateRoad_L_lishu@Road#1",
          "/3D-shuixi_Name_lishu/rest/realspace",
          "ShuiXi_lishu@Road#1",
          "/map-SIPING/rest/maps/xiangzhenjie_lishu",
          "/3D-Name_he_lishu/rest/realspace",
          "lishushi@gengdi#1",
          "XiangZhenJie_lishu@gengdi#1",
          "Cun_lishu@SiPing#1",
        ],
        [
          "/3D-tiexiYX/rest/realspace/datas/siping_2m_tiexi@spyx4326",
          "/3D-local3DCache-0608XinBanQingXieShiJing/rest/realspace",
          "/map-mvt-shuiximiantiexi/restjsr/v1/vectortile/maps/shuixi_mian_tiexi",
          "/map-mvt-linditiexi/restjsr/v1/vectortile/maps/lindi_tiexi",
          "/map-mvt-nongtiantiexi/restjsr/v1/vectortile/maps/nongtian_tiexi",
          "/map-mvt-roadxiantiexi/restjsr/v1/vectortile/maps/road_xian_tiexi",
          "/3D-road_Name_S_tiexi/rest/realspace",
          "ProvinceRoad_L_tiexi@Road#1",
          "CountyRoad_L_tiexi@Road#1",
          "StateRoad_L_tiexi@Road#1",
          "/3D-shuixi_Name_tiexi/rest/realspace",
          "ShuiXi_tiexi@Road#1",
          "/map-SIPING/rest/maps/xiangzhenjie_tiexi",
          "/3D-Name_he_tiexi/rest/realspace",
          "tiexishi@gengdi#1",
          "XiangZhenJie_tiexi@gengdi#1",
          "Cun_tiexi@SiPing#1",
        ],
        [
          "/3D-tiedongYX/rest/realspace/datas/siping_2m_tiedong@spyx4326",
          "/3D-tiedongYX/rest/realspace/datas/tiedong@spyx4326",
          "/map-mvt-shuiximiantiedong/restjsr/v1/vectortile/maps/shuixi_mian_tiedong",
          "/map-mvt-linditiedong/restjsr/v1/vectortile/maps/lindi_tiedong",
          "/map-mvt-nongtiantiedong/restjsr/v1/vectortile/maps/nongtian_tiedong",
          "/map-mvt-roadxiantiedong/restjsr/v1/vectortile/maps/road_xian_tiedong",
          "/3D-road_Name_S_tiedong/rest/realspace",
          "ProvinceRoad_L_tiedong@Road#1",
          "CountyRoad_L_tiedong@Road#1",
          "StateRoad_L_tiedong@Road#1",
          "/3D-shuixi_Name_tiedong/rest/realspace",
          "ShuiXi_tiedong@Road#1",
          "/map-SIPING/rest/maps/xiangzhenjie_tiedong",
          "/3D-Name_he_tiedong/rest/realspace",
          "tiedongshi@gengdi#1",
          "XiangZhenJie_tiedong@gengdi#1",
          "Cun_tiedong@SiPing#1",
        ],
        [
          "/3D-yitongYX/rest/realspace/datas/siping_2m_yitong@spyx4326",
          "/3D-yitongYX/rest/realspace/datas/yitong@spyx4326",
          "/map-mvt-shuiximianyitong/restjsr/v1/vectortile/maps/shuixi_mian_yitong",
          "/map-mvt-lindiyitong/restjsr/v1/vectortile/maps/lindi_yitong",
          "/map-mvt-nongtianyitong/restjsr/v1/vectortile/maps/nongtian_yitong",
          "/map-mvt-roadxianyitong/restjsr/v1/vectortile/maps/road_xian_yitong",
          "/3D-road_Name_S_yitong/rest/realspace",
          "ProvinceRoad_L_yitong@Road#1",
          "CountyRoad_L_yitong@Road#1",
          "StateRoad_L_yitong@Road#1",
          "/3D-shuixi_Name_yitong/rest/realspace",
          "ShuiXi_yitong@Road#1",
          "/map-SIPING/rest/maps/xiangzhenjie_yitong",
          "/3D-Name_he_yitong/rest/realspace",
          "yitongshi@gengdi#1",
          "XiangZhenJie_yitong@gengdi#1",
          "Cun_yitong@SiPing#1",
        ],
      ],
    }
  },
  watch: {},
  created() {
  },
  mounted() {
    this.showLayer = this.showLayer != undefined ? this.showLayer : false;
  },
  props: {
    showLayer: [Boolean],
  },
  methods: {
    //初始化地图数据
    removeAllviewer(num, index) {
      if (index != -1) {
        $('#cesiumContainer').remove();
        $('#supermap3D').append("<div id=\"cesiumContainer\" style=\"width: 100%; height: 100%;background: none;\" >\n" +
          "  </div>")
      }
      let that = this;
      // that.removeAllMvt();
      // that.viewer.imageryLayers.remove(this.layer);
      // that.road_name.then(function (layers) {
      //   that.viewer.scene.layers.find(that.cacheData.XianJie).visible = false;//文字图层
      //   that.viewer.scene.layers.find(that.cacheData.XiangZhenJie).visible = false;//文字图层
      //   that.viewer.scene.layers.find(that.cacheData.Cun).visible = false;//文字图层
      // });
      // that.layer_xianjie.show=false;

      that.superMapInfo(num);
    },
    choseMeasuringAreaAll() {
      if (this.handlerDis != null) {
        this.handlerDis.clear()
      }
      if (this.handlerArea != null) {
        this.handlerArea.clear()
      }
    },
    //  测量距离
    choseMeasuringDistance() {
      let that = this
      if (that.handlerDis != null) {
        that.handlerDis.deactivate()
        that.handlerDis.clear()
      }
      //初始化测量距离
      that.handlerDis = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Distance, that.clampMode);
      that.handlerDis.clampMode = 1;
      //注册测距功能事件
      that.handlerDis.measureEvt.addEventListener(function (result) {
        var dis = Number(result.distance);
        var selOptV = that.selOptV;
        if (selOptV == 3 || selOptV == 4) {
          dis = Number(calcClampDistance(positions));
        }
        ;
        var distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
        that.handlerDis.disLabel.text = '距离:' + distance;

      });
      that.handlerDis.activeEvt.addEventListener(function (isActive) {
        if (isActive == true) {
          that.viewer.enableCursorStyle = false;
          that.viewer._element.style.cursor = '';
          $('#super2').removeClass('measureCur').addClass('measureCur');
          that.viewer.scene.pickPointEnabled = false;
        } else {
          that.viewer.enableCursorStyle = true;
          $('#super2').removeClass('measureCur');
          that.viewer.scene.pickPointEnabled = false;
        }
      });
      that.handlerDis.activate();
    },
    // 测量面积
    choseMeasuringArea() {
      let that = this
      if (that.handlerArea != null) {
        // that.handlerArea.deactivate()
        that.handlerArea.clear()
      }

      //初始化测量面积
      that.handlerArea = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Area, that.clampMode);

      that.handlerArea.clampMode = 1;
      that.handlerArea.measureEvt.addEventListener(function (result) {
        var mj = Number(result.area);
        var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
        that.handlerArea.areaLabel.text = '面积:' + area;
      });
      that.handlerArea.activeEvt.addEventListener(function (isActive) {
        if (isActive == true) {
          that.viewer.enableCursorStyle = false;
          that.viewer._element.style.cursor = '';
          $('#super2').removeClass('measureCur').addClass('measureCur');
          that.viewer.scene.pickPointEnabled = false;
        } else {
          that.viewer.enableCursorStyle = true;
          that.viewer._element.style.cursor = '';
          $('#super2').removeClass('measureCur');
          that.viewer.scene.pickPointEnabled = false;
        }
      });
      that.handlerArea.activate();
    },
    mapShow() {
      this.mapshow = false,
        clearInterval(this.timer)
    },
    //清除所有
    clearAll() {
      this.viewer.entities.removeAll()
    },
    //移除之前添加的点
    clearM() {
      if (this.markerboxEntity != null && this.markerboxEntity.length > 0) {
        for (let i = 0; i < this.markerboxEntity.length; i++) {
          this.viewer.entities.remove(this.markerboxEntity[i])
        }
        this.markerboxEntity = []
      }
    },
    //移除之前添加的点
    clearMRadius() {
      if (this.markerboxEntityRadius != null && this.markerboxEntityRadius.length > 0) {
        for (let i = 0; i < this.markerboxEntityRadius.length; i++) {
          this.viewer.entities.remove(this.markerboxEntityRadius[i])
        }
        this.markerboxEntityRadius = []
      }
    },
    //移除之前添加的线
    clearC() {
      if (this.connectBoxEntity != null) {
        this.viewer.entities.remove(this.connectBoxEntity)
        this.connectBoxEntity = null
      }
    },
    //移除之前添加的线
    clearTwoC() {
      if (this.connectBoxEntityTwo != null) {
        this.viewer.entities.remove(this.connectBoxEntityTwo)
        this.connectBoxEntityTwo = null
      }
    },
    //移除之前添加的面
    clearG() {
      if (this.graphicsBoxEntity != null && this.graphicsBoxEntity.length > 0) {
        for (let i = 0; i < this.graphicsBoxEntity.length; i++) {
          this.viewer.entities.remove(this.graphicsBoxEntity[i])
        }
        this.graphicsBoxEntity = []
      }
    },
    superMapInfo(index) {
      getConfigKey('superMap.iServer').then(response => {
        this.superMapRootUrl = response.msg;
        this.onload(index);
      })
    },
    onload(index) {
      let that = this;
      const withinData = this.supermapUrls[index];
      //1.添加地形数据
      that.viewer = new Cesium.Viewer('cesiumContainer', {
        //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: that.superMapRootUrl + "/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326",
          //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
          invisibility: true
        }),
        infoBox: false,
        navigation: false
      }, {
        contextOptions: {
          msaaLevel: 4,
          requestWebgl2: true
        },
        orderIndependentTranslucency: false
      });
      that.scene = that.viewer.scene;
      that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印

      //2.添加SuperMap iServer发布的影像服务
      let layer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
        url: that.superMapRootUrl + withinData[0],
      }));

      if (index == 0) {  //全部
        //飞行值坐标点,每3秒推进一级
        //heading-代表镜头左右方向,正值为右,负值为左
        //pitch-代表镜头上下方向,正值为上,负值为下.
        //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 950000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 650000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 350000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
      } else if (index == 1) {  //双辽
        //飞行值坐标点,每3秒推进一级
        //heading-代表镜头左右方向,正值为右,负值为左
        //pitch-代表镜头上下方向,正值为上,负值为下.
        //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(123.77896424451833, 43.70521317451045, 950000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(123.77896424451833, 43.70521317451045, 650000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(123.77896424451833, 43.70521317451045, 200000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
      } else if (index == 2) {  //梨树
        //飞行值坐标点,每3秒推进一级
        //heading-代表镜头左右方向,正值为右,负值为左
        //pitch-代表镜头上下方向,正值为上,负值为下.
        //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.28276991763133, 43.46361757293432, 950000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.28276991763133, 43.46361757293432, 650000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.28276991763133, 43.46361757293432, 200000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
      } else if (index == 3) {  //铁西
        //飞行值坐标点,每3秒推进一级
        //heading-代表镜头左右方向,正值为右,负值为左
        //pitch-代表镜头上下方向,正值为上,负值为下.
        //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.35516104252032, 43.220384847557234, 1050000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.35516104252032, 43.220384847557234, 550000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.35516104252032, 43.220384847557234, 50000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);

      } else if (index == 4) {  //铁东
        //飞行值坐标点,每3秒推进一级
        //heading-代表镜头左右方向,正值为右,负值为左
        //pitch-代表镜头上下方向,正值为上,负值为下.
        //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.54435750508439, 43.04539078139383, 950000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.54435750508439, 43.04539078139383, 650000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(124.54435750508439, 43.04539078139383, 100000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);

      } else if (index == 5) {  //伊通
        //飞行值坐标点,每3秒推进一级
        //heading-代表镜头左右方向,正值为右,负值为左
        //pitch-代表镜头上下方向,正值为上,负值为下.
        //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(125.34420717245336, 43.35653920782364, 950000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(125.34420717245336, 43.35653920782364, 650000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);
        setTimeout(function () {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(125.34420717245336, 43.35653920782364, 150000),
            orientation: {
              // heading :  Cesium.Math.toRadians(346.4202942851978),
              // pitch : Cesium.Math.toRadians(-56.74026687972041),
              // roll : Cesium.Math.toRadians(0)
            }
          });

        }, 3000);

      }

      //开始加载专题图等数据，8秒后开始执行
      setTimeout(function () {
        // 3.水系
        // let shuixi = that.superMapRootUrl+"/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
        // that.mvtMap0 = that.scene.addVectorTilesMap({
        //   url: shuixi,
        //   canvasWidth: 512,
        //   name: 'mvt_map0',
        //   viewer: that.viewer,
        //   selectedColor:new Cesium.Color(6,169,254,0.5),
        //   show:true,
        // });

        // //4.林地
        // let lindi = that.superMapRootUrl+"/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
        // that.mvtMap1 = that.scene.addVectorTilesMap({
        //   url: lindi,
        //   canvasWidth: 512,
        //   name: 'mvt_map1',
        //   viewer: that.viewer,
        //   selectedColor:new Cesium.Color(6,254,181,0.5),
        //   show:true,
        // });
        //
        //5.农田
        // if(that.showLayer){
        //   let nongtian = that.superMapRootUrl + withinData[4];
        //   that.mvtMap2 = that.scene.addVectorTilesMap({
        //     url: nongtian,
        //     canvasWidth: 512,
        //     name: 'mvt_map2',
        //     viewer: that.viewer,
        //     selectedColor: new Cesium.Color(250, 236, 246, 1.0),
        //     show: true,
        //   });
        // }
        //
        // //6.路网
        // let road = that.superMapRootUrl+"/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
        // that.mvtMap3 = that.scene.addVectorTilesMap({
        //   url: road,
        //   canvasWidth: 512,
        //   name: 'mvt_map3',
        //   viewer: that.viewer,
        //   show:true,
        // });
        //
        // //7.添加路网NAME
        // let road_name_url = that.superMapRootUrl+'/3D-road_Name_S/rest/realspace';
        // that.road_name = that.scene.open(road_name_url);
        //
        // // 8.添加水系NAME
        // let shuixi_name_url = that.superMapRootUrl + '/3D-shuixi_Name/rest/realspace';
        // that.shuixi_name = that.scene.open(shuixi_name_url);

        //9.添加县界和乡镇界
        let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          url: that.superMapRootUrl + withinData[12],
        }));

        //10.添加区县乡镇村名称
        let layer_xiangzhenjie_name = that.superMapRootUrl + withinData[13];
        that.scene.open(layer_xiangzhenjie_name);
        that.cacheData.XianJie = withinData[14]
        that.cacheData.XiangZhenJie = withinData[15]
        that.cacheData.Cun = withinData[16]
        that.road_name.then(function (layers) {
          let xianJie_textLayer = that.scene.layers.find(withinData[14]);//区县文字图层
          let xiangZhenJie_textLayer = that.scene.layers.find(withinData[15]);//乡镇文字图层
          let cun_textLayer = that.scene.layers.find(withinData[16]);//村文字图层
          //关闭避让
          xianJie_textLayer.isOverlapDisplayed = true;
          xiangZhenJie_textLayer.isOverlapDisplayed = true;
          cun_textLayer.isOverlapDisplayed = true;
        });

      }, 3000);
      that.viewer.selectedEntityChanged.addEventListener(function (entity) {
        if (entity != undefined && Reflect.has(entity, 'layerID')) {
          that.queryParams.name = entity.pickResult[entity.layerID][0].feature.properties.Name;
          that.queryParams.mapData = entity.pickResult[entity.layerID][0].feature.properties.SmUserID;
          that.queryParams.mapName = entity.pickResult[entity.layerID][0].feature.properties.layer;
          getDeviceList(that.queryParams).then(res => {
            const treeLabels = [{
              "id": null,
              "labelCode": "999",
              "labelName": "电视墙",
              "cameraType": null,
              "parentLabelCode": ""
            }];
            const labelChannels = [];
            for (let i in res.data) {
              treeLabels.push({
                "id": null,
                "labelCode": res.data[i].cameraCode,
                "labelName": res.data[i].cameraName,
                "cameraType": "1",
                "parentLabelCode": "999"
              })
              labelChannels.push({
                "labelCode": res.data[i].cameraCode,
                "channelDates": [
                  {
                    "channelCode": res.data[i].cameraCode,
                    "channelName": res.data[i].cameraName,
                    "channelSn": null,
                    "cameraType": "1",
                    "online": "1",
                    "cameraCode": "1"
                  }
                ]
              })
            }
            const dianshiqiang = [
              {
                "switchTab": "2",
                "treeLabels": treeLabels,
                "labelChannels": labelChannels
              }
            ]
            that.$emit('fatherMethod', dianshiqiang, res.data[0].longitude, res.data[0].latitude, res.data[0].userList);
          });
        }
      });
    },
    /**
     * 地图落点
     */
    setMarkers(makerList) {
      let that = this
      that.handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas)
      clearInterval(that.aac)
      for (let i in makerList) {
        let longitude = makerList[i].lng
        let latitude = makerList[i].lat
        let marker = that.viewer.entities.add({
          name: '',
          position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
          billboard: {
            image: iconList[makerList[i].icon],
            width: 48,
            height: 48,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          },
          description: makerList[i].bindPopupHtml,
          click: makerList[i].click,
          parameter: makerList[i].parameter
        })
        that.markerboxEntity.push(marker)
      }
      that.viewer.scene.globe.depthTestAgainstTerrain = false
      that.createLeftClickDescription()
      that.createRightClickDescription()
    },
    /**
     *鼠标左击事件是原来的气泡
     */
    createLeftClickDescription() {
      let that = this;
      that.handler.setInputAction(function (movement) {
        that.pick = that.viewer.scene.pick(movement.position);
        if (that.pick && that.pick) {
          let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
            movement.position).primitive.id);

          let html = id._description;
          clearInterval(that.timer)
          if (html != undefined && html._value != null && html._value != '' && html != 'cgq') {
            that.bindPopupHtml = html
            that.mapshow = true
          } else if (html == 'cgq') {
            that.timer = setInterval(function () {
              var color = "green";
              var value = Math.random();
              var up = "▲";
              var down = "▼";
              if (value > 0.5) {
                color = "red";
                value = value + "" + up;
              } else {
                value = value + "" + down;
              }
              that.bindPopupHtml = "<span style='color:" + color + "'>当前传感器数值: " + value + "</span>";
            }, 1000)
            that.mapshow = true
          } else {
            that.mapshow = false
            clearInterval(that.timer)
          }
        } else {
          that.mapshow = false
          clearInterval(that.timer)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    /**
     *鼠标右击事件是原来的点击
     */
    createRightClickDescription() {
      let that = this;
      that.handler.setInputAction(function (movement) {
        that.mapshow = false
        if (new Date().getTime() - that.clickTime < 2000) {
          return
        } else {
          that.clickTime = new Date().getTime()
        }
        clearInterval(that.timer)
        // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
        that.pick = that.viewer.scene.pick(movement.position);
        if (that.pick && that.pick) {
          let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
            movement.position).primitive.id);
          let clickName = id._click;
          that.$emit(clickName, id._parameter)
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    /**
     * 落点定位
     */
    dropLocation(lat, lng) {
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
      });
    },
    /**
     * 地图画线(贴地)
     */
    setConnectList(connectList, color, withAlpha) {
      let that = this
      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
      that.connectBoxEntity = that.viewer.entities.add({
        Type: 'Polyline',
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray(connectList),
          clampToGround: true, //贴地 true,不贴地  false
          width: 5,
          material: material
        }
      })
    },
    /**
     * 地图落点-覆盖范围
     */
    setMarkersRadius(makerList) {
      let that = this
      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
      for (let i in makerList) {
        let longitude = makerList[i].lng;
        let latitude = makerList[i].lat;
        let marker = that.viewer.entities.add({
          name: "",
          position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
          billboard: {
            image: iconList[makerList[i].icon],
            width: 48,
            height: 48,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          },
          description: makerList[i].bindPopupHtml,
          click: makerList[i].click,
          parameter: makerList[i].parameter
        })
        that.markerboxEntityRadius.push(marker)
        //绘制摄像头的圈（覆盖范围）
        let markerRadius = that.viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(makerList[i].lng, makerList[i].lat, 2),
          ellipse: {
            semiMinorAxis: makerList[i].radius,
            semiMajorAxis: makerList[i].radius,
            height: 0.0,
            material: Cesium.Color.DODGERBLUE.withAlpha(0.4),
            outline: true,
            outlineColor: Cesium.Color.DEEPSKYBLUE.withAlpha(1),
            outlineWidth: 1,
          },
        });
        that.markerboxEntityRadius.push(markerRadius)
      }
      that.viewer.scene.globe.depthTestAgainstTerrain = false
      that.createLeftClickDescription()
      that.createRightClickDescription()
    },
    /**
     * 地图画线(贴地)
     */
    setConnectTwoList(connectList, color, withAlpha) {
      let that = this
      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
      that.connectBoxEntityTwo = that.viewer.entities.add({
        Type: 'Polyline',
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray(connectList),
          clampToGround: true, //贴地 true,不贴地  false
          width: 5,
          material: material
        }
      })
    },
    /**
     * 地图图形(贴地)
     */
    setGraphicsList(graphicsList, color, withAlpha) {
      let that = this
      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
      let graphicsBoxEntity = that.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
          clampToGround: true, //贴地 true,不贴地  false
          width: 5,
          material: material
        }
      })
      that.graphicsBoxEntity.push(graphicsBoxEntity);
    },
    /**
     * 地图图形(贴地)
     */
    setGraphicsListMultiple(graphicsList, color, withAlpha) {
      let that = this
      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
      for (let i = 0; i < graphicsList.length; i++) {
        if (graphicsList[i].latLngs != null && graphicsList[i].latLngs != "") {
          let jsonToArr = JSON.parse(graphicsList[i].latLngs);
          const arr = []
          for (let j = 0; j < jsonToArr.length; j++) {
            arr.push(jsonToArr[j].lng)
            arr.push(jsonToArr[j].lat)
          }
          let graphicsBoxEntity = that.viewer.entities.add({
            polygon: {
              hierarchy: Cesium.Cartesian3.fromDegreesArray(arr),
              clampToGround: true, //贴地 true,不贴地  false
              width: 5,
              material: material
            }
          })
          that.graphicsBoxEntity.push(graphicsBoxEntity);
        }
      }
    }
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.map-tit {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translatex(-50%);
  border: 1px solid #15519b;
  z-index: 9999;
  background: linear-gradient(rgba(4, 23, 62, 0.6), rgba(0, 28, 70, 0.6));
  min-width: 300px;

  .top-tit {
    width: 100%;
    height: 28px;
    line-height: 28px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #15519b80;
    padding: 0px 10px;
    align-items: center;

    i {
      color: #10ccff;
      font-size: 18px;
      text-shadow: 0px 0px 5px #23b3b3;;
    }

    span img {
      display: block;
      width: 12px;
      height: 12px;
      color: #fff;
      cursor: pointer;
    }
  }

  .map-txt {
    padding: 10px 15px;
    color: #fff;
    line-height: 20px;
    font-size: 12px;

    .d-l-con {
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10rem);
}
</style>