tz-onest-system/system_ui/src/components/supermap-2.5d-vr.vue

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

<script>
let viewer;
let road_name;
let cacheData= {
  ProvinceRoad: "",
  CountyRoad: "",
  StateRoad: "",
  ShuiXi: "",
  XianJie: "",
  XiangZhenJie: "",
  Cun: "",
};
let promise;
import Cookies from 'js-cookie'
export default {
  name: 'supermap-2.5d-vr',
  data() {
    return {
      superMapRootUrl: null,
      layer: null,
      supermapUrls: [
        "/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326",
        "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",//底图0
        "/3D-local3DCache-0608XinBanQingXieShiJing/rest/realspace/datas/Combine/config",//3D模型（二级图层）1
        "/3D-road_Name_S/rest/realspace",//路网名称6
        "ProvinceRoad_L@SiPing#1",//名称图层叠加7
        "CountyRoad_L@SiPing#1",//名称图层叠加8
        "StateRoad_L@SiPing#1",//名称图层叠加9
        "/map-SIPING/rest/maps/XianJie_XiangZhenJie",//乡镇街界限12
        "/3D-Name_he/rest/realspace",//乡镇街名称13
        "XianJie@SiPing#1",//县界名称14
        "XiangZhenJie@SiPing#2",//乡镇街名称15
        "Cun@SiPing#1",//村名称16
      ],
    }
  },
  created() {
    this.superMapRootUrl = Cookies.get('superMap.iServer');
  },
  mounted() {
    let that = this;
    //1.添加地形数据
    viewer = new Cesium.Viewer('cesiumContainer', {
      //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
      terrainProvider: new Cesium.CesiumTerrainProvider({
        url: that.superMapRootUrl + that.supermapUrls[0],
        invisibility: true
      }),
      infoBox: false,
      navigation: false
    }, {
      contextOptions: {
        msaaLevel: 4,
        requestWebgl2: true
      },
      orderIndependentTranslucency: false
    });
    viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印

    //2.添加SuperMap iServer发布的影像服务
    that.layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
      url: that.superMapRootUrl + that.supermapUrls[1],
    }));
    promise = viewer.scene.addS3MTilesLayerByScp( that.superMapRootUrl + that.supermapUrls[2])

    //飞行值坐标点,每3秒推进一级
    //heading-代表镜头左右方向,正值为右,负值为左
    //pitch-代表镜头上下方向,正值为上,负值为下.
    //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
    // heading :  Cesium.Math.toRadians(346.4202942851978),
    // pitch : Cesium.Math.toRadians(-56.74026687972041),
    // roll : Cesium.Math.toRadians(0)
    setTimeout(function() {
      viewer.scene.camera.flyTo({
        //您这边设置一下漫游的目的地，也就是最后的经纬度和高度
        destination: new Cesium.Cartesian3.fromDegrees(124.35067376627266, 43.1645243760159, 1500), // 设置位置
        orientation: {
          heading: Cesium.Math.toRadians(346.4202942851978),
          pitch: Cesium.Math.toRadians(-56.74026687972041),
          roll: Cesium.Math.toRadians(0)
        },
        //控制漫游时间，单位是s
        duration:5,
      });
    }, 1000)

    //开始加载专题图等数据，8秒后开始执行
    setTimeout(function () {
      // 7.添加路网NAME
      let road_name_url = that.superMapRootUrl  + that.supermapUrls[3];
      road_name = viewer.scene.open(road_name_url);

      cacheData.ProvinceRoad = that.supermapUrls[4]
      cacheData.CountyRoad = that.supermapUrls[5]
      cacheData.StateRoad = that.supermapUrls[6]

      road_name.then(function (layers) {
        let provinceRoad_textLayer = viewer.scene.layers.find(that.supermapUrls[4]);//文字图层
        let countyRoad_textLayer = viewer.scene.layers.find(that.supermapUrls[5]);//文字图层
        let stateRoad_textLayer = viewer.scene.layers.find(that.supermapUrls[6]);//文字图层
        //加载后隐藏
        provinceRoad_textLayer.visible = false;
        countyRoad_textLayer.visible = false;
        stateRoad_textLayer.visible = false;
        //关闭避让
        provinceRoad_textLayer.isOverlapDisplayed = true;
        countyRoad_textLayer.isOverlapDisplayed = true;
        stateRoad_textLayer.isOverlapDisplayed = true;
      });

      //9.添加县界和乡镇界
      that.layer_xianjie = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
        url: that.superMapRootUrl + that.supermapUrls[7],
      }));

      //10.添加区县乡镇村名称
      let layer_xiangzhenjie_name = that.superMapRootUrl + that.supermapUrls[8];
      viewer.scene.open(layer_xiangzhenjie_name);
      cacheData.XianJie = that.supermapUrls[9]
      cacheData.XiangZhenJie = that.supermapUrls[10]
      cacheData.Cun = that.supermapUrls[11]
      road_name.then(function (layers) {
        let xianJie_textLayer = viewer.scene.layers.find(that.supermapUrls[9]);//区县文字图层
        let xiangZhenJie_textLayer = viewer.scene.layers.find(that.supermapUrls[10]);//乡镇文字图层
        let cun_textLayer = viewer.scene.layers.find(that.supermapUrls[11]);//村文字图层
        //关闭避让
        xianJie_textLayer.isOverlapDisplayed = true;
        xiangZhenJie_textLayer.isOverlapDisplayed = true;
        cun_textLayer.isOverlapDisplayed = true;
      });
    }, 2000);
  },
}
</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);
}

.map-tit{
  .sj-icon-btn{
    display: block;
    margin: 10px auto 15px auto;
    padding: 0px 16px;
    font-size: 10px;
    height: 1.7rem;
  }
}
</style>