<template>
  <div id="Earth" />
</template>

<script setup >
import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from 'vue'

import Earth from './Earth.js'
const emit = defineEmits([''])
// const props = defineProps({
//   propData: {
//     type: String,
//     default: ''
//   },
// })
// const { } = toRefs(props);

function initEarth() {
  const earth = new Earth('Earth')
  window.earth = earth
  window.viewer = earth.viewer
  window.scene = earth.scene
  // earth.layerManager.add3DTilesetByUrl('https://gisdata.t-aaron.com/b3dm/park/tileset.json')

  // 注册点击事件
  const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas) // event事件处理程序
  handler.setInputAction((e) => {
    const cartesian = viewer.camera.pickEllipsoid(e.position)
    if (!cartesian) return
    const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
    const lng = Cesium.Math.toDegrees(cartographic.longitude) // 经度
    const lat = Cesium.Math.toDegrees(cartographic.latitude) // 纬度
    const alt = cartographic.height // 高度，椭球面height永远等于0
    const coordinate = {
      longitude: Number(lng.toFixed(6)),
      latitude: Number(lat.toFixed(6)),
      altitude: Number(alt.toFixed(2)),
      heading: viewer.scene.camera.heading,
      pitch: viewer.scene.camera.pitch
    }
    console.log(coordinate)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
onMounted(() => {
  initEarth()
})

</script>
<style lang="less" scoped>
</style>
