|
|
<!--
|
|
|
* @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>
|