< 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. Cesium
const handleClose = ( done : ( ) => void ) => {
done ( )
clearVisibility ( )
}
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 = true
sightline. value. lineWidth = 5
handlerPoint. value = new Cesium . DrawHandler (
window. viewer,
Cesium. DrawMode. Point
)
handlerPoint. value. drawEvt. addEventListener ( ( result: object) => {
if ( addViewFlag. value) {
var point = result. object
var position = result. object. position
var cartographic = Cartesian2toDegrees ( position)
longitude. value = cartographic[ 0 ]
latitude. value = cartographic[ 1 ]
height. value = cartographic[ 2 ]
sightline. value. viewPosition = cartographic
addViewFlag. 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 = false
window. viewer. _element. style. cursor = ''
}
}
const addTargetPoint = ( ) : void => {
addViewFlag. value = false
addTargetFlag. value = true
sightline. 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 = false
window. 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 = true
if ( 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. value
var 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. height
return [ longitude, latitude, height]
}
const clearVisibility = ( ) : void => {
addViewFlag. value = false
addTargetFlag. value = false
if ( handlerPoint. value) {
handlerPoint. value. clear ( )
}
num. value = 0
window. viewer. entities. removeAll ( )
if ( couldRemove. value) {
sightline. value. removeAllTargetPoint ( )
couldRemove. value = false
}
window. viewer. enableCursorStyle = true
longitude. value = null
latitude. value = null
height. value = null
visibleColor. 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 = null
pointEventHandler. value = null
} )
const onDialog = ( ) => {
var box = document. querySelector ( ".el-overlay-dialog" ) ;
var boxa = box. parentNode;
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>