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

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

<script>
import {
  iconList,
  getDeviceList
} from '@/api/components/supermap.js'
import Cookies from 'js-cookie'
import { getConfigKey } from "@/api/system/config";
export default {
  name: 'supermap-2.5d',
  data() {
    return {
        bindPopupHtml: null,
        mapshow: false,
      superMapRootUrl:null,
      viewer:null,
      scene:null,
      handler:null,
      pick:null,
      back_position:null,
      content:null,
      mvtMap0:null,
      shuixi_name:null,
      mvtMap1:null,
      mvtMap2:null,
      mvtMap3:null,
      road_name:null,
      layer_xiangzhenjie_name:null,
      markerboxEntity: [],//地图落点实体
      connectBoxEntity: null,//地图线实体
      graphicsBoxEntity: null,//地图面实体
      markerboxEntityRadius: [],//地图落点实体
      connectBoxEntityTwo: null,//地图线实体
      /*************************原地图属性*********************/
      isEditableLayers: false, //绘图控件

      /*************************原地图属性*********************/
      aac:null,
      queryParams: {
        name:null,
        mapData: null,
        mapName: null
      },
    }
  },
  watch: {},
  created() {
    this.superMapInfo();
  },
  mounted() {
  },
  props: {},
  methods: {
    //清除所有
    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)
      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.markerboxEntityRadius.push(marker)
        //绘制摄像头的圈（覆盖范围）
        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.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
      }
    },
    superMapInfo(){
      getConfigKey('superMap.iServer').then(response => {
        this.superMapRootUrl = response.msg;
        this.onload();
      })
    },
    onload(){
      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
      });
      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+"/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
      }));

      //飞行值坐标点,每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 = 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.农田
        // let nongtian = that.superMapRootUrl+"/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
        // 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+"/map-SIPING/rest/maps/XianJie_XiangZhenJie",
        }));

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

      }, 3000);

    },
    /**
     * 地图落点
     */
    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;
            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);
    },
    /**
     * 地图落点(传感器)
     */
    setMarkers_cgq(makerList){
      let that = this;
      that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);

      for (let i in makerList) {
        let longitude = makerList[i].lng;
        let latitude = makerList[i].lat;
        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.viewer.scene.globe.depthTestAgainstTerrain=false;
      that.createLeftClickDescription_cgq();
    },
    /**
     *鼠标左击事件是原来的气泡(传感器)
     */
    createLeftClickDescription_cgq() {
      let that = this;
      clearInterval(that.aac);
      that.handler.setInputAction(function (movement) {
        that.aac = setInterval(function (){
          let color = "green";
          let value = Math.random();
          let up = "▲";
          let down = "▼";
          if(value>0.5){
            color = "red";
            value = value +""+ up;
          }else{
            value = value +""+ down;
          }
          let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
          window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
        },1000);
      }, Cesium.ScreenSpaceEventType.LEFT_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>