<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' import { initViewer, perfViewer } from '@/utils/map/sceneViewer' import { flyToChina } from '@/utils/map/camera' const viewerDivRef = ref<HTMLDivElement>() let viewer: Cesium.Viewer window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/' // window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E' // 修改相机的默认矩形范围 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 75.0, // 西经 0.0, // 南纬 140.0, // 东经 60.0, // 北纬 ) onMounted(() => { //初始化 viewer = initViewer(viewerDivRef.value as HTMLElement) // 性能优化 perfViewer(viewer) // 定位到中国 flyToChina(viewer) //添加天地图影像 viewer.imageryLayers.addImageryProvider( getTDTProvider(TDTLayerType.Img, TDTProjectionType.WebMercator), ) //添加天地图影像注记 viewer.imageryLayers.addImageryProvider( getTDTProvider(TDTLayerType.Cia, TDTProjectionType.WebMercator), ) // 添加三维地形服务 viewer.terrainProvider = getTDTTerrainProvider() }) </script> <style scoped> #cesium-viewer { width: 100%; height: 100%; } </style>