管道基础大数据平台系统开发-【前端】-新系統界面
surprise
2024-02-05 fb98e10c76d7e6c2d01f3a9f8c1b727f905cbdca
src/components/Screen/mapsdk.vue
@@ -6,6 +6,7 @@
<script>
let yunxuanLayer = null
import mapMenu from '../js/index.js'
export default {
  name: "",
  components: {},
@@ -14,119 +15,99 @@
  },
  mounted() {
    this.init3DMap()
    this.$bus.$on("changeProject", name => {
      if (!yunxuanLayer) {
        var urls = "https://tiles3.geovisearth.com/base/v1/ter"
        // 星图地球地形晕渲
        yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
          "星图地球地形晕渲",
          {
            url:
              urls +
              "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
          },
          "0",
          undefined,
          true,
          ""
        )
      }
      if (name.includes("管网")) {
        yunxuanLayer.item.show = true
      } else {
        yunxuanLayer.item.show = false
      }
    })
    // this.$bus.$on("changeProject", name => {
    //   if (!yunxuanLayer) {
    //     var urls = "https://tiles3.geovisearth.com/base/v1/ter"
    //     // 星图地球地形晕渲
    //     yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
    //       "星图地球地形晕渲",
    //       {
    //         url:
    //           urls +
    //           "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
    //       },
    //       "0",
    //       undefined,
    //       true,
    //       ""
    //     )
    //   }
    //   if (name == '全球项目') {
    //     yunxuanLayer.item.show = true
    //   } else {
    //     yunxuanLayer.item.show = false
    //   }
    // })
  },
  methods: {
    init3DMap() {
      //地图初始化
      // window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
      //   licenseServer: window.sceneConfig.licenseServer,
      // })
      window.sgworld = new SmartEarth.SGWorld(
        "Centermapdiv",
        SmartEarthRootUrl + "Workers/image/earth.jpg",
        function () {}
      )
      window.viewer = window.Viewer = window.sgworld._Viewer
      // Viewer.imageryLayers._layers[0].show = false
      // viewer.clock.shouldAnimate = true
      //每次旋转的弧度 越小越慢
      var angle = Cesium.Math.toRadians(Math.PI * 1)
      // 旋转次数 用来控制停止
      var rotate_num = 0
      function onTickCallback() {
        viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, angle)
        //以下用来控制 停止
        rotate_num++
        // 110 次旋转一周
        if (rotate_num == 1) {
          Viewer.camera.flyTo({
            destination: {
              x: -2395735.480669514,
              y: 35646557.30966785,
              z: 33320031.01620178,
            },
            orientation: {
              heading: 6.283185307179578,
              roll: 0,
              pitch: -1.5687480368906144,
            },
          })
        }
        if (rotate_num == 220) {
          Viewer.camera.flyTo({
            destination: {
              x: -4022999.313498903,
              y: 19214082.70976515,
              z: 13043510.373621361,
            },
            orientation: {
              heading: 6.283185307179577,
              roll: 0,
              pitch: -1.5643686104630592,
            },
          })
        }
        if (rotate_num === 330) {
          //结束旋转
          viewer.clock.onTick.removeEventListener(onTickCallback)
          //可以再接定位动画
          Viewer.camera.flyTo({
            destination: {
              x: -3919623.6069864673,
              y: 13752070.475126158,
              z: 8307291.863719194,
            },
            orientation: {
              heading: 6.283185307179582,
              roll: 0,
              pitch: -1.5707039123519846,
            },
          })
        }
    initData() {
      if (is_production) {
        Viewer.imageryLayers.removeAll();
      }
      // 利用时钟进行监听
      viewer.clock.onTick.addEventListener(onTickCallback)
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[0].url,
      // Viewer.imageryLayers._layers[0].show = false
      sgworld.Navigate.jumpTo({      //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(110, 32, 50000000)
      });
      setTimeout(() => {
        window.viewer.camera.flyTo({
          destination: new Cesium.Cartesian3.fromDegrees(110, 32, 20000000),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-90),
          }
        })
      )
      }, 1000);
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[1].url,
        })
      )
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[2].url,
        })
      )
      if (is_production) {
        var base_ulr = window.sceneConfig.baseUrl;
        if (base_ulr.indexOf('{host}') > -1) {
          base_ulr = base_ulr.replace("{host}", iisHost)
        }
        Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: base_ulr,
            maximumLevel: 5
          })
        );
        window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: base_ulr,
          })
        );
        var base_ulr_sl = window.sceneConfig.baseUrl_sl;
        if (base_ulr_sl.indexOf('{host}') > -1) {
          base_ulr_sl = base_ulr_sl.replace("{host}", iisHost)
        }
        window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: base_ulr_sl,
          })
        );
        Viewer.imageryLayers._layers[2].show = false
      } else {
        Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: gaoDeBaseUrl[0].url,
          })
        )
        // Viewer.imageryLayers.addImageryProvider(
        //   new Cesium.UrlTemplateImageryProvider({
        //     url: gaoDeBaseUrl[1].url,
        //   })
        // )
        // Viewer.imageryLayers.addImageryProvider(
        //   new Cesium.UrlTemplateImageryProvider({
        //     url: gaoDeBaseUrl[2].url,
        //   })
        // )
        Viewer.imageryLayers._layers[1].show = false
      }
      Viewer._enableInfoOrSelection = false
      //显示fps
@@ -138,14 +119,41 @@
      //开启深度检测
      sgworld.Analysis.depthTestAgainstTerrain(true)
      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer,
      })
      // Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
      //   url: demLayer,
      // })
      var option = {
        url: window.sceneConfig.SGUrl,
        layerName: window.sceneConfig.mptName,
        requestVertexNormals: true,
      };
      window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
      //改变天空颜色为黑色
      Viewer.scene.skyBox.show = false //关闭天空盒,否则会显示天空颜色
      //背景透明
      Viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0)
    },
    init3DMap() {
      //地图初始化
      // window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
      //   licenseServer: window.sceneConfig.licenseServer,
      // })
      // window.sgworld = new SmartEarth.SGWorld(
      //   "Centermapdiv",
      //   function () { }
      // )
      window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
        licenseServer: window.sceneConfig.licenseServer,
      });
      window.viewer = window.Viewer = window.sgworld._Viewer;
      var data = mapMenu.init();
      data.then((res) => {
        if (!res) {
          mapMenu.addGaoDeMap();
        }
        this.initData();
      })
    },
  },
}
@@ -157,6 +165,7 @@
  height: 100%;
  width: 100%;
}
#Centermapdiv {
  height: 100%;
  width: 100%;