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

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

    </div>

</template>
<script>
  import {
    iconList,
  } from '@/api/components/supermap.js'
	export default {
		name: 'sookaSuperMap',
		data() {
      return {
        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,
        /*************************原地图属性*********************/
        isEditableLayers: false, //绘图控件

        /*************************原地图属性*********************/
      }
		},
		watch: {
    },
		mounted() {
      this.onload();
    },
		props: {},
		methods: {
      onload() {
        let that = this;
        //1.添加地形数据
        that.viewer = new Cesium.Viewer('cesiumContainer', {
          //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
          terrainProvider: new Cesium.CesiumTerrainProvider({
            url: "http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace/datas/dem%40spyx4326",
            //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
            invisibility: true
          }),
          infoBox: true
        }, {
          contextOptions: {
            msaaLevel: 4,
            requestWebgl2: true
          },
          orderIndependentTranslucency: false
        });
        that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印
        this.scene = this.viewer.scene;
        //2.添加SuperMap iServer发布的影像服务
        let layer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          url: "http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
        }));
        //3.添加县界
        // let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
        //   url : "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/XianJie",
        // }));
        //4.添加乡镇界
        let layer_xiangzhenjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          url: "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/XiangZhenJie",
        }));
        // //5.水系
        // let shuixi = "http://121.36.228.94:8090/iserver/services/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
        // this.mvtMap0 = this.scene.addVectorTilesMap({
        //   url: shuixi,
        //   canvasWidth: 512,
        //   name: 'mvt_map0',
        //   viewer: this.viewer,
        //   // show: true,
        //   // selectedColor: new Cesium.Color(6, 169, 254, 0.5)
        // });
        // //6.林地
        // let lindi = "http://121.36.228.94:8090/iserver/services/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
        // this.mvtMap1 = this.scene.addVectorTilesMap({
        //   url: lindi,
        //   canvasWidth: 512,
        //   name: 'mvt_map1',
        //   viewer: this.viewer,
        //   show:true,
        //   selectedColor:new Cesium.Color(6,169,254,0.5)
        // });
        //7.农田
        let nongtian = "http://121.36.228.94:8090/iserver/services/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
        this.mvtMap2 = this.scene.addVectorTilesMap({
          url: nongtian,
          canvasWidth: 512,
          name: 'mvt_map2',
          viewer: this.viewer,
          show:true,
          selectedColor:new Cesium.Color(6,169,254,0.5)
        });
        // //8.路网
        // let road = "http://121.36.228.94:8090/iserver/services/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
        // this.mvtMap3 = this.scene.addVectorTilesMap({
        //   url: road,
        //   canvasWidth: 512,
        //   name: 'mvt_map3',
        //   viewer: this.viewer,
        //   show:true,
        //   selectedColor:new Cesium.Color(6,169,254,0.5)
        // });
        // //9.添加路网NAME
        // this.road_name = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
        //   url : "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/road_Name",
        //   show : false
        // }));
        // // 10.添加水系NAME
        // this.shuixi_name = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
        //   url: "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/shuixi_Name",
        //   show: false
        // }));

        //11.添加乡镇界名称
        let layer_xiangzhenjie_name = 'http://121.36.228.94:8090/iserver/services/3D-XiangZhenJie_Name/rest/realspace';
        this.scene.open(layer_xiangzhenjie_name);

        //    heading-代表镜头左右方向,正值为右,负值为左
        //    pitch-代表镜头上下方向,正值为上,负值为下.
        //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
        that.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 350000),
          orientation: {
            // heading :  Cesium.Math.toRadians(346.4202942851978),
            // pitch : Cesium.Math.toRadians(-16.74026687972041),
            // roll : Cesium.Math.toRadians(0)
          }
        });
      },
      //移除之前添加的点
      clearM(){
        this.viewer.entities.removeAll();
      },
      /**
       * 地图落点
       */
      setMarkers(makerList){
        let that = this;
        that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
        clearInterval(that.aac);
        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();
        that.createRightClickDescription();
      },
      /**
       *鼠标左击事件是原来的气泡
       */
      createLeftClickDescription() {
        let that = this;
        that.handler.setInputAction(function (movement) {
        }, Cesium.ScreenSpaceEventType.LEFT_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);
      },
      /**
       *鼠标右击事件是原来的点击
       */
      createRightClickDescription() {
        let that = this;
        that.handler.setInputAction(function (movement) {
          // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口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),
        });
      },
    }
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/base.scss';


</style>