GCSGUI/src/components/map/SceneViewer.vue

<!--
 * @Author: cbwu 504-wuchengbo@htsdfp.com
 * @Date: 2024-03-07 14:15:35
 * @LastEditors: cbwu
 * @LastEditTime: 2024-04-16 19:06:50
 * @Description:
-->
<template>
  <div id="cesium-viewer" ref="viewerDivRef"></div>
  <ProfileAnalysis ref="profileChart"></ProfileAnalysis>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from 'vue'
import {Viewer, Ion, CustomDataSource, Cartesian3} from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import {
  TDTLayerType,
  TDTProjectionType,
  getTDTProvider,
  getTDTTerrainProvider,
} from '@/utils/map/TDTProvider'
import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
import { flyToChina } from '@/utils/map/camera'
import CreatePolyline from '@/utils/map/draw/drawPolyline'
import ProfileAnalysis from "@/components/ProfileAnalysis.vue";
import MeasureDistance from "@/assets/js/cesium-map/measureDistance";

const viewerDivRef = ref<HTMLDivElement>()
let viewer: Viewer
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
// window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署

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

// 绑定地形剖面图弹窗
let profileChart = ref<InstanceType<typeof ProfileAnalysis> | null>(null)
let linePoints = ref<number>(-1)

onMounted(() => {
  //初始化
  viewer = initViewer(viewerDivRef.value as HTMLElement)
  // 性能优化
  perfViewer(viewer)
  // 定位到中国
  flyToChina(viewer)
  // 显示罗盘和比例尺
  showNavigator(viewer)

  //添加天地图影像
  viewer.imageryLayers.addImageryProvider(
    getTDTProvider(TDTLayerType.Img, TDTProjectionType.WebMercator),
  )
  //添加天地图影像注记
  viewer.imageryLayers.addImageryProvider(
    getTDTProvider(TDTLayerType.Cia, TDTProjectionType.WebMercator),
  )
  // 添加三维地形服务
  viewer.terrainProvider = getTDTTerrainProvider()
  // 标记点图层，存储所有地标点
  const markerLayer = new CustomDataSource('Marker')
  viewer.dataSources.add(markerLayer)

  // 挂载在window，供全局组件共享
  window.viewer = viewer

  window.measureViewer = new MeasureDistance(viewer);
  //绘制多边形
  // const drawPolyline = new CreatePolyline(viewer,false,true,{})
  // linePoints.value = drawPolyline.positions.length
  // drawPolyline.start()
  // profileChart.value?.openDia()
  //
  // 绘制地形剖面线
  // profileChart.value?.drawChart_TerrainProfile([0,1,2,3,4,5,6,7,8,9],
  //     [-70,800,300,400,23,232,435,243,234,343])
})


watch(linePoints, (newValue, OldValue): void => {
  console.log("数据变化了",linePoints.value, newValue, OldValue)
})

</script>

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