<template>
  <div class="wih100 ht100 cpt-cesium_layerBox">
    <div id="layer-container"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { User } from "../../api";
export default {
  data() {
    return {
      viewer: null,
      init_lng: 112.576667,
      init_lat: 23.175833,
      init_alt: 5000,
      imageryLayers: {
        night: null, // 夜景图
        satellite: null, // 卫星图
        text: null, // 地名标记
      },
    };
  },
  computed: {
    ...mapState([]),
    ...mapState(["mapMode"]),
  },
  watch: {
    mapMode(newVal) {
      switch (newVal) {
        case 0:
          this.imageryLayers.satellite.show = true;
          this.imageryLayers.night.show = false;
          // this.imageryLayers.text.show = true;
          break;

        case 1:
          this.imageryLayers.satellite.show = false;
          this.imageryLayers.night.show = true;
          // this.imageryLayers.text.show = false;
          break;
      }
    },
  },
  mounted() {
    if (!window.$mmc) {
      window.$mmc = {};
    }
    window.$mmc.viewer = {};
    // this.get_user_position()//获取用户位置
    this.init_viewer();
    this.bus_getPositions();
  },
  methods: {
    ...mapActions([]),
    selectMpa(item) {
      console.log(item, "item");
    },
    bus_getPositions() {
      this.$bus.$on("handlePositions", (e) => {
        this.init_lng = e[0];
        this.init_lat = e[1];
        this.init_alt = 300000;
        this.viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            this.init_lng,
            this.init_lat,
            this.init_alt
          ),
        });
      });
    },
    async init_viewer() {
      // 超图服务加密访问
      // Ap6qLhnKi1YT4ds90jxn6mftBG4tmLFbTH2Y79XRGMG4fophoB8axKlCj6IuQMW8dAXsyHAnmzrU-zF1tMuMpg..
      // Cesium.Credential.CREDENTIAL = new Cesium.Credential('r0G6d8tdvfgN_Aad1j28SGqj6ILgt1DNHpP9dK-FNVOVBPgcyaHiEs2z2qyv455bTHU8QaFTbt_Y_AdeAsPp-Q..');
      // 解决航线被三维模型遮盖
      const oldPolylineUpdate = Cesium.PolylineCollection.prototype.update;
      Cesium.PolylineCollection.prototype.update = function (frameState) {
        const oldMorphTime = frameState.morphTime;
        frameState.morphTime = 0.0;
        oldPolylineUpdate.call(this, frameState);
        frameState.morphTime = oldMorphTime;
      };
      const viewerOptions = {
        animation: false,
        shouldAnimate: true,
        homeButton: false,
        fullscreenButton: false,
        baseLayerPicker: false,
        geocoder: true,
        timeline: false,
        sceneModePicker: true,
        navigationHelpButton: false,
        infoBox: false,
        requestRenderMode: true,
        scene3DOnly: false,
        sceneMode: 3,
        fullscreenElement: document.body,
        selectionIndicator: false,
      };

      window.$mmc.viewer = this.viewer = new Cesium.Viewer(
        `layer-container`,
        viewerOptions
      );
      this.imageryLayers.satellite = this.viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
          maximumLevel: 18,
        })
      );
      this.imageryLayers.night = this.viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          maximumLevel: 16,
        })
      );
      this.imageryLayers.night.show = false;
      this.viewer.scene.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          this.init_lng,
          this.init_lat,
          this.init_alt
        ),
      });

      // 加载三维倾斜
      window._3d = [];
      /* const token =
        'r0G6d8tdvfgN_Aad1j28SGqj6ILgt1DNHpP9dK-FNVOVBPgcyaHiEs2z2qyv455bTHU8QaFTbt_Y_AdeAsPp-Q..'; */
      window.___s3m.forEach(async (item) => {
        const obj = await this.viewer.scene.addS3MTilesLayerByScp(
          `https://ct.mmcuav.cn:8443/iserver/services/${item}/rest/realspace/datas/Config/config`,
          {
            name: item,
            // cullEnabled: false
          }
        );
        window._3d.push(obj);
        if (item === "3D-ZQ-JLH") {
          // 肇庆九龙湖的模型需要修改海拔, 使其贴地
          obj.style3D.bottomAltitude = -20;
        }
      });

      // 二维影像缓存加载方式
      window._2d = [];
      ["3D-ZQ-DH", "3D-local3DCache-s3mb"].forEach((item) => {
        this.viewer.scene
          .open(
            `https://ct.mmcuav.cn:8443/iserver/services/${item}/rest/realspace`,
            undefined,
            {
              subdomains: [""], // 子域
              autoSetView: false, // 不自动定位
            }
          )
          .then((obj) => {
            window._2d.push(obj);
          });
      });

      // 关闭地图深度检测
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // 飞向指定的经纬度
      window.$mmc.flyTo = function (lng, lat) {
        this.viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 1000),
        });
      };
    },
    add_polyline(entities, data) {
      return entities.add({
        id: data.entity_id,
        parent: data.parent || null,
        polyline: {
          positions: new Cesium.CallbackProperty(() => {
            return data.positions;
          }, false),
          width: 5,
          material: Cesium.Color.fromCssColorString("#6DD400"),
          show: true,
          ...(data.options ? data.options : {}),
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cesium_layerBox {
}

.cpt-cesium_layer_1 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;

  // #layer-container_1 {
  //   position: absolute;
  //   left: 0;
  //   bottom: 0;
  //   top: 0;
  //   right: 0;
  //   width: 100%;
  //   height: 100%;
  //   box-sizing: border-box;
  // }
}

.videoWallMapStyle {
  position: fixed !important;
  left: 12px !important;
  top: 63px !important;
  bottom: 0 !important;
  width: 415px !important;
  height: 234px !important;
  box-sizing: border-box !important;
  z-index: 1;
}

.right_33 {
  right: 33%;
}
</style>
