地图替换回滚

src/components/supermap-2.5d.vue

@@ -1,736 +1 @@
-<template>
-  <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
-  </div>
-</template>
 
-<script>
-import {
-  iconList,
-  getDeviceList
-} from '@/api/components/supermap.js'
-import {
-  getConfigKey
-} from '@/api/system/config'
-import Cookies from 'js-cookie'
-
-export default {
-  name: 'supermap-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,
-      queryParams: {
-        name: null,
-        mapData: null,
-        mapName: null
-      },
-    }
-  },
-  watch: {},
-  created() {
-  },
-  mounted() {
-    // this.superMapInfo();
-  },
-  props: {
-    putSmUserID_layer: null,
-  },
-  methods: {
-    superMapInfo(type, obj,NB) {
-      getConfigKey('superMap.iServer').then(response => {
-        this.superMapRootUrl = response.msg;
-        this.onload(type, obj,NB);
-      })
-    },
-    //清除所有
-    clearAll() {
-      this.viewer.entities.removeAll()
-    },
-    //移除之前添加的点
-    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;
-        });
-      }
-    },
-    onload(type, obj,NB) {
-      let that = this;
-      //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);
-          that.setGraphicsList(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
-        }
-      })
-    },
-    /**
-     * 地图图形(贴地)
-     */
-    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
-        }
-      })
-    }
-  },
-}
-</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>