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" @click="openTvwall()"></i>
            <span><img src="../assets/images/close.svg" @click="mapshow=false"/></span>
          </div>
          <div class="map-txt" v-html="bindPopupHtml">
          </div>
          <el-button size="mini" type="primary"
                     class="sj-icon-btn" @click="openTvwall"
          >查看
          </el-button>
          <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 {
        openZt: false,
        clickName:null,
        parameter:null,
        dianshiqiang:null,
        longitude:null,
        latitude:null,
        userList:[],
        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 => {
              that.openZt = true;
              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"
                    }
                  ]
                })
              }
              that.dianshiqiang = [
                {
                  "switchTab": "2",
                  "treeLabels": treeLabels,
                  "labelChannels": labelChannels
                }
              ]
              that.longitude = res.data[0].longitude;
              that.latitude = res.data[0].latitude;
              that.userList = res.data[0].userList;
              let html =
                '<div class="map-tip">' +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>名称：" + (that.queryParams.name?that.queryParams.name:'') +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>";
              for (let i in res.data[0].userList){
                html += "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>" +res.data[0].userList[i].position+":"+res.data[0].userList[i].name+"</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>"+
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>电话：" + (res.data[0].userList[i].phone ? res.data[0].userList[i].phone : "")+"</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>";
              }
              html += "</div>";
              that.bindPopupHtml = html;
              that.mapshow = true
            });
          }
        });
      },
      openTvwall(){
        this.mapshow = false;
        if(this.openZt){
          this.$emit('fatherMethod', this.dianshiqiang, this.longitude, this.latitude, this.userList);
        }else{
          this.$emit(this.clickName, this.parameter);
        }
      },
      /**
       * 地图落点
       */
      setMarkers(makerList) {
        let that = this
        that.handler = new Cesium.ScreenSpaceEventHandler(this.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.clickName=id._click;
              that.parameter=id._parameter;
              that.mapshow = true
              that.openZt = false
            } 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()
      },
      /**
       * 地图画线(贴地)
       */
      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);
  }
  .map-tit{
    .sj-icon-btn{
      display: block;
      margin: 10px auto 15px auto;
      padding: 0px 16px;
      font-size: 10px;
      height: 1.7rem;
    }
  }
</style>