99 lines
3.2 KiB
Vue
99 lines
3.2 KiB
Vue
<template>
|
|
<vc-viewer class="vc-viewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady" @trackedEntityChanged="onTrackedEntityChanged">
|
|
<vc-layer-imagery>
|
|
<vc-provider-imagery-singletile
|
|
:url="earth"
|
|
></vc-provider-imagery-singletile>
|
|
</vc-layer-imagery>
|
|
|
|
<vc-navigation :offset="[10, 40]" :position="'top-left'" :printOpts="false" :locationOpts="false" :otherOpts="false" />
|
|
|
|
<vc-datasource-czml v-if="czml" :czml="czml" @ready="onDataSourceReady" />
|
|
</vc-viewer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed, watch } from 'vue'
|
|
import { useStore } from 'vuex'
|
|
import { VcViewer, VcLayerImagery, VcProviderImageryTianditu, VcNavigation, VcDatasourceCzml } from 'vue-cesium'
|
|
// import 'vue-cesium/dist/index.css'
|
|
import earth from '../assets/earth.jpg'
|
|
|
|
import entity from '../api/entity'
|
|
|
|
const store = useStore()
|
|
const czml = computed(() => './CZML/' + store.state.satelliteSystem.name + '.czml')
|
|
|
|
let entities = null
|
|
const getEntityById = id => {
|
|
if (!entities) return null
|
|
|
|
return entities.find(entity => entity.id === id)
|
|
}
|
|
const onDataSourceReady = ({ viewer, cesiumObject }) => {
|
|
viewer.flyTo(cesiumObject)
|
|
entity.load(cesiumObject.entities.values)
|
|
|
|
// 显示卫星导航系统的科普信息
|
|
viewer.selectedEntity = entity.find('Constellation')
|
|
}
|
|
|
|
let vcViewerInstance = null
|
|
// const trackedSatelliteId = computed(() => store.state.trackedSatellite.id)
|
|
// watch(trackedSatelliteId, (value) => {
|
|
// const entity = getEntityById(value)
|
|
|
|
// if (!entity || !vcViewerInstance) return
|
|
|
|
// vcViewerInstance.selectedEntity = entity
|
|
// vcViewerInstance.trackedEntity = entity
|
|
// })
|
|
|
|
|
|
// 显示/隐藏卫星
|
|
store.subscribe(({ type, payload }) => {
|
|
if (type === 'satellites/toggleShow') {
|
|
const satellite = entity.get(payload)
|
|
if (!satellite) return
|
|
|
|
satellite.show = !satellite.show
|
|
}
|
|
|
|
if (type === 'satellites/track') {
|
|
const satellite = entity.get(payload)
|
|
if (!satellite || !vcViewerInstance) return
|
|
|
|
vcViewerInstance.selectedEntity = satellite
|
|
vcViewerInstance.trackedEntity = satellite
|
|
}
|
|
})
|
|
const onTrackedEntityChanged = entity => {
|
|
if (!entity) store.commit('trackedSatellite/set', null)
|
|
}
|
|
|
|
const onViewerReady = ({ viewer }) => {
|
|
vcViewerInstance = viewer
|
|
|
|
viewer.scene.debugShowFramesPerSecond = false
|
|
|
|
// 限定缩放大小
|
|
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10000000 // 相机高度的最小值设定为 10000000 米
|
|
|
|
// 修改infobox的样式
|
|
const infoBox = viewer.infoBox.frame;
|
|
infoBox.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms')
|
|
infoBox.setAttribute('src', '') //必须设置src为空 否则不会生效
|
|
infoBox.addEventListener('load', function () {
|
|
const infoBoxDescriptionElement = infoBox.contentWindow.document.getElementsByClassName('cesium-infoBox-description')[0]
|
|
infoBoxDescriptionElement.style.fontSize = 'larger'
|
|
infoBoxDescriptionElement.style.paddingLeft = '20px'
|
|
infoBoxDescriptionElement.style.paddingRight = '20px'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.vc-viewer .cesium-viewer .cesium-viewer-animationContainer svg > g > g text:not(:last-of-type) {
|
|
display: none;
|
|
}
|
|
</style> |