<template>
  <div id="cesium-viewer" ref="viewerDivRef"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import {
  TDTLayerType,
  TDTProjectionType,
  getTDTProvider,
  getTDTTerrainProvider,
} from '@/utils/map/TDTProvider'
const viewerDivRef = ref<HTMLDivElement>()
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
// window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E'

//离线地球底图
const earth_native = Cesium.TileMapServiceImageryProvider.fromUrl(
  // 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
  Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
)
onMounted(async () => {
  // 修改相机的默认矩形范围
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    75.0, // 西经
    0.0, // 南纬
    140.0, // 东经
    60.0, // 北纬
  )
  //未联网状态加载默认本地底图，保证地球有底图显示
  let viewer = new Cesium.Viewer(viewerDivRef.value as HTMLElement, {
    infoBox: false, //是否显示点击要素之后显示的信息
    homeButton: false, //是否显示Home按钮
    navigationHelpButton: false, //是否显示帮助信息控件
    timeline: false, //是否显示时间线控件
    animation: false, //是否显示动画控件
    sceneModePicker: true, //是否显示投影方式控件
    sceneMode: Cesium.SceneMode.SCENE3D, //设置场景模式，3D球体
    // terrain: Cesium.Terrain.fromWorldTerrain(),
    baseLayerPicker: false, //是否显示图层选择控件
    requestRenderMode: true, //启用请求渲染模式
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    fullscreenButton: false, //右下角 全屏控件
    orderIndependentTranslucency: false,
    contextOptions: { webgl: { alpha: true } },
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(earth_native, {}),
  })
  //去除cesium logo，隐藏版本信息
  const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
  creditContainer.style.display = 'none'
  // viewer.scene.debugShowFramesPerSecond = true  //开启帧率调试
  // 限制相机缩放
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000 //相机高度的最大值
  // 抗锯齿
  // 是否支持图像渲染像素化处理
  // if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
  //   viewer.resolutionScale = window.devicePixelRatio
  // }
  viewer.scene.postProcessStages.fxaa.enabled = true
  // 水雾特效
  viewer.scene.globe.showGroundAtmosphere = true
  // 关闭太阳，月亮，天空盒，雾等相关特效
  viewer.scene.moon.show = false
  viewer.scene.fog.enabled = false
  viewer.scene.sun.show = false
  viewer.scene.skyBox.show = false
  // 优化加载WMTS图层速度
  Cesium.RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量
  Cesium.RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流

  //添加天地图影像
  viewer.imageryLayers.addImageryProvider(
    getTDTProvider(TDTLayerType.Img, TDTProjectionType.WebMercator),
  )
  //添加天地图影像注记
  viewer.imageryLayers.addImageryProvider(
    getTDTProvider(TDTLayerType.Cia, TDTProjectionType.WebMercator),
  )
  // 添加三维地形服务
  viewer.terrainProvider = getTDTTerrainProvider()
  // 将三维球定位到中国
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 12550000),
    orientation: {
      heading: Cesium.Math.toRadians(348.4202942851978),
      pitch: Cesium.Math.toRadians(-89.74026687972041),
      roll: Cesium.Math.toRadians(0),
    },
    complete: function callback() {
      // 定位完成之后的回调函数
    },
  })
})
</script>

<style scoped>
#cesium-viewer {
  width: 100%;
  height: 100%;
}
</style>