tz-onest-monitor/monitor_ui/src/views/components/supermap-2.5d.vue

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
  </div>
</template>

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

  export default {
    name: 'supermap-camera-2.5d',
    data() {
      return {
        chooseMode: [
          Cesium.DrawMode.Line,
          Cesium.DrawMode.Polygon,
        ],
        markerList: [],
        bindPopupHtml: null,
        mapshow: false,
        superMapRootUrl: null,
        layerList: [],
        viewer: null,
        scene: null,
        handler: null,
        pick: null,
        back_position: null,
        type: null,
        content: null,
        mvtMap0: null,
        shuixi_name: null,
        mvtMap1: null,
        mvtMap2: null,
        mvtMap3: null,
        road_name: null,
        layer_xiangzhenjie_name: null,
        markerboxEntity: [],//地图落点实体
        connectBoxEntity: null,//地图线实体
        graphicsBoxEntity: null,//地图面实体
        markerboxEntityRadius: [],//地图落点实体
        connectBoxEntityTwo: null,//地图线实体
        /*************************原地图属性*********************/
        isEditableLayers: false, //绘图控件

        /*************************原地图属性*********************/
        aac: null,
        dataMap: {},
        queryParams: {
          name: null,
          mapData: null,
          mapName: null
        },
        deptId: Cookies.get('deptId'),
      }
    },
    watch: {},
    created() {
    },
    mounted() {
    },
    props: {
      putSmUserID_layer: null,
    },
    methods: {

      superMapInfo(type, obj,NB,state,map3dType) {//map3dType用于区分是多个区域还是单个区域：1等于多个区域其他为单个区域
        getConfigKey('superMap.iServer').then(response => {
          this.superMapRootUrl = response.msg;
        })
        if (state==undefined){
          state = 12; //监控中心
        }
        queryMap(state,this.deptId).then(req => {
            req = req.sort(function(a, b) {
              return a.sort - b.sort
            })
            this.onload(req,type, obj,NB,map3dType)
          }
        )
      },
      //清除所有
      clearAll() {
        this.viewer.entities.removeAll();
      },
      clearAllByQin(val) {
        this.viewer.entities.removeAll();
        this.entityHandler(val-2)
      },
      //移除之前添加的点
      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 = []
        }
      },
      //移除之前添加的线
      clearTwoC() {
        if (this.connectBoxEntityTwo != null) {
          this.viewer.entities.remove(this.connectBoxEntityTwo)
          this.connectBoxEntityTwo = null
        }
      },
      /**
       * 地图落点-覆盖范围
       */
      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
          }
        })
      },
      //移除之前添加的点
      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 = []
        }
      },
      //移除之前添加的线
      clearC() {
        if (this.connectBoxEntity != null) {
          this.viewer.entities.remove(this.connectBoxEntity)
          this.connectBoxEntity = null
        }
      },
      //移除之前添加的面
      clearG() {
        if (this.graphicsBoxEntity != null) {
          this.viewer.entities.remove(this.graphicsBoxEntity)
          this.graphicsBoxEntity = null
        }
      },
      reload(list) {
        this.removeAll();
        this.layerList = list;
        for (let i = 0; i < this.layerList.length; i++) {
          if (this.layerList[i] == "lindi") {
            this.loadLindi();
          } else if (this.layerList[i] == "shuixi") {
            this.loadShuixi();
          } else if (this.layerList[i] == "road") {
            this.loadRoad();
          } else if (this.layerList[i] == "nongtian") {
            this.loadNongtian();
          }
        }
      },
      loadShuixi() {//水系
        let that = this;
        if (that.mvtMap0 != null) {
          that.mvtMap0.show = true;
          that.shuixi_name.then(function (layers) {
            let textlayer = that.viewer.scene.layers.find('ShuiXi@SiPing#1');//文字图层
            textlayer.visible = true;
          });
        }
      },
      loadLindi() {//林地
        if (this.mvtMap1 != null) {
          this.mvtMap1.show = true;
        }
      },
      loadNongtian() {//农田
        if (this.mvtMap2 != null) {
          this.mvtMap2.show = true;
        }
      },
      loadRoad() {//路网
        let that = this;
        if (that.mvtMap3 != null) {
          that.mvtMap3.show = true;
          that.road_name.then(function (layers) {
            let provinceRoad_textLayer = that.viewer.scene.layers.find('ProvinceRoad_L@SiPing#1');//文字图层
            let countyRoad_textLayer = that.viewer.scene.layers.find('CountyRoad_L@SiPing#1');//文字图层
            let stateRoad_textLayer = that.viewer.scene.layers.find('StateRoad_L@SiPing#1');//文字图层
            provinceRoad_textLayer.visible = true;
            countyRoad_textLayer.visible = true;
            stateRoad_textLayer.visible = true;
          });
        }
      },
      removeAll() {
        let that = this;
        // 移除方法，暂存：this.viewer.scene.removeVectorTilesMap(this.mvtMap3.name);
        if (that.mvtMap0 != null) {
          that.mvtMap0.show = false;
          //that
          that.shuixi_name.then(function (layers) {
            let textlayer = that.viewer.scene.layers.find('ShuiXi@SiPing#1');//文字图层
            textlayer.visible = false;
          });
        }
        if (that.mvtMap1 != null) {
          that.mvtMap1.show = false
        }
        if (that.mvtMap2 != null) {
          that.mvtMap2.show = false
        }
        if (that.mvtMap3 != null) {
          that.mvtMap3.show = false

          //NAME隐藏
          that.road_name.then(function (layers) {
            let provinceRoad_textLayer = that.viewer.scene.layers.find('ProvinceRoad_L@SiPing#1');//文字图层
            let countyRoad_textLayer = that.viewer.scene.layers.find('CountyRoad_L@SiPing#1');//文字图层
            let stateRoad_textLayer = that.viewer.scene.layers.find('StateRoad_L@SiPing#1');//文字图层
            provinceRoad_textLayer.visible = false;
            countyRoad_textLayer.visible = false;
            stateRoad_textLayer.visible = false;
          });
        }
      },
      addImageryProvider(uri) {
        let that = this
        that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          url: that.superMapRootUrl + uri
        }))
      },
      addVectorTilesMap(uri) {
        let that = this
        that.scene.addVectorTilesMap({
          url: that.superMapRootUrl + uri,
          canvasWidth: 512,
          name: 'mvt_map3',
          viewer: that.viewer,
          show: true
        })
      },
      addOpen(sort, uri) {
        let that = this
        that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri)
      },
      addOpen_model(sort, uri) {
        let that = this
        that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri)
        //开始加载专题图等数据，8秒后开始执行
        setTimeout(function () {
          /**
           * @param dom ScreenSpaceEventHandler操作的dom节点，画的框会成为其子节点
           */
          function DrawRectHandler(dom) {
            let startPoint,
              self = this,
              isShiftAndLeftDown = false,
              handler = new Cesium.ScreenSpaceEventHandler(dom),
              removalFunctions = [],
              rect = new Rect(dom)
            this.isDestroyed = false
            this.activeEvt = new Cesium.Event()
            this.cancelEvt = new Cesium.Event()
            this.movingEvt = new Cesium.Event()
            this.drawEvt = new Cesium.Event()

            // div框
            function Rect(parentDom) {
              this.rect = document.createElement('div')
              this.rect.style.visibility = 'hidden'
              parentDom.appendChild(this.rect)
              this.leftTopPoint = new Cesium.Cartesian2()
              this.rightBottomPoint = new Cesium.Cartesian2()
              Rect.prototype.setPosition = function (startPoint, endPosition) {
                let w = endPosition.x - startPoint.x
                let h = endPosition.y - startPoint.y
                let left, top, width, height
                if (w < 0) {
                  left = endPosition.x
                  width = -w
                } else {
                  left = startPoint.x
                  width = w
                }
                if (h < 0) {
                  top = endPosition.y
                  height = -h
                } else {
                  top = startPoint.y
                  height = h
                }
                this.leftTopPoint = new Cesium.Cartesian2(left, top)
                this.rightBottomPoint = new Cesium.Cartesian2(left + width, top + height)
                this.rect.style = `position:fixed;top:${top}px;left:${left}px;width:${width}px;height:${height}px;border:2px dashed #333;`
                this.setVisible(true)
              }
              Rect.prototype.setVisible = function (isVisible) {
                this.rect.style.visibility = isVisible ? 'visible' : 'hidden'
              }
              Rect.prototype.getRectPoint = function () {
                return {
                  leftTopPoint: this.leftTopPoint,
                  rightBottomPoint: this.rightBottomPoint
                }
              }
              Rect.prototype.destroy = function () {
                dom.removeChild(rect)
                this.rect = null
              }
            }

            // canvas框
            function RectCanvas(parentDom) {
              let canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d')
              this.canvas = canvas
              canvas.width = parentDom.clientWidth
              canvas.height = parentDom.clientHeight
              canvas.style = 'position:fixed;top:0;left:0;z-index:-1'
              parentDom.appendChild(canvas)
              this.leftTopPoint = new Cesium.Cartesian2()
              this.rightBottomPoint = new Cesium.Cartesian2()
              RectCanvas.prototype.setPosition = function (startPoint, endPosition) {
                let w = endPosition.x - startPoint.x
                let h = endPosition.y - startPoint.y
                let left, top, width, height
                if (w < 0) {
                  left = endPosition.x
                  width = -w
                } else {
                  left = startPoint.x
                  width = w
                }
                if (h < 0) {
                  top = endPosition.y
                  height = -h
                } else {
                  top = startPoint.y
                  height = h
                }
                this.leftTopPoint = new Cesium.Cartesian2(left, top)
                this.rightBottomPoint = new Cesium.Cartesian2(left + width, top + height)
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.strokeRect(left, top, width, height)
              }
              RectCanvas.prototype.setVisible = function (isVisible) {
                if (isVisible) {
                  canvas.style.zIndex = '999'
                } else {
                  canvas.style.zIndex = '-1'
                }
              }
              RectCanvas.prototype.getRectPoint = function () {
                return {
                  leftTopPoint: this.leftTopPoint,
                  rightBottomPoint: this.rightBottomPoint
                }
              }
              RectCanvas.prototype.destroy = function () {
                dom.removeChild(canvas)
                ctx = null
                this.canvas = null
              }
            }

            // 开关相机控制
            function setCameraCtrl(isActive) {
              let cameraCtrl = that.scene.screenSpaceCameraController
              cameraCtrl.enableRotate = isActive
              cameraCtrl.enableTranslate = isActive
              cameraCtrl.enableZoom = isActive
              cameraCtrl.enableTilt = isActive
              cameraCtrl.enableLook = isActive
            }

            // 鼠标cursor控制
            function toggleCursorStyle(isActive) {
              if (isActive) {
                that.viewer.enableCursorStyle = false
                that.viewer._element.style.cursor = ''
                dom.style.cursor = 'default'
              } else {
                that.viewer.enableCursorStyle = true
              }
            }

            // 初始化事件处理
            function initEvent() {
              handler.setInputAction(function (e) {
                isShiftAndLeftDown = true
                startPoint = new Cesium.Cartesian2(e.position.x, e.position.y)
              }, Cesium.ScreenSpaceEventType.LEFT_DOWN, Cesium.KeyboardEventModifier.SHIFT)
              // shift松开时，始终将rect隐藏
              let keyUpFunction = function (e) {
                self.cancelEvt.raiseEvent()
                if (e.key == 'Shift' && isShiftAndLeftDown && !self.isDestroyed) {
                  isShiftAndLeftDown = false
                  rect.setVisible(false)
                }
              }

              document.addEventListener('keyup', keyUpFunction)
              removalFunctions.push(function () {
                document.removeEventListener('keyup', keyUpFunction)
              })
              handler.setInputAction(function (e) {
                let endPosition = e.endPosition
                self.activeEvt.raiseEvent(endPosition)
                if (!isShiftAndLeftDown) return
                rect.setPosition(startPoint, endPosition)
                rect.setVisible(true)
                self.movingEvt.raiseEvent(rect.getRectPoint())
              }, Cesium.ScreenSpaceEventType.MOUSE_MOVE, Cesium.KeyboardEventModifier.SHIFT)
              handler.setInputAction(function (e) {
                isShiftAndLeftDown = false
                rect.setVisible(false)
                self.drawEvt.raiseEvent(rect.getRectPoint())
              }, Cesium.ScreenSpaceEventType.LEFT_UP, Cesium.KeyboardEventModifier.SHIFT)
              handler.setInputAction(function (e) {
                isShiftAndLeftDown = false
                rect.setVisible(false)
              }, Cesium.ScreenSpaceEventType.LEFT_UP)
            }

            // 移除事件监听
            function removeEvent() {
              handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN, Cesium.KeyboardEventModifier.SHIFT)
              handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE, Cesium.KeyboardEventModifier.SHIFT)
              handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP, Cesium.KeyboardEventModifier.SHIFT)
              handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
            }

            DrawRectHandler.prototype.destroy = function () {
              if (this.isDestroyed) return
              setCameraCtrl(true)
              removeEvent()
              for (let i = 0, j = removalFunctions.length; i < j; i++) {
                removalFunctions[i]()
              }
              handler.destroy()
              rect.destroy()
              rect = null
              this.isDestroyed = true
            }
            DrawRectHandler.prototype.activate = function () {
              if (this.isDestroyed) return
              setCameraCtrl(false)
              toggleCursorStyle(true)
              initEvent()
            }
            DrawRectHandler.prototype.deactivate = function () {
              if (this.isDestroyed) return
              setCameraCtrl(true)
              toggleCursorStyle(false)
              removeEvent()
            }
          }

          new Cesium.when(that.dataMap[sort], function (layers) {
            for (let layer of layers) {
              layer.selectColorType = 1
              that.selectedObjs[layer.name] = []
              that.resetIds[layer.name] = []
            }
            let drawRect = that.drawRect = new DrawRectHandler(document.body)
            // res为框的左上点与右下点的相对于给定dom节点的坐标
            drawRect.drawEvt.addEventListener(function (res) {
              for (let layer of layers) {
                layer.selectColorType = 1
              }
              that.tooltip = false
              let selectedColor = new Cesium.Color(1, 0, 0, 1)
              that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint)
              let objs = that.scene.getPickRectIDs()
              let selectedObjs = that.selectedObjs
              let resetIds = that.resetIds
              for (let k in selectedObjs) {
                if (selectedObjs[k].length > 0) {
                  that.scene.layers.find(k).removeObjsColor(selectedObjs[k])
                }
              }
              if (that.kuangxuan) {
                for (let layer of layers) {
                  let layerName = layer.name
                  if (layerName === undefined) break
                  let layerSlt = objs.find(e => e.layerName === layerName)
                  let sltIds = (layerSlt && layerSlt.ids) || []
                  resetIds[layerName] = selectedObjs[layerName]
                  selectedObjs[layerName] = sltIds
                  console.log('框选结束',  sltIds)
                  that.$parent.$refs.ldTk.FrameSelectedData(sltIds)
                  that.$parent.$refs.ldTk.allLouDongDialog = true
                  layer.setObjsColor(selectedObjs[layerName], selectedColor)
                }
              }
            })

            drawRect.movingEvt.addEventListener(function (res) {
              that.tooltip = true
              if (that.kuangxuan) {
                that.tooltipText = "松开鼠标左键以结束选择区域"
                for (let layer of layers) {
                  layer.selectColorType = 1
                }
                that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint)
              } else {
                that.tooltipText = "请点击框选"
              }
            })
            drawRect.activeEvt.addEventListener(function (position) {
              that.tooltip = true
              if (that.kuangxuan) {
                that.tooltipText = "松开鼠标左键以结束选择区域"
              } else {
                that.tooltipText = "请点击框选"
              }
            })
            drawRect.cancelEvt.addEventListener(function () {
              that.tooltip = false
            })

            let canvas = document.querySelector('div.cesium-widget canvas')
            canvas.setAttribute('tabindex', '0') // needed to put focus on the canvas
            canvas.focus()
            document.addEventListener('keydown', function (e) {
              if (e.key === 'Shift') {
                drawRect.activate()
              }
            })
            document.addEventListener('keyup', function (e) {
              if (e.key === 'Shift') {
                drawRect.deactivate()
              }
            })
          }, function () {
            // let title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？'
            // widget.showErrorPanel(title, undefined, e)
          }).then(function () {

          }, function (e) {
            console.log(e)
          })
        }, 3000);
      },
      addFind(parentId, uri) {
        let that = this
        that.dataMap[parentId].then(function(layers) {
          let dat = that.scene.layers.find(uri) //区县文字图层
          //关闭避让
          dat.isOverlapDisplayed = true
        })
      },
      flyTo(longitude, latitude, height) {
        let that = this
        setTimeout(function() {
          that.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
            orientation: {}
          })
        }, 3000)
      },
      onload(supermapUrls,type, obj,NB,map3dType) {
        let that = this
        const withinData = supermapUrls
        //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发布的影像服务
        that.addImageryProvider(withinData[0].path)
        let longitude = withinData[0].coordinate.split(',')[0]
        let latitude = withinData[0].coordinate.split(',')[1]
        let height = withinData[0].scale
        that.flyTo(longitude, latitude, height)
        setTimeout(function() {
          for (let i = 1; i < withinData.length; i++) {
            setTimeout(() => {
              if (withinData[i].type == 'addImagery') {
                that.addImageryProvider(withinData[i].path)
              } else if (withinData[i].type == 'addVectorTilesMap') {
                that.addVectorTilesMap(withinData[i].path)
              } else if (withinData[i].type == 'open') {
                that.addOpen(withinData[i].sort, withinData[i].path)
              }else if (withinData[i].type == 'open_model') {
                that.addOpen_model(withinData[i].sort, withinData[i].path)
              } else if (withinData[i].type == 'find') {
                that.addFind(withinData[i].parentId, withinData[i].path)
              }
            }, 100 * i)
          }
        }, 3000)



        /*//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
        });
        let 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 + "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
        }));

        //3.添加SuperMap 建筑场景
        let aaaa = that.superMapRootUrl + "/3D-local3DCache-Data3/rest/realspace";
        scene.open(aaaa);*/

        //飞行值坐标点,每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);*/

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

          //4.林地
          let lindi = that.superMapRootUrl + "/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
          that.mvtMap1 = scene.addVectorTilesMap({
            url: lindi,
            canvasWidth: 512,
            name: 'mvt_map1',
            viewer: that.viewer
          });
          that.mvtMap1.selectedColor = new Cesium.Color(6, 254, 181, 0.5);
          that.mvtMap1.show = false;

          //5.农田
          let nongtian = that.superMapRootUrl + "/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
          that.mvtMap2 = scene.addVectorTilesMap({
            url: nongtian,
            canvasWidth: 512,
            name: 'mvt_map2',
            viewer: that.viewer
          });
          that.mvtMap2.selectedColor = new Cesium.Color(250, 236, 246, 1.0);
          that.mvtMap2.show = false;

          //6.路网
          let road = that.superMapRootUrl + "/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
          that.mvtMap3 = scene.addVectorTilesMap({
            url: road,
            canvasWidth: 512,
            name: 'mvt_map3',
            viewer: that.viewer
          });
          that.mvtMap3.show = false;

          //7.添加路网NAME
          let road_name_url = that.superMapRootUrl + '/3D-road_Name_S/rest/realspace';
          that.road_name = scene.open(road_name_url);

          that.road_name.then(function (layers) {
            let provinceRoad_textLayer = scene.layers.find('ProvinceRoad_L@SiPing#1');//文字图层
            let countyRoad_textLayer = scene.layers.find('CountyRoad_L@SiPing#1');//文字图层
            let stateRoad_textLayer = scene.layers.find('StateRoad_L@SiPing#1');//文字图层
            //加载后隐藏
            provinceRoad_textLayer.visible = false;
            countyRoad_textLayer.visible = false;
            stateRoad_textLayer.visible = false;
            //关闭避让
            provinceRoad_textLayer.isOverlapDisplayed = true;
            countyRoad_textLayer.isOverlapDisplayed = true;
            stateRoad_textLayer.isOverlapDisplayed = true;
          });
          // 8.添加水系NAME
          let shuixi_name_url = that.superMapRootUrl + '/3D-shuixi_Name/rest/realspace';
          that.shuixi_name = scene.open(shuixi_name_url);
          that.shuixi_name.then(function (layers) {
            let textlayer = scene.layers.find('ShuiXi@SiPing#1');//文字图层
            //加载后隐藏
            textlayer.visible = false;
            //关闭避让
            textlayer.isOverlapDisplayed = true;
          });

          //9.添加县界和乡镇界
          let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
            url: that.superMapRootUrl + "/map-SIPING/rest/maps/XianJie_XiangZhenJie",
          }));

          //10.添加区县乡镇村名称
          let layer_xiangzhenjie_name = that.superMapRootUrl + '/3D-Name_he/rest/realspace';
          scene.open(layer_xiangzhenjie_name);
          that.road_name.then(function (layers) {
            let xianJie_textLayer = scene.layers.find('XianJie@SiPing#1');//区县文字图层
            let xiangZhenJie_textLayer = scene.layers.find('XiangZhenJie@SiPing#2');//乡镇文字图层
            let cun_textLayer = scene.layers.find('Cun@SiPing#1');//村文字图层
            //关闭避让
            xianJie_textLayer.isOverlapDisplayed = true;
            xiangZhenJie_textLayer.isOverlapDisplayed = true;
            cun_textLayer.isOverlapDisplayed = true;
          });

          // //9.添加乡镇界
          // let layer_xiangzhenjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          //   url : that.superMapRootUrl+"/map-SIPING/rest/maps/XiangZhenJie",
          // }));
          //
          // //10.添加县界
          // let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          //   url : that.superMapRootUrl+"/map-SIPING/rest/maps/XianJie",
          // }));

          // //11.添加县界名称 此处要先添加县界名称 否则县界名会不显示
          // let layer_xianjie_name = that.superMapRootUrl+'/3D-XianJie_Name/rest/realspace';
          // scene.open(layer_xianjie_name);
          //
          // //12.添加乡镇界名称
          // let layer_xiangzhenjie_name = that.superMapRootUrl+'/3D-XiangZhenJie_Name/rest/realspace';
          // scene.open(layer_xiangzhenjie_name);

        }, 3000);*/
        if (NB!='NB') {
          if (type == 1) {//拾取点位
            that.getLeftClickDescription(obj);
          }
          if (type == 2) {//标线
            that.entityHandler(0);
            that.setConnectList(obj.graphicsList, obj.color, obj.withAlpha);
          }
          if (type == 3) {//标面
            that.entityHandler(1);
            if (map3dType == 1){//多区域
              this.setGraphicsList2(obj.graphicsList, obj.color, obj.withAlpha)
            }else {//单区域
              that.setGraphicsList1(obj.graphicsList, obj.color, obj.withAlpha);
            }


          }
        }
        if (NB=='NB' && type == 2){
          // console.log(obj)
          that.entityHandler(0);
          // that.setConnectList(obj.graphicsList, obj.color, obj.withAlpha);
          for (let i = 0; i < obj.length; i++) {
            let arrayBlue = [];
            let arrayRed = [];
            // if (Array.isArray(obj[i].params)){
            for (let j = 0; j < obj[i].params.length; j++) {
              if (obj[i].id===666){
                arrayBlue.push(obj[i].params[j].lng);
                arrayBlue.push(obj[i].params[j].lat);
              }
              else {
                arrayRed.push(obj[i].params[j].lng);
                arrayRed.push(obj[i].params[j].lat);
              }
            }
            that.setConnectTwoList(
              Array.isArray(arrayRed) && arrayRed.length > 0 ? arrayRed : [],
              "rgba(232,14,14,0)",
              0.8
            );
            that.setConnectTwoList(
              Array.isArray(arrayBlue) && arrayBlue.length > 0 ? arrayBlue : [],
              "rgba(14,25,231,0)",
              0.8
            );
            // }
          }
        }
        that.viewer.selectedEntityChanged.addEventListener(function (entity) {
          if (entity != undefined && Reflect.has(entity, 'layerID')) {
            that.putSmUserID_layer(entity);
          }
        });
      },
      entityHandler(chooseDrawMode) {
        let that = this;
        that.markerList = [];
        that.handler = new Cesium.DrawHandler(that.viewer, that.chooseMode[chooseDrawMode]);
        that.handler.activeEvt.addEventListener(function (isActive) {
          if (isActive == true) {
            that.viewer.enableCursorStyle = false;
            that.viewer._element.style.cursor = '';
          } else {
            that.viewer.enableCursorStyle = true;
          }
        });
        that.viewer.scene.globe.depthTestAgainstTerrain = false
        that.handler.activate();
        var newhandler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
        newhandler.setInputAction(function (event) {
          // 屏幕坐标转世界坐标——关键点
          var ellipsoid = that.viewer.scene.globe.ellipsoid;
          var cartesian = that.viewer.camera.pickEllipsoid(event.position, ellipsoid);
          //将笛卡尔坐标转换为地理坐标
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          //将弧度转为度的十进制度表示
          var lon = Cesium.Math.toDegrees(cartographic.longitude);
          var lat = Cesium.Math.toDegrees(cartographic.latitude);
          let draw = {lng: 0, lat: 0};
          draw.lng = lon;
          draw.lat = lat;
          if (!that.markerList.includes(draw)) {
            that.markerList.push(draw);
            that.$emit("showLatLng", {markerList: that.markerList});
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      },
      getLeftClickDescription(obj) {
        let that = this
        that.handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
        if (obj.longitude) {
          //在点击位置添加对应点
          that.viewer.entities.add({
            name: '',
            position: Cesium.Cartesian3.fromDegrees(obj.longitude, obj.latitude),
            billboard: {
              image: iconList['marker'],
              width: 48,
              height: 48,
              disableDepthTestDistance: Number.POSITIVE_INFINITY
            },
          })
        }
        //设置鼠标左键单击回调事件
        that.handler.setInputAction(function (e) {
          //首先移除之前添加的点
          that.viewer.entities.removeAll();
          //获取点击位置笛卡尔坐标
          let position = that.viewer.scene.pickPosition(e.position);
          //将笛卡尔坐标转化为经纬度坐标
          let cartographic = Cesium.Cartographic.fromCartesian(position);
          let longitude = Cesium.Math.toDegrees(cartographic.longitude);
          let latitude = Cesium.Math.toDegrees(cartographic.latitude);
          that.$emit("showLatLng", {latitude: latitude, longitude: longitude})
          //在点击位置添加对应点
          that.viewer.entities.add({
            name: '',
            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
            billboard: {
              image: iconList['marker'],
              width: 48,
              height: 48,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              disableDepthTestDistance: Number.POSITIVE_INFINITY
            },
          })
          that.markerboxEntity.push(marker)
          that.viewer.scene.globe.depthTestAgainstTerrain = false
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
      /**
       * 地图落点
       */
      setMarkers(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.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;
            if (html != undefined && html._value != null && html._value != '') {
              that.bindPopupHtml = html
              that.mapshow = true
            } else {
              that.mapshow = false
            }
          } else {
            that.mapshow = false
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
      /**
       *鼠标右击事件是原来的点击
       */
      createRightClickDescription() {
        let that = this;
        that.handler.setInputAction(function (movement) {
          that.mapshow = false
          // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口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
          }
        })
        setTimeout(() => {
          if(connectList!=null&&Array.isArray(connectList)&&connectList.length>0){
            that.viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(connectList[0],connectList[1],6500),
              complete: function () {
                // 飞行结束后设置相机的高度
                var newHeight = 6500;
                var destination = that.viewer.camera.position.clone();
                destination.z = newHeight;
              }
            });
          }
        }, 3000);
      },
      setGraphicsList1(graphicsList, color, withAlpha) {
        let that = this
        //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置

        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
        that.graphicsBoxEntity = that.viewer.entities.add({
          polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
            clampToGround: true,//贴地 true,不贴地  false
            width: 5,
            material: material
          }
        });
        setTimeout(() => {
          if(graphicsList!=null&&Array.isArray(graphicsList)&&graphicsList.length>0){
            that.viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(graphicsList[0],graphicsList[1],6500),
              complete: function () {
                // 飞行结束后设置相机的高度
                var newHeight = 6500;
                var destination = that.viewer.camera.position.clone();
                destination.z = newHeight;
              }
            });
          }
        }, 3000);

      },
      setGraphicsList2(graphicsList, color, withAlpha) {
        let that = this;
        that.viewer.entities.removeAll(); // 移除地图标点
        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
        for (let i = 0; i < graphicsList.length; i++) {
          let positions = Cesium.Cartesian3.fromDegreesArray(graphicsList[i].latLng);
          let name = graphicsList[i].name.toString();
          let center = Cesium.BoundingSphere.fromPoints(positions).center;
          let namePosition = Cesium.Cartographic.fromCartesian(center);
          namePosition.height = 0; // 将名称高度设置为0，使其贴地显示

          that.graphicsBoxEntity = that.viewer.entities.add({
            polygon: {
              hierarchy: positions,
              clampToGround: true,
              width: 5,
              material: material
            }
          });

          that.viewer.entities.add({
            position: center,
            label: {
              text: name ,
              font: 'Bold 12px sans-serif',
              fillColor: Cesium.Color.BLACK,
              outlineColor: Cesium.Color.WHITE,
              outlineWidth: 2,
              pixelOffset: new Cesium.Cartesian2(0, 0),
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              disableDepthTestDistance: Number.POSITIVE_INFINITY
            }
          });
        }
      },
      /**
       * 地图图形(贴地)
       */
      setGraphicsList(graphicsList, color, withAlpha) {
        let that = this
        //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置

        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
        that.graphicsBoxEntity = that.viewer.entities.add({
          polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
            clampToGround: true,//贴地 true,不贴地  false
            width: 5,
            material: material
          }
        })
        setTimeout(() => {
          if(graphicsList!=null&&Array.isArray(graphicsList)&&graphicsList.length>0){
            that.viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(graphicsList[0],graphicsList[1],6500),
              complete: function () {
                // 飞行结束后设置相机的高度
                var newHeight = 6500;
                var destination = that.viewer.camera.position.clone();
                destination.z = newHeight;
              }
            });
          }
        }, 3000);
      }
    },
  }
</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>