import { useState, useMemo } from 'react'
import MapCom from '../common/MapCom'
import { Viewer } from 'cesium'

export default function App(props: { id: string }) {
  const [viewer, setViewer] = useState<Viewer>()
  const options = useMemo<ViewerOptions>(
    () => ({
      terrain: true,
      debugShowFramesPerSecond: false,
    }),
    [],
  )

  return (
    <div>
      <MapCom id={props.id} setViewer={setViewer} options={options} />
    </div>
  )
}

<template>
  <div class="load_service_container">
    <MapCom @mapInit="initMap" :options="options" />
  </div>
</template>
<script setup lang='ts'>
import * as Cesium from 'cesium'
import MapCom from '~/components/common/MapCom.vue'
import { ref } from 'vue'
let viewer: Cesium.Viewer
const options = ref({
  terrain: true,
  debugShowFramesPerSecond: false,
})
const initMap = async (viewer_: Cesium.Viewer) => {
  // const res = await fetch('https://slhyyzt.slt.zj.gov.cn/adaptor/lght/sdem')
  // const data = await res.json()
  // console.log(data)
  // Cesium.CesiumTerrainProvider.fromUrl('/wenzhou_terrain')
  viewer = viewer_
}
</script>
<style scoped></style>