real3d-portalsite/src/components/Viewer/smViewer.vue

<template>
  
  <div id="cesiumContainer" class="cockpitNew" :class="isbig?'cesiumbig':''" ref="viewer">
    <i class="cesiumbtn" :class="isbig?'el-icon-aim':'el-icon-rank'" :title="isbig?'缩小':'放大'" @click="viewerChange"></i> 
    <!-- 工具选择组件 -->
    <!-- <tool-bar></tool-bar>
    <compass></compass>
    <china-epidemic-map></china-epidemic-map>
    <world-epidemic-map></world-epidemic-map> -->
  </div>
</template>

<script>
import Config from "@/common/js/webServeConfig.js";
export default {
  name: "sm-viewer",
  props: {
    combination: {
      //组合接口
      type: Boolean,
    },
    sceneUrl: {
      //场景接口
      type: String,
    },
    s3mScps: {
      //s3m图层接口
      type: Array,
    },
    collapsed: {
      //是否折叠
      type: Boolean,
    },
  },
  data() {
    return {
      sharedState: store.state,
      isbig: false,
    };
  },
  computed: {
    isInitViewer: function () {
      return this.sharedState.isInitViewer;
    },
  },
  methods: {
    init() {
      //初始化viewer
      if (window.viewer) {
        return;
      }
      var obj = [6378137.0, 6378137.0, 6356752.3142451793];
      Cesium.Ellipsoid.WGS84 = Object.freeze(
        new Cesium.Ellipsoid(obj[0], obj[1], obj[2])
      );
      let viewer;
      let isPCBroswer = (window.isPCBroswer =
        Cesium.FeatureDetection.isPCBroswer());
      if (isPCBroswer) {
        viewer = new Cesium.Viewer("cesiumContainer", {
          imageryProvider: new Cesium.TileMapServiceImageryProvider({
            url: Cesium.buildModuleUrl(
              "/static/Cesium/Assets/Textures/NaturalEarthII"
            ),
          }),
          selectionIndicator: false,
          timeline: false,
          baseLayerPicker: false,
          homeButton: false,
          //shadows: true,
          infoBox: false,
          geocoder: false,
          // skyBox: false, // 关闭天空盒会一同关闭太阳，场景会变暗
          navigation: false,
          contextOptions: {
            requestWebgl2: true,
          },

        });

        // viewer.scene.globe.enableLighting = true;
        // document.getElementsByClassName(
        //   "cesium-viewer-timelineContainer"
        // )[0].style.visibility = "hidden"; //隐藏时间线控件
      } else {
        viewer = new Cesium.Viewer("cesiumContainer", {
          selectionIndicator: false,
          infoBox: false,
          imageryProvider: new Cesium.TileMapServiceImageryProvider({
            url: Cesium.buildModuleUrl(
              "/static/Cesium/Assets/Textures/NaturalEarthII"
            ),
          }),
          homeButton: false,
          skyBox: true,
          navigation: false,
          contextOptions: {
            requestWebgl2: true,
          },
        });
        let scene = viewer.scene;
        if (Cesium.defined(scene.sun)) {
          scene.globe.enableLighting = false;
        }
        if (Cesium.defined(scene.moon)) {
          scene.moon.show = false;
        }
        document.documentElement.style.height = window.innerHeight + "px";
        document.addEventListener(
          "touchmove",
          function (e) {
            e.preventDefault();
          },
          false
        );
        store.setCompass(false); //关闭罗盘等
      }
      viewer.scene.lightSource.ambientLightColor = new Cesium.Color(
        0.65,
        0.65,
        0.65,
        1
      );
      // viewer.scene.globe.enableLighting = true;

      if (window.baseImgLayer) {
        viewer.imageryLayers.addImageryProvider(
          new Cesium.SuperMapImageryProvider({
            url: window.baseImgLayer,
          })
        );
      }
      viewer.scene.fog.enabled = false;
      viewer.scene.debugShowFramesPerSecond = false;
      window.viewer = viewer;
      window.scene = viewer.scene;
      let widget = viewer.cesiumWidget;
      // iEarth进行初始化设置
      viewer.scene.globe.depthTestAgainstTerrain = true;
      viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 没有影像图层时地球的底色
      if (viewer.geocoder) {
        // 请开发者自行到supermap online官网（http://www.supermapol.com/）申请key
        viewer.geocoder.viewModel.geoKey = "fvV2osxwuZWlY0wJb8FEb2i5";
        document.querySelector(".cesium-geocoder-input").placeholder =
          Resource.searchPlaceHolder;
      }
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          window.mapview[0],
          window.mapview[1],
          window.mapview[2]
        ), //海南经纬度
        orientation: {
          heading: 0,
          pitch: -0.7672,
          roll: 0,
        },
        duration: 0,
        complete: function () {
          common.initHandler("Polygon"); //初始化全局常用的画面的drawhandler
          store.setToolBarShow(true); //显示工具栏
          document.getElementById("loadingbar").remove(); //移除加载动画
          // viewer.camera.flyTo({
          //   destination: new Cesium.Cartesian3.fromDegrees(
          //     110.60396458865515,
          //     34.54408834959379,
          //     30644793.325518917
          //   ),
          //   duration: 5,
          //   complete: function () {
          //     common.initHandler("Polygon"); //初始化全局常用的画面的drawhandler
          //     store.setToolBarShow(true); //显示工具栏
          //   },
          // });
          // setTimeout(() => {
          //   document.getElementById("loadingbar").remove(); //移除加载动画
          // }, 1000);
        },
      });
      store.setisInitViewer(true); //初始化viewer标志
    },
    viewerChange(){
      this.isbig = !this.isbig
      this.$emit("viewerChange",this.isbig)
    }

  },
  mounted() {
    this.init();

    // 临时加载影像和地形，方便测试开发

    // viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
    //   url: URL_CONFIG.STK,
    //   requestWaterMask: true,
    //   requestVertexNormals: true,
    //   isSct: false
    // });

    // const terrainP = new Cesium.ArcGISTiledElevationTerrainProvider({
    //   url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
    // });
    // viewer.terrainProvider = terrainP;

    // viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
    //   url: 'https://dev.virtualearth.net',
    //   mapStyle: Cesium.BingMapsStyle.AERIAL,
    //   key: URL_CONFIG.BING_MAP_KEY
    // }));
    // setTimeout(() => {
    //   viewer.scene.camera.setView({
    //     destination: Cesium.Cartesian3.fromDegrees(88.3648, 29.0946, 90000),
    //     orientation: {
    //       heading: 6.10547067016156,
    //       pitch: -0.8475077031996778,
    //       roll: 6.2831853016686185
    //     }
    //   });
    // }, 1000);
  },
};
</script>
<style lang="scss">
@import "smViewer";

</style>