<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 handler: Cesium.ScreenSpaceEventHandler
let osmBuildingsTimeset: Cesium.Cesium3DTileset

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

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

  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      -122.34683683831891,
      47.60533384634795,
      205.5576291312336
    ),
    orientation: {
      heading: Cesium.Math.toRadians(10),
      pitch: Cesium.Math.toRadians(-10)
    }
  })

  osmBuildingsTimeset.style = new Cesium.Cesium3DTileStyle({
    defines: {
      name: "${feature['name']}"
    },
    color: {
      // 根据要素name属性，Market Place North设置成红色，World Trade Center East设置成绿色
      conditions: [
        ['${name} === "Market Place North"', "color('red')"],
        ['${name} === "World Trade Center East"', "color('green')"],
        ['true', "color('white')"]
      ]
    },
    // 只显示要素name属性是Market Place North或World Trade Center East的要素
    show: '${name} === "Market Place North" || ${name} === "World Trade Center East"'
  })

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