<template>
  <div class="container" id="cesiumContainer"></div>
</template>
<script setup lang="ts">
import '../utils/NoNeed'
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

window.Cesium = Cesium

let viewer: Cesium.Viewer
let osmBuildingsTimeset: Cesium.Cesium3DTileset

onMounted(async () => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    terrain: Cesium.Terrain.fromWorldTerrain()
  })

  // 设置建筑物和地形纵向高度加大的倍数
  viewer.scene.verticalExaggeration = 4

  osmBuildingsTimeset = await Cesium.createOsmBuildingsAsync()
  viewer.scene.primitives.add(osmBuildingsTimeset)

  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      -122.33918530703176,
      47.562833634604374,
      880.9578420266171
    ),
    orientation: {
      heading: Cesium.Math.toRadians(10),
      pitch: Cesium.Math.toRadians(-10)
    }
  })

  window.viewer = viewer
})
</script>
<style lang="less" scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>