<template><div><el-dialog draggable destroy-on-close v-if="changeVisibilityState" :modal="false" v-model="changeVisibilityState"close-icon="" title="通视分析" width="20%" :before-close="handleClose" @opened="getIntervisOpen()":close-on-click-modal="false"><div class="el-h-line"><p class="p">观察者信息</p><el-row :gutter="10"><el-col :span="6"><p class="font-big">经度</p></el-col><el-col :span="18"><div class="slider-demo-block"><el-input v-model="longitude" placeholder="显示经度" :disabled="true" /></div></el-col></el-row></div><div class="el-h-line"><el-row :gutter="10"><el-col :span="6"><p class="font-big">纬度</p></el-col><el-col :span="18"><div class="slider-demo-block"><el-input v-model="latitude" placeholder="显示纬度" :disabled="true" /></div></el-col></el-row></div><div class="el-h-line"><el-row :gutter="10"><el-col :span="6"><p class="font-big">高程</p></el-col><el-col :span="18"><div class="slider-demo-block"><el-input v-model="height" placeholder="显示高程" :disabled="true" /></div></el-col></el-row></div><!--可见颜色--><div class="el-h-line"><el-row :gutter="10"><el-col :span="6"><p class="font-big">可见颜色</p></el-col><el-col :span="18"><div class="slider-demo-block"><el-color-picker v-model="visibleColor" @change="visibleColorChange" /></div></el-col></el-row></div><!--不可见颜色--><div class="el-h-line"><el-row :gutter="10"><el-col :span="6"><p class="font-big">不可见颜色</p></el-col><el-col :span="18"><div class="slider-demo-block"><div class="el-demo"><el-color-picker v-model="hiddenColor" @change="hiddenColorChange" /></div></div></el-col></el-row></div><template #footer><span class="dialog-footer"><el-button @click="addObserverPoint">添加观察点</el-button><el-button @click="addTargetPoint">添加目标点</el-button><el-button type="primary" @click="clearVisibility" style="background-color: #1d888b;">清除</el-button></span></template></el-dialog></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
// 组件传值
import emitter from "../../../utils/bus";
const changeVisibilityState = ref<Boolean>(true)
const longitude = ref()
const latitude = ref()
const height = ref()
const visibleColor = ref('#0e9dec')
const hiddenColor = ref('#ffb200')
const sightlineWidth = ref<number>()
const sightline = ref(null)
// 当前点击状态是否是 添加观察点
const addViewFlag = ref(false)
// 当前点击状态是否是 添加目标点
const addTargetFlag = ref(false)
// 添加的目标点的点号
const num = ref(0)
// 是否能移除目标点
const couldRemove = ref(false)
const handlerPoint = ref(null)
const pointEventHandler = ref(null)
const Cesium = window.Cesiumconst handleClose = (done: () => void) => {done()clearVisibility()
}
// 接受layoutMenu传过来的值
emitter.on("visibilityState", (data: any) => {changeVisibilityState.value = data
});const init = () => {if (!sightline.value) {sightline.value = new Cesium.Sightline(window.viewer.scene)}sightline.value.build()addViewFlag.value = false // 当前点击状态是否是 添加观察点addTargetFlag.value = false // 当前点击状态是否是 添加目标点num.value = 0 // 添加的目标点的点号couldRemove.value = false // 是否能移除目标点
}const addObserverPoint = (): void => {addViewFlag.value = truesightline.value.lineWidth = 5handlerPoint.value = new Cesium.DrawHandler(window.viewer,Cesium.DrawMode.Point)handlerPoint.value.drawEvt.addEventListener((result: object) => {// 添加观察点if (addViewFlag.value) {var point = result.object// point.show = false;var position = result.object.position// 将获取的点的位置转化成经纬度var cartographic = Cartesian2toDegrees(position)longitude.value = cartographic[0]latitude.value = cartographic[1]height.value = cartographic[2]// 设置观察点sightline.value.viewPosition = cartographicaddViewFlag.value = false}handlerPoint.value.deactivate()})if (handlerPoint.value.active) {return}window.viewer.entities.removeAll()if (couldRemove.value) {sightline.value.removeAllTargetPoint()}if (longitude.value && latitude.value && height.value) {sightline.value.viewPosition = [parseFloat(longitude.value), parseFloat(latitude.value), parseFloat(height.value)]addViewFlag.value = false} else {handlerPoint.value.activate()}if (addViewFlag.value || addTargetFlag.value) {window.viewer.enableCursorStyle = falsewindow.viewer._element.style.cursor = ''}
}const addTargetPoint = (): void => {addViewFlag.value = falseaddTargetFlag.value = truesightline.value.visibleColor = Cesium.Color.fromCssColorString(visibleColor.value)sightline.value.hiddenColor = Cesium.Color.fromCssColorString(hiddenColor.value)if (!pointEventHandler.value) {pointEventHandler.value = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)}if (addViewFlag.value || addTargetFlag.value) {window.viewer.enableCursorStyle = falsewindow.viewer._element.style.cursor = ''}// 鼠标点击事件，添加点pointEventHandler.value.setInputAction((e: any) => {var position = window.viewer.scene.pickPosition(e.position)addTarget(position)}, Cesium.ScreenSpaceEventType.LEFT_CLICK)// 鼠标移动事件，更新点pointEventHandler.value.setInputAction((evt: any) => {if (num.value > 0) {// 鼠标移动，更新最后一次添加的目标点的位置var position = window.viewer.scene.pickPosition(evt.endPosition)sightline.value.removeTargetPoint('point0')var cartographic = Cartesian2toDegrees(position)var flag = sightline.value.addTargetPoint({position: cartographic,name: 'point0'})}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)// 鼠标右键事件，结束pointEventHandler.value.setInputAction(() => {window.viewer.enableCursorStyle = trueif (pointEventHandler.value) {pointEventHandler.value.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)pointEventHandler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)}}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}// 添加通视点
const addTarget = (CartesianPosition: object) => {if (addViewFlag.value === false && addTargetFlag.value) {num.value += 1// 将获取的点的位置转化成经纬度var cartographic = Cartesian2toDegrees(CartesianPosition)// 添加目标点var name = 'point' + num.valuevar flag = sightline.value.addTargetPoint({position: cartographic,name: name})couldRemove.value = true}
}// 笛卡尔转换为经纬度
const Cartesian2toDegrees = (position: object) => {var cartographic = Cesium.Cartographic.fromCartesian(position)var longitude = Cesium.Math.toDegrees(cartographic.longitude)var latitude = Cesium.Math.toDegrees(cartographic.latitude)var height = cartographic.heightreturn [longitude, latitude, height]
}const clearVisibility = (): void => {addViewFlag.value = falseaddTargetFlag.value = falseif (handlerPoint.value) {handlerPoint.value.clear()}num.value = 0window.viewer.entities.removeAll()if (couldRemove.value) {sightline.value.removeAllTargetPoint()couldRemove.value = false}window.viewer.enableCursorStyle = truelongitude.value = nulllatitude.value = nullheight.value = nullvisibleColor.value = '#0e9dec'hiddenColor.value = '#ffb200'
}
// 可视线实时的颜色的改变，
const hiddenColorChange = (val: Number) => {sightline.value.visibleColor = Cesium.Color.fromCssColorString(val)
}
const visibleColorChange = (val: Number) => {sightline.value.hiddenColor = Cesium.Color.fromCssColorString(val)
}
onMounted(() => {init()onDialog()
});// 弹框打开之后的回调再次穿透页面
const getIntervisOpen = () => {onDialog()
}onBeforeUnmount(() => {clearVisibility()handlerPoint.value = nullpointEventHandler.value = null
})// 解决弹框打开时可操作操作其他Dom的问题
const onDialog = () => {var box = document.querySelector(".el-overlay-dialog");// 获取.el-overlay-dialog父级var boxa = box.parentNode;//  使用pointerEvents 进行页面穿透boxa.style.pointerEvents = "none";
}
</script>

<style lang='scss' scoped>
//解决弹框打开时可操作操作其他Dom的问题
:deep(.el-dialog) {pointer-events: auto !important;
}.p-font {font-size: 16px;height: 36px;color: aqua;
}:deep(.el-dialog__header) {background-color: #012728;margin-right: 0px;height: var(--el-hov);padding: var(--hoverc);
}:deep(.el-dialog__title) {line-height: var(--line-h);font-size: var(--el-dialog-title-font-size);color: var(--text-color);margin-left: var(--m-l);
}:deep(.el-slider__runway) {height: var(--el-h);background-color: var(--el-color);border: 1px solid var(--el-border);
}:deep(.el-slider__bar) {height: var(--el-h);background-color: var(--el-bj);
}:deep(.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button) {display: inline-block;width: 2px;height: 36px;margin-top: 13px;
}:deep(.el-slider__button) {background-color: #1df9fc;border-radius: 0%;border: solid 0px var(--el-slider-main-bg-color);
}:deep(.el-input-number__increase) {background: var(--el-color);color: var(--el-bj);border-left: 1px solid var(--el-border)
}:deep(.el-input__wrapper) {background-color: var(--el-color);border: 1px solid var(--el-border);box-shadow: 0 0 0 0 var(--el-input-hover-border-color) inset;
}:deep(.el-input-number__decrease) {background: var(--el-color);color: var(--el-bj);border-right: 1px solid var(--el-border)
}:deep(.el-input__wrapper:hover) {box-shadow: 0 0 0 0 var(--el-input-hover-border-color) inset;
}:deep(.el-input__inner) {color: var(--text-color)
}.font-big {font-size: var(--el-font);color: var(--text-color);line-height: var(--el-line);
}:deep(.el-dialog--center) {text-align: left;
}:deep(.el-color-picker__trigger) {width: 340px;
}:deep(.el-color-picker__color-inner) {background-color: #00CC66;height: 32px;
}:deep(.el-color-picker__trigger) {border: 0px solid var(--el-border-color);height: 28px;
}:deep(.el-color-picker__color) {width: 100%;height: 32px;text-align: center;border: 0px solid var(--el-text-color-secondary);margin-left: 5px;
}.el-h-line {margin-top: var(--el-h-line);
}:deep(.el-color-picker:hover:not(.is-disabled) .el-color-picker__trigger) {border: 0 solid var(--el-border-color-hover);
}:deep(.el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled):hover) {background-color: var(--el-fill-color-light);background-color: #34E0A8;
}:deep(.el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled)) {background-color: var(--el-fill-color-light);background-color: #34E0A8;
}:deep(.el-dialog--center .el-dialog__footer) {text-align: end;border-top: 1px solid #466c64;
}:deep(.el-button) {background-color: var(--el-h-bj);color: var(--text-color);font-size: 15px;
}:deep(.el-dialog__footer) {padding: var(--el-dialog-padding-primary);padding-top: 15px;padding-bottom: 15px;border-top: 1px solid #466C64;
}:deep(.el-dialog) {margin-right: 380px;
}.el-dialog::after {clear: both;
}.p {line-height: 52px;color: #34e0a8;margin-top: -18px;font-size: 15px;font-weight: 600;}:deep(.el-color-picker__color-inner) {display: inline-flex;justify-content: center;align-items: center;width: 78%;height: 100%;margin-left: -88px;
}:deep(.el-input.is-disabled .el-input__wrapper) {background-color: #123435;box-shadow: 0 0 0 0 #19686c inset;
}
</style>
<style lang='scss' >
.el-dialog {--el-dialog-width: 50%;--el-dialog-bg-color: #1B3A39;
}.el-dialog__headerbtn {top: -5px;right: -5px;
}.slider-demo-block {display: flex;align-items: center;
}.slider-demo-block .el-slider {margin-top: 0;margin-left: 8px;
}.el-popper.is-light {width: 293px !important;opacity: 0.9;
}.el-input__wrapper {background-color: #012728;border: 1 solid #00CC66;// box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
}.el-input--small {--el-input-height: var(--el-component-size-small);border: 1;border: 1px solid #1df9fc;
}.el-popper.is-light {background: #012324 !important;border: 0 solid var(--el-border-color-light) !important;
}
</style>