实现基本功能
parent
462ba303b6
commit
5e1601c8ea
|
|
@ -1,10 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<vc-viewer ref="vcViewer" class="vc-viewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady">
|
<vc-viewer class="vc-viewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady" @trackedEntityChanged="onTrackedEntityChanged">
|
||||||
<vc-layer-imagery>
|
<vc-layer-imagery>
|
||||||
<vc-provider-imagery-tianditu mapStyle="img_c" :token="token" />
|
<vc-provider-imagery-singletile
|
||||||
</vc-layer-imagery>
|
:url="earth"
|
||||||
<vc-layer-imagery>
|
></vc-provider-imagery-singletile>
|
||||||
<vc-provider-imagery-tianditu mapStyle="cva_c" :token="token" />
|
|
||||||
</vc-layer-imagery>
|
</vc-layer-imagery>
|
||||||
|
|
||||||
<vc-navigation :offset="[10, 40]" :position="'top-left'" :printOpts="false" :locationOpts="false" :otherOpts="false" />
|
<vc-navigation :offset="[10, 40]" :position="'top-left'" :printOpts="false" :locationOpts="false" :otherOpts="false" />
|
||||||
|
|
@ -13,87 +12,80 @@
|
||||||
</vc-viewer>
|
</vc-viewer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { ref, defineComponent } from 'vue'
|
import { ref, computed, watch } from 'vue'
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
import { VcViewer, VcLayerImagery, VcProviderImageryTianditu, VcNavigation, VcDatasourceCzml } from 'vue-cesium'
|
import { VcViewer, VcLayerImagery, VcProviderImageryTianditu, VcNavigation, VcDatasourceCzml } from 'vue-cesium'
|
||||||
import 'vue-cesium/dist/index.css'
|
// import 'vue-cesium/dist/index.css'
|
||||||
export default defineComponent({
|
import earth from '../assets/earth.jpg'
|
||||||
setup: () => {
|
|
||||||
const vcViewer = ref(null)
|
|
||||||
|
|
||||||
const token = '436ce7e50d27eede2f2929307e6b33c0'
|
|
||||||
|
|
||||||
const czml = ref('')
|
const store = useStore()
|
||||||
const loadSatelliteOrbit = ss => czml.value = './CZML/' + ss + '.czml'
|
const czml = computed(() => './CZML/' + store.state.satelliteSystem.name + '.czml')
|
||||||
|
|
||||||
const onViewerReady = ({ viewer }) => {
|
let entities = null
|
||||||
viewer.scene.debugShowFramesPerSecond = false
|
const getEntityById = id => {
|
||||||
// 移除默认的图层，提升加载速度
|
if (!entities) return null
|
||||||
const { imageryLayers } = viewer
|
|
||||||
imageryLayers.remove(imageryLayers.get(0))
|
|
||||||
|
|
||||||
// 限定缩放大小
|
return entities.find(entity => entity.id === id)
|
||||||
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000000 // 相机高度的最大值设定为 50000000 米
|
}
|
||||||
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10000000 // 相机高度的最小值设定为 10000000 米
|
const onDataSourceReady = ({ viewer, cesiumObject }) => {
|
||||||
|
viewer.flyTo(cesiumObject)
|
||||||
// 修改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'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
let entities = null
|
entities = cesiumObject.entities.values
|
||||||
const store = useStore()
|
|
||||||
const onDataSourceReady = ({ viewer, cesiumObject }) => {
|
|
||||||
viewer.flyTo(cesiumObject)
|
|
||||||
|
|
||||||
entities = cesiumObject.entities.values
|
// 显示卫星导航系统的科普信息
|
||||||
// 显示卫星导航系统的科普信息
|
viewer.selectedEntity = entities.find(entity => entity.id.startsWith('Constellation'))
|
||||||
viewer.selectedEntity = entities.find(entity => entity.id.startsWith('Constellation'))
|
|
||||||
// viewer.selectedEntity = entities[entities.length - 1]
|
|
||||||
|
|
||||||
// 将卫星状态信息存储到store中
|
// 将卫星状态信息存储到store中
|
||||||
const satellites = entities.filter(entity => entity.id.startsWith('Satellite'))
|
const satellites = entities.filter(entity => entity.id.startsWith('Satellite'))
|
||||||
const satellite_state_arr = satellites.map(({ id, show }) => { return { id, show } })
|
const satellite_state_arr = satellites.map(({ id, show }) => { return { id, show } })
|
||||||
store.commit('satellites/set', satellite_state_arr)
|
store.commit('satellites/set', satellite_state_arr)
|
||||||
}
|
}
|
||||||
// 显示/隐藏卫星
|
// 显示/隐藏卫星
|
||||||
store.subscribe(({ type, payload }) => {
|
store.subscribe(({ type, payload }) => {
|
||||||
if (type === 'satellites/toggleShow') {
|
if (type === 'satellites/toggleShow') {
|
||||||
const entity = getEntityById(payload)
|
const entity = getEntityById(payload)
|
||||||
if (!entity) return
|
if (!entity) return
|
||||||
|
|
||||||
entity.show = !entity.show
|
entity.show = !entity.show
|
||||||
}
|
|
||||||
})
|
|
||||||
// 跟踪卫星
|
|
||||||
const trackSatellite = id => {
|
|
||||||
const entity = getEntityById(id)
|
|
||||||
if (!entity) return
|
|
||||||
|
|
||||||
const viewer = vcViewer.value.getCesiumObject()
|
|
||||||
viewer.selectedEntity = entity
|
|
||||||
viewer.trackedEntity = entity
|
|
||||||
}
|
|
||||||
const getEntityById = id => {
|
|
||||||
if (!entities) return null
|
|
||||||
|
|
||||||
return entities.find(entity => entity.id === id)
|
|
||||||
}
|
|
||||||
|
|
||||||
return { vcViewer, token, czml, loadSatelliteOrbit, trackSatellite, onViewerReady, onDataSourceReady }
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
VcViewer, VcLayerImagery, VcProviderImageryTianditu, VcNavigation, VcDatasourceCzml
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
})
|
||||||
|
|
||||||
|
const onTrackedEntityChanged = entity => {
|
||||||
|
console.log(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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue