<template>
  <div ref="cesiumContainer" class="cesium-fullscreen"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

const cesiumContainer = ref(null)
let viewer = null

onMounted(() => {
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    terrain: Cesium.Terrain.fromWorldTerrain(),
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
  })

  viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
  viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: 'http://localhost:8010/tiles/{z}/{x}/{y}.png',
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 15,
      credit: 'Natural Earth - HYP_HR_SR_OB_DR',
    })
  )

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-74.30054, 40.61087, 12000000),
  })
})

onBeforeUnmount(() => {
  viewer?.destroy()
})
</script>

<style scoped>
.cesium-fullscreen {
  width: 100vw;
  height: 100vh;
}
</style>
