<template>
  <div class="app-container home">
    <!-- Cesium地图容器 -->
    <div id="cesiumContainer" class="cesium-container"></div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.9",
      // Cesium查看器实例
      viewer: null,
      tileset: null,
    };
  },
  mounted() {
    // 组件挂载后初始化地图
    this.initCesium();
  },
  beforeDestroy() {
    // 组件销毁前清理地图资源
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    /**
     * 初始化Cesium地图
     */
    async initCesium() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDAxZGFhYy02MjJlLTRiNzktODNhZi00N2VjZGY0NTk4YmIiLCJpZCI6Mjc0NDAxLCJpYXQiOjE3NjMzNDYwNTR9.ZQW2DZ4KaMGbHuwrtIbyI6EdSSvgMJUHmmD74eZW7PQ";
      try {
        // 创建Cesium Viewer实例
        this.viewer = new Cesium.Viewer("cesiumContainer", {
          // 设置地图提供者，这里使用默认的Bing Maps
          imageryProvider: new Cesium.BingMapsImageryProvider({
            url: "https://dev.virtualearth.net",
            key: "AgcbDCAOb9zMfquaT4Z-MdHfx--9wUNrLRiiS7rIElFx8f-4lLulxZ0QnhqX5Lm6",
            mapStyle: Cesium.BingMapsStyle.AERIAL,
          }),
          // 配置是否显示各种控件
          animation: false, // 动画控件
          baseLayerPicker: true, // 底图选择器
          fullscreenButton: true, // 全屏按钮
          geocoder: true, // 地址搜索
          homeButton: true, // 主页按钮
          infoBox: true, // 信息框
          sceneModePicker: true, // 场景模式选择器
          selectionIndicator: true, // 选择指示器
          timeline: false, // 时间线
          navigationHelpButton: false, // 导航帮助按钮
          navigationInstructionsInitiallyVisible: false,
          // 设置初始视图位置（中国区域）
          center: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000),
        });

        // 设置相机视图
        // this.viewer.camera.setView({
        //   destination: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000), // 经度、纬度、高度
        //   orientation: {
        //     heading: Cesium.Math.toRadians(0.0), // 方向
        //     pitch: Cesium.Math.toRadians(-90.0), // 倾斜角度
        //     roll: 0.0, // 翻滚角度
        //   },
        // });

        this.viewer.scene.camera.setView({
          // 视角-环翠
          duration: 1,
          destination: {
            x: -2739843.563038797,
            y: 4357442.794747324,
            z: 3880768.3292693933,
          },
          orientation: {
            heading: 6.037000745578596,
            pitch: -1.2499586064720978,
            roll: 0.000005306352659495417,
          },
        });

        // 隐藏Cesium logo
        this.viewer._cesiumWidget._creditContainer.style.display = "none";

        // var tilesetpath =
        //   "http://localhost:8080/Apps/assets/media/rushanruibo/tileset.json";

        const VUE_APP_GIS =
          "http://192.168.2.11:8080/Apps/assets/media/gaoquyingji";
        try {
          const tileset = await Cesium.Cesium3DTileset.fromUrl(
            VUE_APP_GIS + "/tiles/01_guanwei/tileset.json"
          );
          this.viewer.scene.primitives.add(tileset);

          console.log("倾斜摄影模型加载成功", tileset);

          if (tileset) {
            this.tileset = tileset;
            this.locateToTileset();
          }

          // tileset.allTilesLoaded.addEventListener(() => {
          //   this.tileset = tileset;

          //   console.log("All tiles are loaded");
          //   this.locateToTileset();
          // });
          //   // // 监听模型加载完成事件
          //   tileset.readyPromise
          //     .then(() => {
          //       this.locateToTileset();
          //     })
          //     .catch((error) => {
          //       console.error("定位到模型失败:", error);
          //     });

          console.log("tileset", this.tileset);
        } catch (error) {
          console.error(`加载倾斜摄影模型失败: ${error}`);
        }

        console.log("Cesium地图初始化成功");
      } catch (error) {
        console.error("Cesium地图初始化失败:", error);
      }
    },
    /**
     * 获取倾斜摄影模型的经纬度并将摄像机视角转向模型上方
     */
    locateToTileset() {
      if (!this.tileset || !this.viewer) {
        console.error("模型或视图未准备就绪");
        return;
      }

      try {
        // 获取模型的边界球
        const boundingSphere = this.tileset.boundingSphere;

        if (!boundingSphere) {
          console.error("无法获取模型边界");
          return;
        }

        // 获取模型中心点的笛卡尔坐标
        const center = boundingSphere.center;

        // 将笛卡尔坐标转换为经纬度坐标
        const cartographic = Cesium.Cartographic.fromCartesian(center);
        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
        const height = cartographic.height;

        console.log("倾斜摄影模型中心点经纬度:", {
          longitude: longitude,
          latitude: latitude,
          height: height,
        });

        // 计算合适的观察距离 - 基于模型半径的倍数
        const distance = boundingSphere.radius * 2.5; // 可以根据需要调整倍数

        // 设置相机位置在模型上方
        const cameraPosition = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          height + distance // 相机高度为模型最高点加上观察距离
        );

        // 计算相机看向模型中心的方向
        const heading = Cesium.Math.toRadians(0); // 方向角
        const pitch = Cesium.Math.toRadians(-60); // 俯仰角 - 负数表示向下看
        const roll = Cesium.Math.toRadians(0); // 翻滚角

        // 使用flyTo方法平滑过渡到目标位置
        this.viewer.camera.flyTo({
          destination: cameraPosition,
          orientation: {
            heading: heading,
            pitch: pitch,
            roll: roll,
          },
          duration: 2, // 过渡时间2秒
          complete: () => {
            console.log("相机已成功定位到模型上方");
          },
        });

        // 或者使用lookAt方法直接看向模型中心
        // this.viewer.camera.lookAt(
        //   center,
        //   new Cesium.HeadingPitchRange(
        //     heading,
        //     pitch,
        //     distance
        //   )
        // );
      } catch (error) {
        console.error("定位到模型上方失败:", error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  // Cesium容器样式
  .cesium-container {
    width: 87vw;
    height: 87vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
</style>