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

<template>
    <div id="cesium-container" 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,
        stkTerrainProvider:null,
        /*************************原地图属性*********************/
        isEditableLayers: false, //绘图控件

        /*************************原地图属性*********************/
      }
		},
		watch: {
    },
		mounted() {
      this.viewer = new Cesium.Viewer('cesium-container')
      //添加SuperMap iServer发布的影像服务
      // var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
      //   url: 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace'
      // }));
      // //添加SuperMap iServer发布的影像服务
      // var layer1 = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
      //   url: 'http://121.36.228.94:8090/iserver/services/map-spyx4326/rest/maps/dem'
      // }));

      this.scene = this.viewer.scene;
      this.scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
      var urlStr = 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace';
      this.scene.open(urlStr);

      //将三维球定位到指定位置，camera是相机，是当前视野范围相机
      //destination是相机的目标位置，参数是经度、纬度、高度
      //orientation是相机朝向
      //    heading-代表镜头左右方向,正值为右,负值为左
      //    pitch-代表镜头上下方向,正值为上,负值为下.
      //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(124.5465087890625, 43.0869197845459, 25000),
        orientation: {
          heading :  Cesium.Math.toRadians(348.4202942851978),
          pitch : Cesium.Math.toRadians(-30.74026687972041),
          roll : Cesium.Math.toRadians(0)
        },
        complete:function callback() {
          // 定位完成之后的回调函数

        }
      });
    },
		props: {},
		methods: {
      //移除之前添加的点
      clearM(){
        this.viewer.entities.removeAll();
      },
      /**
       * 地图落点
       */
      setMarkers(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();
        that.createRightClickDescription();
      },
      /**
       *鼠标左击事件是原来的气泡
       */
      createLeftClickDescription() {
        let that = this;
        that.handler.setInputAction(function (movement) {
        }, 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';

  input[type=checkbox] {
    margin: 0px 4px 0 0px;
  }

  label {
    display: inline-block;
  }

  .param-container {
    border: none;
  }

  .titleBox {
    margin-bottom: 0px;
  }

  .sm-div-graphic {
    position: absolute;
    color: #fff;
    font-size: 14px;
  }

  #test .divpoint {
    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
    background-size: cover;
    width: 128px;
    height: 216px;
  }

  #test3 .divpoint {
    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
    background-size: cover;
    width: 230px;
    height: 150px;
  }

  #test .label-wrap {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 50px;
  }

  #test3 .label-wrap {
    padding-left: 100px;
    padding-top: 8px;
    box-sizing: border-box;
  }

  #test .pop-title {
    color: #fff;
    margin-top: 11px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    font-size: 18px;
  }


  #test .data-li {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 5px;
  }

  #test3 .data-li {
    font-size: 14px;
    margin-top: 6px;
  }

  #test2 .divpoint {
    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
    background-size: cover;
    width: 116px;
    height: 120px;
  }

  #test2 .label-wrap {
    box-sizing: border-box;
    padding-top: 10px;
    padding-left: 51px;
  }

</style>