<template>
  <div id="cesiumContainer" class="all"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import {change} from '/src/js/scale.js'

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
  const viewer = new Cesium.Viewer("cesiumContainer", {
  })

  viewer.camera.changed.addEventListener(() => {
    let alt = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
    let divisionCount = alt > 8000 ? 36 : 360;
    viewer.entities.removeAll();
    change(viewer,divisionCount)
  
  })


  









})



</script>



<style>
.all {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%
}

.cesium-viewer-bottom {
  display: none;
}

button {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 88;
}
</style>
