You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1703 lines
64 KiB
1703 lines
64 KiB
<template>
|
|
<div class="toolbar">
|
|
<Window
|
|
:title="title"
|
|
:width="65"
|
|
:minWidth="65"
|
|
:height="all? 600 : 380"
|
|
:left="0"
|
|
:top="0"
|
|
@cancel="cancel"
|
|
:floatright="false"
|
|
:showCancelButton="false"
|
|
:footervisible="false"
|
|
:showcloseButton="false"
|
|
id="toolbarWindow"
|
|
v-show="show"
|
|
class="barbox"
|
|
>
|
|
<div class="tbImg">
|
|
<p class="tb-img-p" :title="isFullScren ? '缩小' : '全屏'" @click="screen">
|
|
<img :src="isFullScren ? exitfullscreen : fullscreen" />
|
|
</p>
|
|
<p id="mapScene" class="tb-img-p" title="地图场景" @click="openPopModal('mapSceneModal', $event)">
|
|
<img id="mapSceneImg" :src="mapchange" />
|
|
</p>
|
|
<p title="地图放大" class="tb-img-p" @click="mapZoom('in')"><img :src="zoomin" /></p>
|
|
<p title="地图缩小" class="tb-img-p" @click="mapZoom('out')"><img :src="zoomout" /></p>
|
|
<p title="地图复原" class="tb-img-p" @click="resetEarth"><img :src="reset" /></p>
|
|
<p id="measure" class="tb-img-p" title="测量工具" @click="openPopModal('measurePopModal', $event)">
|
|
<img id="measureImg" :src="celiang" />
|
|
</p>
|
|
<p title="二三维转换" class="tb-img-p" @click="twoTothreeD"><img :src="twothreeDchange" /></p>
|
|
<div v-if="all">
|
|
<p title="添加模型" class="tb-img-p" @click="openPopModal('addPopModal', $event)">
|
|
<img :src="specialEffects" />
|
|
</p>
|
|
<p title="报警信息" class="tb-img-p" @click="warnInfoMan"><img :src="warnInfo" /></p>
|
|
<p title="事件通报" class="tb-img-p alarm" @click="retrospect">
|
|
<img :src="eventNotif" />
|
|
<span class="divright">{{ eventDataNum }}</span>
|
|
</p>
|
|
<p title="工具箱" class="tb-img-p alarm" @click="drawShape">
|
|
<img :src="drawShapeIMG" />
|
|
</p>
|
|
<p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary">
|
|
<img :src="drawShapeMilitaryIMG" />
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</Window>
|
|
<div id="measurePopModal" class="popModal">
|
|
<ul>
|
|
<p @click="measureMentType = 'POINT'">位置测量</p>
|
|
<p @click="measureMentType = 'SPACE_DISTANCE'">距离测量</p>
|
|
<p @click="measureMentType = 'TRIANGLE_DISTANCE'">三角测量</p>
|
|
<p @click="measureMentType = 'SPACE_AREA'">面积测量</p>
|
|
<p @click="clearResults">清空测量结果</p>
|
|
</ul>
|
|
</div>
|
|
<div id="mapSceneModal" class="popModal" style="top: 85px; height: 405px; width: 150px">
|
|
<ul>
|
|
<p @click="layerMan">图层管理(开启)</p>
|
|
<p @click="mapMan">地图切换(开启)</p>
|
|
<p @click="compass">指北针(开启)</p>
|
|
<p @click="scale">比例尺(开启)</p>
|
|
<p @click="terrainDepth">地形深度检测(开启)</p>
|
|
<p @click="keyboardRoam">键盘漫游(开启)</p>
|
|
<p @click="terrainDEM">地形高程(开启)</p>
|
|
<p @click="viewAngle">视角管理器</p>
|
|
<p @click="capture">场景截图</p>
|
|
</ul>
|
|
</div>
|
|
<div id="addPopModal" class="popModal" style="top: 355px">
|
|
<ul>
|
|
<p @click="openCreateModel('addModelWin')">添加模型</p>
|
|
<p @click="addArea()">添加防区</p>
|
|
<p @click="addRadar()">添加雷达</p>
|
|
<p @click="addMonitorPoint()">添加监控点</p>
|
|
<p @click="addWave()">添加微波探测</p>
|
|
<p @click="openCreateModel('roamPathList')">路径巡检</p>
|
|
<p @click="openCreateModel('keyControlAreaList')">管控区域</p>
|
|
</ul>
|
|
</div>
|
|
<div class="mapBox">
|
|
<ul>
|
|
<li v-for="item in imageryskin" :key="item" @click="selectMap(item)">
|
|
<div class="mapBoxBack" :class="{ highlight: selected == item.name }">
|
|
<img :src="item.imgUrl" /><br />
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 添加监控点 -->
|
|
<AddMonitorPointCom v-if="addMonitorPointComShow" :msCameraSiteHandle="msCameraSiteHandle"></AddMonitorPointCom>
|
|
<!-- 添加微波 -->
|
|
<AddWaveCom v-if="addWaveComShow" :setLabelStatus="setLabelStatus"></AddWaveCom>
|
|
<!-- 添加雷达 -->
|
|
<AddRadarCom v-if="addRadarComShow" :setLabelStatus="setLabelStatus"></AddRadarCom>
|
|
|
|
<AddModelWin v-if="addModelWinShow" :setLabelStatus="setLabelStatus"></AddModelWin>
|
|
<RoamPathList v-if="roamPathListShow"></RoamPathList>
|
|
<KeyControlAreaList v-if="keyControlAreaListShow"></KeyControlAreaList>
|
|
<NotificationModel v-if="notificationModelShow"></NotificationModel>
|
|
<WarnList v-if="WarnListShow"></WarnList>
|
|
<DrawShape v-if="drawShapeShow" :drawShapePackage="drawShapePackage"></DrawShape>
|
|
<DrawShapeMilitary v-if="drawShapeMilitaryShow"></DrawShapeMilitary>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref, onMounted, onBeforeMount, getCurrentInstance, onBeforeUnmount, nextTick, watch, createVNode, render } from 'vue';
|
|
import Window from '@/components/earthMap/components/Window.vue';
|
|
import AddModelWin from '@/components/earthMap/toolbar/AddModelWin.vue';
|
|
import RoamPathList from '@/components/earthMap/RoamPathList.vue';
|
|
import KeyControlAreaList from '@/components/earthMap/KeyControlAreaList.vue';
|
|
import NotificationModel from '@/components/earthMap/toolbar/NotificationModel.vue';
|
|
import DrawShape from '@/components/earthMap/toolbar/DrawShape.vue';
|
|
import DrawShapeMilitary from '@/components/earthMap/toolbar/DrawShapeMilitary.vue';
|
|
import WarnList from '@/components/earthMap/toolbar/WarnList.vue';
|
|
import fullscreen from '@/assets/earthMap/toolbar/fullscreen.png';
|
|
import exitfullscreen from '@/assets/earthMap/toolbar/exitfullscreen.png';
|
|
import twothreeDchange from '@/assets/earthMap/toolbar/23Dchange.png';
|
|
import mapchange from '@/assets/earthMap/toolbar/mapchange.png';
|
|
import zoomin from '@/assets/earthMap/toolbar/zoomin.png';
|
|
import zoomout from '@/assets/earthMap/toolbar/zoomout.png';
|
|
import reset from '@/assets/earthMap/toolbar/reset.png';
|
|
import celiang from '@/assets/earthMap/toolbar/celiang.png';
|
|
import specialEffects from '@/assets/earthMap/toolbar/specialEffects.png';
|
|
import warnInfo from '@/assets/earthMap/toolbar/warning.png';
|
|
import history from '@/assets/earthMap/toolbar/history.png';
|
|
import eventNotif from '@/assets/earthMap/toolbar/evnetNotif.png';
|
|
import jianbianseRed from '@/assets/earthMap/toolbar/jianbianseRed.jpg';
|
|
import drawShapeIMG from '@/assets/earthMap/toolbar/drawShapeIMG.png';
|
|
import drawShapeMilitaryIMG from '@/assets/earthMap/toolbar/drawShapeMilitaryIMG.png';
|
|
|
|
import AddMonitorPointCom from '@/components/earthMap/toolbar/AddMonitorPointCom.vue';
|
|
import AddWaveCom from '@/components/earthMap/toolbar/AddWaveCom.vue';
|
|
import AddRadarCom from '@/components/earthMap/toolbar/AddRadarCom.vue';
|
|
import seneIdTreeSelect from '/@/components/earthMap/components/seneIdTreeSelect.vue';
|
|
import $mitt from '@/utils/earthMap/mitt';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import $ from 'jquery';
|
|
import { useUserStore } from '/@/store/modules/user';
|
|
import { useEarthMapStore } from '/@/store/modules/earthMap';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
|
export default defineComponent({
|
|
name: 'Toolbar',
|
|
props: {
|
|
flyTo: Function,
|
|
setLabelStatus: Function,
|
|
all: Boolean,
|
|
},
|
|
components: {
|
|
Window,
|
|
AddModelWin,
|
|
RoamPathList,
|
|
NotificationModel,
|
|
WarnList,
|
|
DrawShape,
|
|
DrawShapeMilitary,
|
|
KeyControlAreaList,
|
|
AddMonitorPointCom,
|
|
AddWaveCom,
|
|
AddRadarCom,
|
|
},
|
|
setup(props) {
|
|
const { proxy }: any = getCurrentInstance();
|
|
// const { userInfo } = useUserStore();
|
|
const userStore = useUserStore();
|
|
const store = useEarthMapStore();
|
|
const { createMessage } = useMessage();
|
|
let _viewer = ref();
|
|
let show = ref(true);
|
|
let modalVisible = ref(false);
|
|
let isFullScren = ref(false);
|
|
let sceneMode3D = ref(true);
|
|
let measureMentType = ref('NONE');
|
|
let imageryskin = ref([]);
|
|
|
|
let url = ref({
|
|
SendList: '/military/msCaseNotificationSend/list',
|
|
list: '/military/msCaseNotification/list',
|
|
});
|
|
let selected = ref('天地图-卫星');
|
|
let mapObj_ = ref({ ref: 'tdtwx' });
|
|
let orgCode = ref();
|
|
let eventData: any = ref([]);
|
|
|
|
// const mitter = mitt();
|
|
//ref
|
|
const addModelWinShow = ref(false);
|
|
const roamPathListShow = ref(false);
|
|
const keyControlAreaListShow = ref(false);
|
|
const notificationModelShow = ref(false);
|
|
const WarnListShow = ref(false);
|
|
const drawShapeShow = ref(false);
|
|
const drawShapePackage: any = ref(null);
|
|
const drawShapeMilitaryShow = ref(false);
|
|
|
|
// 监控点弹窗
|
|
const addMonitorPointComShow = ref(false);
|
|
const msCameraSiteHandle = ref(false);
|
|
// 微波弹窗
|
|
const addWaveComShow = ref(false);
|
|
// 雷达弹窗
|
|
const addRadarComShow = ref(false);
|
|
//计算属性
|
|
const title = computed(() => {
|
|
return '';
|
|
});
|
|
// const getEventNum = computed(() => {
|
|
// let i = 0
|
|
// eventData.value.forEach((element: any) => {
|
|
// if (element.readFlag == 0) i++
|
|
// })
|
|
// return i
|
|
// });
|
|
|
|
let eventDataNum = ref(0);
|
|
// watch(()=>eventData,()=>{
|
|
// console.log("eventData",eventData.value);
|
|
|
|
// let i = 0
|
|
// eventData.value.forEach((element: any) => {
|
|
// if (element.readFlag == 0) i++
|
|
// })
|
|
// return eventDataNum.value = i
|
|
|
|
// },{ deep:true })
|
|
|
|
onBeforeMount(() => {
|
|
_viewer.value = window.$uia._earth._czm.viewer;
|
|
});
|
|
|
|
onMounted(() => {
|
|
// console.log("toolbar初始化");
|
|
getEventData();
|
|
window.getEventData = getEventData;
|
|
{
|
|
//由于vue全屏时监听不到esc事件，所以页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发
|
|
document.addEventListener('fullscreenchange', () => {
|
|
isFullScren.value = !isFullScren.value;
|
|
});
|
|
document.addEventListener('mozfullscreenchange', () => {
|
|
isFullScren.value = !isFullScren.value;
|
|
});
|
|
document.addEventListener('webkitfullscreenchange', () => {
|
|
isFullScren.value = !isFullScren.value;
|
|
});
|
|
document.addEventListener('msfullscreenchange', () => {
|
|
isFullScren.value = !isFullScren.value;
|
|
});
|
|
}
|
|
{
|
|
//其他页面调用本页面的methods方法
|
|
$mitt.on('warnInfoMan', function () {
|
|
warnInfoMan();
|
|
});
|
|
//调用绘画组件，res.show为展示状态,res为传递数据
|
|
$mitt.on('drawShapeShow', function (res: any) {
|
|
drawShapeShow.value = res.show;
|
|
drawShapePackage.value = res;
|
|
});
|
|
//调用创建/编辑防区 addArea方法
|
|
$mitt.on('msMapLineHandler', function (res: any) {
|
|
// console.log("msMapLineHandlerres",res);
|
|
addArea(res)
|
|
});
|
|
//调用创建/编辑防区 addMonitorPoint方法
|
|
$mitt.on('msCameraSiteHandle', function (res: any) {
|
|
// console.log("msMapLineHandlerres",res);
|
|
addMonitorPoint(res)
|
|
});
|
|
|
|
}
|
|
//数据绑定
|
|
//disposers 用来收集资源销毁函数，并在析构时自动调用！
|
|
{
|
|
proxy._disposers = [];
|
|
proxy._disposers.push(window.XE.MVVM.bind(proxy, 'measureMentType', window.$earth.analyzation.measurement, 'type'));
|
|
}
|
|
{
|
|
//全局点击事件
|
|
document.addEventListener('click', (e: any) => {
|
|
// 在不是按钮和按钮里的图片按下时清除菜单
|
|
if (e.target.nodeName === 'IMG') {
|
|
if (!e.target.parentElement.classList.contains('tb-img-p')) {
|
|
closePopModal('all');
|
|
}
|
|
} else if (!e.target.classList.contains('tb-img-p')) {
|
|
closePopModal('all');
|
|
}
|
|
});
|
|
}
|
|
{
|
|
// orgCode.value = Vue.ls.get(USER_INFO).orgCode
|
|
orgCode.value = userStore.userInfo?.orgCode;
|
|
}
|
|
});
|
|
|
|
//methods
|
|
function getEventData() {
|
|
let userId = localStorage.getItem('userName');
|
|
//发布事件通报
|
|
return defHttp
|
|
.get({ url: url.value.list, params: { publishStatus: 1, noticeUsers: '*' + userId + '*' } }, { isTransformResponse: false })
|
|
.then((res) => {
|
|
if (res.code == 200 && res.result.records.length != 0) {
|
|
return res.result.records;
|
|
}
|
|
})
|
|
.then((arr) => {
|
|
//接收事件通报
|
|
return defHttp.get({ url: url.value.SendList, params: { userId } }, { isTransformResponse: false }).then((res) => {
|
|
if (res.code == 200 && res.result.records.length != 0) {
|
|
let eventData: any = [];
|
|
res.result.records.forEach((element) => {
|
|
delete element.createTime;
|
|
arr.forEach((item: any) => {
|
|
if (item.id == element.caseId) {
|
|
item = Object.assign(item, element);
|
|
eventData.push(item);
|
|
}
|
|
});
|
|
});
|
|
eventData.value = arrSort(eventData);
|
|
let i = 0;
|
|
eventData.value.forEach((element: any) => {
|
|
if (element.readFlag == 0) {
|
|
i++;
|
|
}
|
|
});
|
|
eventDataNum.value = i;
|
|
|
|
localStorage.setItem('eventData', JSON.stringify(eventData.value));
|
|
return eventData.value;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function arrSort(eventData) {
|
|
//排序
|
|
eventData.sort(function (a, b) {
|
|
let value1 = a.readFlag;
|
|
let value2 = b.readFlag;
|
|
//时序
|
|
if (value1 == value2) return new Date(b.createTime).getTime() - new Date(a.createTime).getTime();
|
|
//已读在后面
|
|
return value1 - value2;
|
|
});
|
|
return eventData;
|
|
}
|
|
|
|
function click() {
|
|
window.$uia.language = window.$uia.language === 'zh' ? 'en' : 'zh';
|
|
}
|
|
|
|
function cancel() {
|
|
proxy.$parent.destroyTool(proxy);
|
|
}
|
|
|
|
function screen() {
|
|
let el = document.documentElement;
|
|
if (isFullScren.value) {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
}
|
|
} else {
|
|
if (el.requestFullscreen) {
|
|
el.requestFullscreen();
|
|
} else if (el.mozRequestFullScreen) {
|
|
el.mozRequestFullScreen();
|
|
} else if (el.webkitRequestFullScreen) {
|
|
el.webkitRequestFullScreen();
|
|
} else if (el.msRequestFullscreen) {
|
|
el.msRequestFullscreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
function layerMan() {
|
|
window.$uia.tools.sceneTree.show = !window.$uia.tools.sceneTree.show; //图层管理
|
|
let layerMgmt: any = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[0];
|
|
window.$uia.tools.sceneTree.show === true ? (layerMgmt.innerText = '图层管理(开启)') : (layerMgmt.innerText = '图层管理(关闭)');
|
|
}
|
|
|
|
function mapMan() {
|
|
$mitt.emit('radioChangeBtnShow', (isShow) => {
|
|
let mapSwitch = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[1];
|
|
isShow === true ? (mapSwitch.innerText = '地图切换(开启)') : (mapSwitch.innerText = '地图切换(关闭)');
|
|
});
|
|
}
|
|
|
|
function compass() {
|
|
//指北针显隐控制
|
|
window.$earth.camera.navigator.showCompass = !window.$earth.camera.navigator.showCompass;
|
|
let compass = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[2];
|
|
window.$earth.camera.navigator.showCompass === true ? (compass.innerText = '指北针(开启)') : (compass.innerText = '指北针(关闭)');
|
|
}
|
|
|
|
function scale() {
|
|
//比例尺显隐控制
|
|
window.$earth.camera.navigator.showDistanceLegend = !window.$earth.camera.navigator.showDistanceLegend;
|
|
let scale = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[3];
|
|
window.$earth.camera.navigator.showDistanceLegend === true ? (scale.innerText = '比例尺(开启)') : (scale.innerText = '比例尺(关闭)');
|
|
}
|
|
|
|
function capture() {
|
|
window.$uia.saveScreenToFile(window.$uia.earth.czm.viewer.canvas.width, window.$uia.earth.czm.viewer.canvas.height, '场景截图.png');
|
|
}
|
|
|
|
function viewAngle() {
|
|
window.$uia.tools.cameraViewManager.show = !window.$uia.tools.cameraViewManager.show;
|
|
}
|
|
|
|
function selectMap(item) {
|
|
selected.value = item.name;
|
|
if (!$.isEmptyObject(mapObj_.value) && item.ref == mapObj_.value.ref) {
|
|
return;
|
|
}
|
|
/* window.$earth.sceneTree.$refs.tdtwx.czmObject.show = false;
|
|
window.$earth.sceneTree.$refs.bdha.czmObject.show = false;
|
|
window.$earth.sceneTree.$refs.gdsl.czmObject.show = false;
|
|
window.$earth.sceneTree.$refs.gdwx.czmObject.show = false;
|
|
window.$earth.sceneTree.$refs.sjgkdt.czmObject.show = false; */
|
|
|
|
switch (item.ref) {
|
|
case 'tdtwx':
|
|
// this.mapObj_ = window.$earth.sceneTree.$refs.tdtwxsj;
|
|
break;
|
|
case 'bdha':
|
|
createMessage.warning('暂未开放该地图！', 2);
|
|
// this.mapObj_ = window.$earth.sceneTree.$refs.bdha;
|
|
break;
|
|
case 'gdsl':
|
|
createMessage.warning('暂未开放该地图！', 2);
|
|
// this.mapObj_ = window.$earth.sceneTree.$refs.gdsl;
|
|
break;
|
|
case 'gdwx':
|
|
createMessage.warning('暂未开放该地图！', 2);
|
|
// this.mapObj_ = window.$earth.sceneTree.$refs.gdwx;
|
|
break;
|
|
case 'sjgkdt':
|
|
createMessage.warning('暂未开放该地图！', 2);
|
|
// this.mapObj_ = window.$earth.sceneTree.$refs.sjgkdt;
|
|
break;
|
|
default:
|
|
}
|
|
// this.mapObj_.czmObject.show = true;
|
|
}
|
|
|
|
function terrainDepth() {
|
|
//开启深度检测
|
|
window.$earth.czm.viewer.scene.globe.depthTestAgainstTerrain = !window.$earth.czm.viewer.scene.globe.depthTestAgainstTerrain;
|
|
let terrainDepth = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[4];
|
|
window.$earth.czm.viewer.scene.globe.depthTestAgainstTerrain === true
|
|
? (terrainDepth.innerText = '地形深度检测(开启)')
|
|
: (terrainDepth.innerText = '地形深度检测(关闭)');
|
|
}
|
|
|
|
function keyboardRoam() {
|
|
// 禁用键盘漫游
|
|
window.$earth.camera.immersion.enabled = !window.$earth.camera.immersion.enabled;
|
|
let keyboardRoam = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[5];
|
|
window.$earth.camera.immersion.enabled === true ? (keyboardRoam.innerText = '键盘漫游(开启)') : (keyboardRoam.innerText = '键盘漫游(关闭)');
|
|
}
|
|
|
|
function terrainDEM() {
|
|
$mitt.emit('loadingStatus');
|
|
window.$earth.sceneTree.$refs.terrain.czmObject.show = !window.$earth.sceneTree.$refs.terrain.czmObject.show;
|
|
//重建地图实体
|
|
window.$earth.sceneTree.root.children.splice(1, window.$earth.sceneTree.root.children.length);
|
|
$mitt.emit('createBBHLine');
|
|
let terrainDEM = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[6];
|
|
window.$earth.sceneTree.$refs.terrain.czmObject.show === true
|
|
? (terrainDEM.innerText = '地形高程(开启)')
|
|
: (terrainDEM.innerText = '地形高程(关闭)');
|
|
}
|
|
|
|
function resetEarth() {
|
|
// const { flyTo } = this.getBind()
|
|
window.$flyTo && window.$flyTo();
|
|
|
|
// const position = [1.304199165585534, 0.6508221071225061, 5424.505407431675]
|
|
// const rotation = [2.306666386463268, -0.41595416600851376, 0.0026186853829388568]
|
|
// window.$earth.camera.flyTo(position, 0, rotation, 5) // 定点飞入
|
|
}
|
|
|
|
function clearResults() {
|
|
console.log('clearResults');
|
|
window.$earth && window.$earth.analyzation.measurement.clearResults();
|
|
window.$earth && window.$earth.analyzation.cutFillComputing.clearResults();
|
|
window.$earth && window.$earth.analyzation.cutFillComputingOld.clearResults();
|
|
window.$earth.analyzation.cutFillComputing.positions = [];
|
|
measureMentType.value = 'NONE';
|
|
}
|
|
|
|
function drawWall(staticPosition: any) {
|
|
let alp = 1;
|
|
let num = 0;
|
|
//绘制墙
|
|
let _entity = _viewer.value.entities.add({
|
|
// id: "wall1",
|
|
name: 'wall',
|
|
wall: {
|
|
show: true,
|
|
positions: staticPosition,
|
|
material: new window.Cesium.ImageMaterialProperty({
|
|
image: jianbianseRed,
|
|
transparent: true,
|
|
color: new window.Cesium.CallbackProperty(function () {
|
|
if (num % 2 === 0) {
|
|
alp -= 0.055;
|
|
} else {
|
|
alp += 0.055;
|
|
}
|
|
if (alp <= 0.3) {
|
|
num++;
|
|
} else if (alp >= 1) {
|
|
num++;
|
|
}
|
|
return window.Cesium.Color.WHITE.withAlpha(alp); //entity的颜色透明 并不影响材质，并且 entity也会透明
|
|
}, false),
|
|
}),
|
|
},
|
|
});
|
|
}
|
|
/*
|
|
添加雷达扫描线
|
|
viewer
|
|
cartographicCenter 扫描中心
|
|
radius 半径 米
|
|
scanColor 扫描颜色
|
|
duration 持续时间 毫秒
|
|
*/
|
|
function addRadarScanPostStage(viewer, cartographicCenter, radius, scanColor, duration) {
|
|
var _Cartesian3Center = window.Cesium.Cartographic.toCartesian(cartographicCenter);
|
|
var _Cartesian4Center = new window.Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);
|
|
|
|
var _CartographicCenter1 = new window.Cesium.Cartographic(
|
|
cartographicCenter.longitude,
|
|
cartographicCenter.latitude,
|
|
cartographicCenter.height + 500
|
|
);
|
|
var _Cartesian3Center1 = window.Cesium.Cartographic.toCartesian(_CartographicCenter1);
|
|
var _Cartesian4Center1 = new window.Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);
|
|
|
|
var _CartographicCenter2 = new window.Cesium.Cartographic(
|
|
cartographicCenter.longitude + window.Cesium.Math.toRadians(0.001),
|
|
cartographicCenter.latitude,
|
|
cartographicCenter.height
|
|
);
|
|
var _Cartesian3Center2 = window.Cesium.Cartographic.toCartesian(_CartographicCenter2);
|
|
var _Cartesian4Center2 = new window.Cesium.Cartesian4(_Cartesian3Center2.x, _Cartesian3Center2.y, _Cartesian3Center2.z, 1);
|
|
var _RotateQ = new window.Cesium.Quaternion();
|
|
var _RotateM = new window.Cesium.Matrix3();
|
|
|
|
var _time = new Date().getTime();
|
|
|
|
var _scratchCartesian4Center = new window.Cesium.Cartesian4();
|
|
var _scratchCartesian4Center1 = new window.Cesium.Cartesian4();
|
|
var _scratchCartesian4Center2 = new window.Cesium.Cartesian4();
|
|
var _scratchCartesian3Normal = new window.Cesium.Cartesian3();
|
|
var _scratchCartesian3Normal1 = new window.Cesium.Cartesian3();
|
|
|
|
var ScanPostStage = new window.Cesium.PostProcessStage({
|
|
// name: "radar",
|
|
fragmentShader: getRadarScanShader(),
|
|
uniforms: {
|
|
u_scanCenterEC: function () {
|
|
return window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
|
},
|
|
u_scanPlaneNormalEC: function () {
|
|
var temp = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
|
var temp1 = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
|
|
_scratchCartesian3Normal.x = temp1.x - temp.x;
|
|
_scratchCartesian3Normal.y = temp1.y - temp.y;
|
|
_scratchCartesian3Normal.z = temp1.z - temp.z;
|
|
|
|
window.Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
|
|
return _scratchCartesian3Normal;
|
|
},
|
|
u_radius: radius,
|
|
u_scanLineNormalEC: function () {
|
|
var temp = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
|
var temp1 = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
|
|
var temp2 = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center2, _scratchCartesian4Center2);
|
|
|
|
_scratchCartesian3Normal.x = temp1.x - temp.x;
|
|
_scratchCartesian3Normal.y = temp1.y - temp.y;
|
|
_scratchCartesian3Normal.z = temp1.z - temp.z;
|
|
|
|
window.Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
|
|
|
|
_scratchCartesian3Normal1.x = temp2.x - temp.x;
|
|
_scratchCartesian3Normal1.y = temp2.y - temp.y;
|
|
_scratchCartesian3Normal1.z = temp2.z - temp.z;
|
|
|
|
var tempTime = ((new Date().getTime() - _time) % duration) / duration;
|
|
window.Cesium.Quaternion.fromAxisAngle(_scratchCartesian3Normal, tempTime * window.Cesium.Math.PI * 2, _RotateQ);
|
|
window.Cesium.Matrix3.fromQuaternion(_RotateQ, _RotateM);
|
|
window.Cesium.Matrix3.multiplyByVector(_RotateM, _scratchCartesian3Normal1, _scratchCartesian3Normal1);
|
|
window.Cesium.Cartesian3.normalize(_scratchCartesian3Normal1, _scratchCartesian3Normal1);
|
|
return _scratchCartesian3Normal1;
|
|
},
|
|
u_scanColor: scanColor,
|
|
},
|
|
});
|
|
viewer.scene.postProcessStages.add(ScanPostStage);
|
|
|
|
return ScanPostStage;
|
|
}
|
|
|
|
function getRadarScanShader() {
|
|
//雷达扫描线效果Shader
|
|
let scanSegmentShader =
|
|
'uniform sampler2D colorTexture;\n' +
|
|
'uniform sampler2D depthTexture;\n' +
|
|
'varying vec2 v_textureCoordinates;\n' +
|
|
'uniform vec4 u_scanCenterEC;\n' +
|
|
'uniform vec3 u_scanPlaneNormalEC;\n' +
|
|
'uniform vec3 u_scanLineNormalEC;\n' +
|
|
'uniform float u_radius;\n' +
|
|
'uniform vec4 u_scanColor;\n' +
|
|
'vec4 toEye(in vec2 uv, in float depth)\n' +
|
|
' {\n' +
|
|
' vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n' +
|
|
' vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n' +
|
|
' posInCamera =posInCamera / posInCamera.w;\n' +
|
|
' return posInCamera;\n' +
|
|
' }\n' +
|
|
'bool isPointOnLineRight(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n' +
|
|
'{\n' +
|
|
'vec3 v01 = testPt - ptOnLine;\n' +
|
|
'normalize(v01);\n' +
|
|
'vec3 temp = cross(v01, lineNormal);\n' +
|
|
'float d = dot(temp, u_scanPlaneNormalEC);\n' +
|
|
'return d > 0.5;\n' +
|
|
'}\n' +
|
|
'vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n' +
|
|
'{\n' +
|
|
'vec3 v01 = point -planeOrigin;\n' +
|
|
'float d = dot(planeNormal, v01) ;\n' +
|
|
'return (point - planeNormal * d);\n' +
|
|
'}\n' +
|
|
'float distancePointToLine(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n' +
|
|
'{\n' +
|
|
'vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);\n' +
|
|
'return length(tempPt - ptOnLine);\n' +
|
|
'}\n' +
|
|
'float getDepth(in vec4 depth)\n' +
|
|
'{\n' +
|
|
'float z_window = czm_unpackDepth(depth);\n' +
|
|
'z_window = czm_reverseLogDepth(z_window);\n' +
|
|
'float n_range = czm_depthRange.near;\n' +
|
|
'float f_range = czm_depthRange.far;\n' +
|
|
'return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n' +
|
|
'}\n' +
|
|
'void main()\n' +
|
|
'{\n' +
|
|
'gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n' +
|
|
'float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n' +
|
|
'vec4 viewPos = toEye(v_textureCoordinates, depth);\n' +
|
|
'vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n' +
|
|
'float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n' +
|
|
'float twou_radius = u_radius * 2.0;\n' +
|
|
'if(dis < u_radius)\n' +
|
|
'{\n' +
|
|
'float f0 = 1.0 -abs(u_radius - dis) / u_radius;\n' +
|
|
'f0 = pow(f0, 64.0);\n' +
|
|
'vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;\n' +
|
|
'float f = 0.0;\n' +
|
|
'if(isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz))\n' +
|
|
'{\n' +
|
|
'float dis1= length(prjOnPlane.xyz - lineEndPt);\n' +
|
|
'f = abs(twou_radius -dis1) / twou_radius;\n' +
|
|
'f = pow(f, 3.0);\n' +
|
|
'}\n' +
|
|
'gl_FragColor = mix(gl_FragColor, u_scanColor, f + f0);\n' +
|
|
'}\n' +
|
|
'}\n';
|
|
return scanSegmentShader;
|
|
}
|
|
|
|
function clearObj(obj, type) {
|
|
//删除cesium对象
|
|
switch (type) {
|
|
case 'postProcessStages':
|
|
_viewer.value.postProcessStages.removeAll();
|
|
/* var stages = this._viewer.postProcessStages._stages;
|
|
for (var i = 0; i < stages.length; i++) {
|
|
if (stages[i]._name === obj) {
|
|
this._viewer.postProcessStages.remove(stages[i]);
|
|
}
|
|
} */
|
|
break;
|
|
case 'entities':
|
|
// console.log('viewer.entities._entities._array', this._viewer.entities._entities._array);
|
|
var entitys = _viewer.value.entities._entities._array;
|
|
for (var i = 0; i < entitys.length; i++) {
|
|
if (entitys[i]._name === obj) {
|
|
_viewer.value.entities.remove(entitys[i]);
|
|
i--;
|
|
}
|
|
}
|
|
break;
|
|
case 'ref':
|
|
for (var key in window.$earth.sceneTree.root.children) {
|
|
if (window.$earth.sceneTree.root.children[key].ref == obj) {
|
|
window.$earth.sceneTree.root.children.splice(key, 1);
|
|
}
|
|
}
|
|
break;
|
|
case 'primitives':
|
|
if (obj == 'uav') {
|
|
_viewer.value.entities.remove(window._uavRealTimePath);
|
|
window._uavPrimitive.destroy();
|
|
window.$earth.camera.immersion.enabled = true; // 禁用键盘漫游
|
|
document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[3].innerHTML = '键盘漫游(开启)';
|
|
}
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
|
|
function warnInfoMan() {
|
|
WarnListShow.value = !WarnListShow.value;
|
|
//显隐控制
|
|
// $('.infoList').css('visibility') == 'hidden'
|
|
// ? $('.infoList').css({ visibility: 'visible', opacity: 1 })
|
|
// : $('.infoList').css({ visibility: 'hidden', opacity: 0 })
|
|
// if ($('.infoList').css('visibility') == 'visible') {
|
|
// console.log(proxy);
|
|
// $mitt.emit('getWarnData')
|
|
// $mitt.emit('getDealData', 'visible')
|
|
// } else {
|
|
// $mitt.emit('getDealData', 'hidden')
|
|
// }
|
|
$mitt.emit('radioChangeBtnShow', (isShow) => {
|
|
let mapSceneModalOptions: any = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children;
|
|
if (isShow) {
|
|
mapSceneModalOptions[1].innerText = '地图切换(开启)';
|
|
mapSceneModalOptions[2].innerText = '指北针(开启)';
|
|
mapSceneModalOptions[3].innerText = '比例尺(开启)';
|
|
} else {
|
|
mapSceneModalOptions[1].innerText = '地图切换(关闭)';
|
|
mapSceneModalOptions[2].innerText = '指北针(关闭)';
|
|
mapSceneModalOptions[3].innerText = '比例尺(关闭)';
|
|
}
|
|
});
|
|
window.$uia.controls.statusBar.show = !window.$uia.controls.statusBar.show; //状态栏显隐控制 $(".xbsjcesium + div").toggle(1200);
|
|
window.$earth.camera.navigator.showCompass = !window.$earth.camera.navigator.showCompass; //指北针显隐控制
|
|
window.$earth.camera.navigator.showDistanceLegend = !window.$earth.camera.navigator.showDistanceLegend; //比例尺显隐控制
|
|
}
|
|
|
|
function twoTothreeD() {
|
|
if (sceneMode3D.value) {
|
|
/* if (window.$earth != undefined) {
|
|
window.$earth.destroy();
|
|
window.$earth = undefined;
|
|
} */
|
|
//清除鼠标事件
|
|
$mitt.emit('removeHandler');
|
|
//清除地图实体
|
|
/* this._viewer.postProcessStages.removeAll();
|
|
this._viewer.entities.removeAll();
|
|
this._viewer.scene.primitives.removeAll();
|
|
this._viewer.scene.groundPrimitives.removeAll(); */
|
|
window.$earth.sceneTree.root.children.splice(1, window.$earth.sceneTree.root.children.length);
|
|
//切换二维
|
|
_viewer.value.scene.morphTo2D(0);
|
|
} else {
|
|
//重建地图实体
|
|
$mitt.emit('createBBHLine');
|
|
// callUtil.$emit('createRealTimeObj');
|
|
$mitt.emit('listenMouseHandler');
|
|
//切换三维
|
|
_viewer.value.scene.morphTo3D(0);
|
|
// const position = earthUtils.degreeToRadianInLngLatHeight(113.50458, 22.10551, 0)
|
|
// const rotation = earthUtils.degreeToRadianInLngLatHeight(358.84, -51.29, 359.99)
|
|
// window.$earth.camera.flyTo(position, 18000, rotation, 5) // 定点飞入
|
|
}
|
|
sceneMode3D.value = !sceneMode3D.value;
|
|
}
|
|
|
|
function mapZoom(type) {
|
|
// 获取当前镜头位置的笛卡尔坐标
|
|
let cameraPosition = _viewer.value.camera.position;
|
|
// 获取当前坐标系标准
|
|
let ellipsoid = _viewer.value.scene.globe.ellipsoid;
|
|
// 根据坐标系标准，将笛卡尔坐标转换为地理坐标
|
|
let cartographic = ellipsoid.cartesianToCartographic(cameraPosition);
|
|
// 获取镜头的高度
|
|
let height = cartographic.height;
|
|
// 根据上面当前镜头的位置，获取该中心位置的经纬度坐标和角度
|
|
let centerLon = parseFloat(window.Cesium.Math.toDegrees(cartographic.longitude).toFixed(8));
|
|
let centerLat = parseFloat(window.Cesium.Math.toDegrees(cartographic.latitude).toFixed(8));
|
|
let heading = parseFloat(window.Cesium.Math.toDegrees(_viewer.value.camera.heading).toFixed(2));
|
|
let pitch = parseFloat(window.Cesium.Math.toDegrees(_viewer.value.camera.pitch).toFixed(2));
|
|
let roll = parseFloat(window.Cesium.Math.toDegrees(_viewer.value.camera.roll).toFixed(2));
|
|
|
|
switch (type) {
|
|
case 'in':
|
|
_viewer.value.camera.flyTo({
|
|
destination: window.Cesium.Cartesian3.fromDegrees(centerLon, centerLat, height / 1.8),
|
|
orientation: {
|
|
heading: window.Cesium.Math.toRadians(heading),
|
|
pitch: window.Cesium.Math.toRadians(pitch),
|
|
roll: window.Cesium.Math.toRadians(roll),
|
|
},
|
|
duration: 1.0,
|
|
});
|
|
break;
|
|
case 'out':
|
|
_viewer.value.camera.flyTo({
|
|
destination: window.Cesium.Cartesian3.fromDegrees(centerLon, centerLat, height * 1.8),
|
|
orientation: {
|
|
heading: window.Cesium.Math.toRadians(heading),
|
|
pitch: window.Cesium.Math.toRadians(pitch),
|
|
roll: window.Cesium.Math.toRadians(roll),
|
|
},
|
|
duration: 1.0,
|
|
});
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
|
|
function addUAV(uav_position) {
|
|
window.$earth.camera.immersion.enabled = false; // 禁用键盘漫游
|
|
let keyboardRoam = (document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[5].innerText = '键盘漫游(关闭)');
|
|
|
|
//控制鼠标焦点在该模型上
|
|
var canvas = _viewer.value.canvas;
|
|
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
|
|
canvas.addEventListener('click', function () {
|
|
canvas.focus();
|
|
});
|
|
canvas.focus();
|
|
//画实时路径
|
|
var pathPosition = new window.Cesium.SampledPositionProperty();
|
|
window._uavRealTimePath = _viewer.value.entities.add({
|
|
position: pathPosition,
|
|
name: 'path',
|
|
path: {
|
|
show: true,
|
|
leadTime: 0,
|
|
trailTime: 60,
|
|
width: 10,
|
|
resolution: 1,
|
|
material: new window.Cesium.PolylineGlowMaterialProperty({
|
|
glowPower: 0.2,
|
|
taperPower: 0.2,
|
|
color: window.Cesium.Color.PALEGOLDENROD,
|
|
}),
|
|
},
|
|
});
|
|
|
|
var scene = _viewer.value.scene;
|
|
var camera = _viewer.value.camera;
|
|
var controller = scene.screenSpaceCameraController;
|
|
var r = 0;
|
|
var center = new window.Cesium.Cartesian3();
|
|
|
|
var hpRoll = new window.Cesium.HeadingPitchRoll();
|
|
var hpRange = new window.Cesium.HeadingPitchRange();
|
|
var speed = 7;
|
|
var deltaRadians = window.Cesium.Math.toRadians(3.0);
|
|
|
|
var position = window.Cesium.Cartesian3.fromDegrees(121.533469, 31.224765, 300.0);
|
|
var speedVector = new window.Cesium.Cartesian3();
|
|
var fixedFrameTransform = window.Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
|
|
window._uavPrimitive = scene.primitives.add(
|
|
window.Cesium.Model.fromGltf({
|
|
id: 'plane',
|
|
url: window._CONFIG['staticDomainURL'] + '/uav.gltf',
|
|
modelMatrix: window.Cesium.Transforms.headingPitchRollToFixedFrame(
|
|
uav_position,
|
|
hpRoll,
|
|
window.Cesium.Ellipsoid.WGS84,
|
|
fixedFrameTransform
|
|
),
|
|
minimumPixelSize: 1000,
|
|
maximumScale: 10,
|
|
})
|
|
);
|
|
//监听键盘事件
|
|
document.addEventListener('keydown', function (e) {
|
|
switch (e.keyCode) {
|
|
case 40:
|
|
if (e.shiftKey) {
|
|
// speed down
|
|
speed = Math.max(--speed, 1);
|
|
} else {
|
|
// pitch down
|
|
hpRoll.pitch -= deltaRadians;
|
|
if (hpRoll.pitch < -window.Cesium.Math.TWO_PI) {
|
|
hpRoll.pitch += window.Cesium.Math.TWO_PI;
|
|
}
|
|
}
|
|
break;
|
|
case 38:
|
|
if (e.shiftKey) {
|
|
// speed up
|
|
speed = Math.min(++speed, 100);
|
|
} else {
|
|
// pitch up
|
|
hpRoll.pitch += deltaRadians;
|
|
if (hpRoll.pitch > window.Cesium.Math.TWO_PI) {
|
|
hpRoll.pitch -= window.Cesium.Math.TWO_PI;
|
|
}
|
|
}
|
|
break;
|
|
case 39:
|
|
if (e.shiftKey) {
|
|
// roll right
|
|
hpRoll.roll += deltaRadians;
|
|
if (hpRoll.roll > window.Cesium.Math.TWO_PI) {
|
|
hpRoll.roll -= window.Cesium.Math.TWO_PI;
|
|
}
|
|
} else {
|
|
// turn right
|
|
hpRoll.heading += deltaRadians;
|
|
if (hpRoll.heading > window.Cesium.Math.TWO_PI) {
|
|
hpRoll.heading -= window.Cesium.Math.TWO_PI;
|
|
}
|
|
}
|
|
break;
|
|
case 37:
|
|
if (e.shiftKey) {
|
|
// roll left until
|
|
hpRoll.roll -= deltaRadians;
|
|
if (hpRoll.roll < 0.0) {
|
|
hpRoll.roll += window.Cesium.Math.TWO_PI;
|
|
}
|
|
} else {
|
|
// turn left
|
|
hpRoll.heading -= deltaRadians;
|
|
if (hpRoll.heading < 0.0) {
|
|
hpRoll.heading += window.Cesium.Math.TWO_PI;
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
}
|
|
});
|
|
|
|
_viewer.value.scene.preUpdate.addEventListener(function (scene, time) {
|
|
speedVector = window.Cesium.Cartesian3.multiplyByScalar(window.Cesium.Cartesian3.UNIT_X, speed / 10, speedVector);
|
|
position = window.Cesium.Matrix4.multiplyByPoint(window._uavPrimitive.modelMatrix, speedVector, position);
|
|
pathPosition.addSample(window.Cesium.JulianDate.now(), position);
|
|
window.Cesium.Transforms.headingPitchRollToFixedFrame(
|
|
position,
|
|
hpRoll,
|
|
window.Cesium.Ellipsoid.WGS84,
|
|
fixedFrameTransform,
|
|
window._uavPrimitive.modelMatrix
|
|
);
|
|
});
|
|
}
|
|
|
|
function retrospect() {
|
|
// // 打开对应的创建模型窗口
|
|
// this.$root.$earthUI.showPropertyWindow(
|
|
// {},
|
|
// {
|
|
// component: notificationModel,
|
|
// }
|
|
// )
|
|
notificationModelShow.value = !notificationModelShow.value;
|
|
}
|
|
|
|
//绘画图形
|
|
function drawShape() {
|
|
//基本绘图没有被使用中，则关闭
|
|
if (drawShapeMilitaryShow.value && store.shapeUsing == false) {
|
|
drawShapeMilitaryShow.value = false;
|
|
}
|
|
//清空数据
|
|
drawShapePackage.value = null;
|
|
drawShapeShow.value = !drawShapeShow.value;
|
|
}
|
|
//绘画图形-军事态势
|
|
function drawShapeMilitary() {
|
|
//基本绘图没有被使用中，则关闭
|
|
if (drawShapeShow.value && store.shapeUsing == false) {
|
|
drawShapeShow.value = false;
|
|
}
|
|
drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value;
|
|
}
|
|
|
|
function openPopModal(id, e) {
|
|
let popModal: any = document.getElementById(id);
|
|
let node = e.target;
|
|
if (node.nodeName === 'IMG') {
|
|
node = node.parentNode;
|
|
}
|
|
// 清除所有的选中状态除了当前点击的
|
|
closePopModal('ignoreMe', popModal, node);
|
|
|
|
let nodeClassList = node.classList;
|
|
// 鼠标点击的p节点存在 tbImgHover 类侧删除，不存在侧添加，显示/隐藏 点击边框
|
|
nodeClassList.contains('tbImgHover') ? nodeClassList.remove('tbImgHover') : nodeClassList.add('tbImgHover');
|
|
|
|
// 气泡框
|
|
let popModalDisplay = popModal.style.display;
|
|
// 气泡框已经显示侧隐藏，不存在侧显示
|
|
if (popModalDisplay === '') {
|
|
popModal.style.display = 'none';
|
|
}
|
|
popModalDisplay === 'block' ? (popModal.style.display = 'none') : (popModal.style.display = 'block');
|
|
}
|
|
|
|
function closePopModal(type, menu: any = null, button: any = null) {
|
|
let popModalList: any = document.getElementsByClassName('popModal');
|
|
let tbImgHoverList: any = document.getElementsByClassName('tbImgHover');
|
|
switch (type) {
|
|
case 'all':
|
|
// 关闭所有
|
|
// 关闭按钮点击效果
|
|
for (const tbImgHoverListElement of tbImgHoverList) {
|
|
tbImgHoverListElement.classList.remove('tbImgHover');
|
|
}
|
|
// 关闭所有气泡框
|
|
for (const popModalListElement of popModalList) {
|
|
popModalListElement.style.display = 'none';
|
|
}
|
|
break;
|
|
case 'ignoreMe':
|
|
// 忽略当前点击的
|
|
for (const taImgHoverElement of tbImgHoverList) {
|
|
if (taImgHoverElement !== button) {
|
|
taImgHoverElement.classList.remove('tbImgHover');
|
|
}
|
|
}
|
|
for (const popModalElement of popModalList) {
|
|
if (popModalElement !== menu) {
|
|
popModalElement.style.display = 'none';
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
let popModal: any = document.getElementById(menu);
|
|
button.classList.remove('tbImgHover');
|
|
popModal.style.display = 'none';
|
|
break;
|
|
}
|
|
}
|
|
|
|
function openCreateModel(type) {
|
|
// let com = null
|
|
$mitt.emit('windowCancel');
|
|
switch (type) {
|
|
case 'addModelWin':
|
|
// $mitt.emit('windowCancel')
|
|
// com = addModelWin
|
|
// console.log("proxy");
|
|
addModelWinShow.value = true;
|
|
break;
|
|
case 'roamPathList':
|
|
// $mitt.emit('windowCancel')
|
|
// com = roamPathList
|
|
roamPathListShow.value = true;
|
|
break;
|
|
case 'keyControlAreaList':
|
|
keyControlAreaListShow.value = true;
|
|
break;
|
|
}
|
|
// const props = this.getBind()
|
|
// const { setLabelStatus } = props
|
|
// // 打开对应的创建模型窗口
|
|
// this.$root.$earthUI.showPropertyWindow(
|
|
// {
|
|
// setLabelStatus,
|
|
// },
|
|
// {
|
|
// // component: addModelModal,
|
|
// component: com,
|
|
// }
|
|
// )
|
|
}
|
|
|
|
// 添加监控点
|
|
function addMonitorPoint(data= false) {
|
|
addMonitorPointComShow.value = true;
|
|
msCameraSiteHandle.value = data;
|
|
}
|
|
// 添加微波
|
|
function addWave() {
|
|
addWaveComShow.value = true;
|
|
}
|
|
// 添加雷达
|
|
function addRadar() {
|
|
addRadarComShow.value = true;
|
|
}
|
|
// 添加防区, msMapLineHandler标识 后台防区管理调用
|
|
function addArea(msMapLineHandler: any = {}) {
|
|
// console.log("添加防区",msMapLineHandler);
|
|
let objConfig: any = {}
|
|
if (typeof msMapLineHandler === 'object' && Object.keys(msMapLineHandler).length != 0 && msMapLineHandler.create){
|
|
//创建 -后台防区管理调用
|
|
objConfig.from = "msMapLineHandler.create";
|
|
}
|
|
else if (typeof msMapLineHandler === 'object' && Object.keys(msMapLineHandler).length != 0) {
|
|
//编辑 -后台防区管理调用
|
|
//不是空对象，则为编辑状态
|
|
// console.log("msMapLineHandler",msMapLineHandler);
|
|
let config = {
|
|
id: msMapLineHandler.id,
|
|
name: msMapLineHandler.name,
|
|
sceneId: msMapLineHandler.sceneId,
|
|
// guid: msMapLineHandler.lineCode,
|
|
loop: Boolean(msMapLineHandler.isLoop),
|
|
depthTest: Boolean(msMapLineHandler.isDepthCheck),
|
|
width: msMapLineHandler.width,
|
|
arcType: msMapLineHandler.interpolation,
|
|
positions: JSON.parse(msMapLineHandler.positions),
|
|
material: JSON.parse(msMapLineHandler.material),
|
|
from : "msMapLineHandler.edit"
|
|
}
|
|
return addPolyline(config)
|
|
}
|
|
|
|
$mitt.emit('drawShapeShow', { show: true, title: '防区创建工具', from: 'addArea' });
|
|
$mitt.on('addAreaFinished', (t: any) => {
|
|
// console.log('addAreaFinished', t);
|
|
//t 为drawShape传过来的临时图形
|
|
t.creating = true;
|
|
|
|
// 监控t数据，完成创建后调用后续方法
|
|
window.XE.MVVM.watch(t, 'creating', (n: any) => {
|
|
// console.log('n', n);
|
|
|
|
if (n == false) {
|
|
//面
|
|
// let positions: any = [];
|
|
if (t._polygon) {
|
|
objConfig.positions = t._polygon._polyline.positions;
|
|
}
|
|
//线
|
|
else if (t._polyline) {
|
|
objConfig.positions = t._polyline.positions;
|
|
} else {
|
|
objConfig.positions = t.positions;
|
|
}
|
|
|
|
//销毁临时图形
|
|
t.destroy();
|
|
/**
|
|
* 控制时序，处理完数据再调用方法 addPolyline
|
|
* 否则会出现在数据滞后在图形创建时，导致数据错误
|
|
*
|
|
*/
|
|
nextTick(() => {
|
|
addPolyline(objConfig);
|
|
});
|
|
} else {
|
|
}
|
|
});
|
|
|
|
window.XE.MVVM.watch(t, 'positions', (n: any) => {
|
|
// console.log('positions', n);
|
|
});
|
|
});
|
|
}
|
|
/**
|
|
* @params 需要调用 addArea 方法进行绘图，获取坐标点position
|
|
*/
|
|
function addPolyline(objConf: any = null) {
|
|
// console.log('positions', positions);
|
|
|
|
|
|
// 关闭此窗体
|
|
// cancel();
|
|
// 创建防区
|
|
const currentModel = new window.XE.Obj.Polyline(window.$earth);
|
|
// 设置配置参数
|
|
const objConfig: any = {
|
|
positions: objConf.positions,
|
|
};
|
|
// 融合数据
|
|
Object.assign(objConfig, objConf);
|
|
console.log("objConfig",objConfig);
|
|
|
|
// 插入数据
|
|
currentModel.xbsjFromJSON(objConfig);
|
|
console.log('currentModel', currentModel);
|
|
// 获取地图ui对象
|
|
const earthUI = window.$uia;
|
|
|
|
// 打开一个防区编辑ui窗体
|
|
earthUI.showPropertyWindow(currentModel);
|
|
nextTick(() => {
|
|
// 主要ui窗口
|
|
const mainUI = earthUI._vm.$refs.mainUI;
|
|
// 所有打开的ui窗口Ref值
|
|
const windowsAttrList = Object.keys(mainUI.$refs);
|
|
// 寻找当前窗体的工具对象
|
|
const modelToolKey = windowsAttrList.filter((f) => f.indexOf(currentModel.guid) > -1)[0];
|
|
const modelTool = mainUI.$refs[modelToolKey][0];
|
|
// 当前窗体的元素
|
|
const el = modelTool.$el;
|
|
//样式
|
|
el.children[2].style.padding = '0px';
|
|
el.children[2].style.transition = 'none';
|
|
|
|
//加入区域场景选择器
|
|
let divCustom = document.createElement("div");
|
|
divCustom.setAttribute("data-v-74b863e5", "");
|
|
divCustom.setAttribute("class", "flatten");
|
|
divCustom.setAttribute("style", "display: flex; margin-bottom: 20px;");
|
|
divCustom.innerHTML =
|
|
`
|
|
<label data-v-74b863e5="">所属区域</label>
|
|
`
|
|
let instance: ReturnType<typeof createVNode> | null = null;
|
|
// 创建虚拟节点,传入模型的数据
|
|
instance = createVNode(seneIdTreeSelect,{currentModel});
|
|
// 渲染
|
|
render(instance, divCustom);
|
|
// 父节点
|
|
let fatherNode = el.children[2].children[0].children[0]
|
|
// 插入位置
|
|
let insertBeforeWhich = el.children[2].children[0].children[0].children[1];
|
|
fatherNode.insertBefore(divCustom,insertBeforeWhich);
|
|
|
|
// 取消按钮元素
|
|
const cancelBtn = el.children[3].children[0];
|
|
// 确认按钮元素
|
|
const okBtn = el.children[3].children[1];
|
|
// 右上角关闭按钮元素
|
|
const xBtn = el.children[1].children[1];
|
|
// 设置确认按钮点击事件
|
|
okBtn.onclick = function () {
|
|
|
|
//后台防区管理调用，直接return终止
|
|
if(currentModel.from == "msMapLineHandler.edit" || currentModel.from == "msMapLineHandler.create"){
|
|
$mitt.emit('toMsMapLineForm',currentModel)
|
|
return
|
|
}
|
|
|
|
// 判断所属区域
|
|
if (!currentModel.sceneId) {
|
|
createMessage.warning('请选择所属区域', 2);
|
|
return;
|
|
}
|
|
$mitt.emit('windowCancel');
|
|
// 提交对象
|
|
const submitData: any = {};
|
|
// 路径为空，无法提交
|
|
const poistions = currentModel.positions;
|
|
if (poistions.length <= 0) {
|
|
createMessage.warning('路径为空，无法创建', 2);
|
|
return;
|
|
}
|
|
// 模型名称
|
|
submitData.name = currentModel.name;
|
|
// 场景区域
|
|
submitData.sceneId = currentModel.sceneId;
|
|
// 线段编码
|
|
submitData.lineCode = currentModel.guid;
|
|
// 首尾相连属性
|
|
submitData.isLoop = Number(currentModel.loop);
|
|
// 深度检查
|
|
submitData.isDepthCheck = Number(currentModel.depthTest);
|
|
// 宽度
|
|
submitData.width = currentModel.width;
|
|
// 插值方式
|
|
submitData.interpolation = currentModel.arcType;
|
|
// 路径数组
|
|
submitData.positions = JSON.stringify(poistions);
|
|
// 材质
|
|
submitData.material = JSON.stringify(currentModel.material)
|
|
// 材质类型
|
|
switch (currentModel.material.type) {
|
|
// 实线
|
|
case 'XbsjColorMaterial':
|
|
// 实线材质0
|
|
submitData.materialType = 0;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjColorMaterial.color);
|
|
// 以下为没有属性，所以赋予默认值
|
|
submitData.intervalColor = null;
|
|
submitData.dashLength = 0;
|
|
submitData.dashStyle = 0;
|
|
break;
|
|
// 虚线
|
|
case 'XbsjPolylineDashMaterial':
|
|
// 虚线材质1
|
|
submitData.materialType = 1;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.color);
|
|
// 间隔颜色
|
|
submitData.intervalColor = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.gapColor);
|
|
// 虚线长度
|
|
submitData.dashLength = currentModel.material.XbsjPolylineDashMaterial.dashLength;
|
|
// 虚线样式
|
|
submitData.dashStyle = currentModel.material.XbsjPolylineDashMaterial.dashPattern;
|
|
break;
|
|
// 箭头线
|
|
case 'XbsjPolylineArrowMaterial':
|
|
// 箭头线2
|
|
submitData.materialType = 2;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjPolylineArrowMaterial.color);
|
|
// 以下为没有的属性
|
|
submitData.intervalColor = null;
|
|
submitData.dashLength = 0;
|
|
submitData.dashStyle = 0;
|
|
break;
|
|
// 轨迹线
|
|
case 'XbsjODLineMaterial':
|
|
// 轨迹线
|
|
submitData.materialType = 3;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjODLineMaterial.color);
|
|
// 没有的属性
|
|
submitData.intervalColor = null;
|
|
submitData.dashLength = 0;
|
|
submitData.dashStyle = 0;
|
|
// 循环周期
|
|
submitData.cycleFrame = currentModel.material.XbsjODLineMaterial.totoalFrameCount;
|
|
break;
|
|
}
|
|
// 提交防区数据
|
|
defHttp
|
|
.post({ url: '/military/msMapLine/add', params: submitData }, { isTransformResponse: false })
|
|
.then((response) => {
|
|
// 成功后挂载节点到树中
|
|
if (response.success) {
|
|
// 记录id
|
|
currentModel.id = response.result;
|
|
// 设置父节点
|
|
const parent = window.$earth.sceneTree.$refs[currentModel.sceneId];
|
|
// 生成叶子节点
|
|
const leaf = new window.XE.SceneTree.Leaf(currentModel);
|
|
// 设置叶子节点标识
|
|
leaf.ref = response.result;
|
|
// 挂载上树
|
|
window.$earth.sceneTree.root.children.push(leaf);
|
|
// 隐藏叶子节点的dom节点
|
|
nextTick(() => {
|
|
$('#earthContainer>div>div>div:nth-child(5)')
|
|
.children('div')
|
|
.eq(1)
|
|
.children()
|
|
.eq(0)
|
|
.children()
|
|
.eq(0)
|
|
.children()
|
|
.each((index, element) => {
|
|
if (index <= 1) {
|
|
return;
|
|
}
|
|
const paddingLeft = $(element).children().eq(0).css('padding-left');
|
|
if (paddingLeft === '10px') {
|
|
$(element).css('display', 'none');
|
|
}
|
|
});
|
|
});
|
|
// 生成显示在树上的节点，此为虚假的节点，关联关系为ref一个为 node_ref 一个为ref
|
|
const node = {
|
|
ref: 'node_' + response.result,
|
|
title:'<防区>'+ currentModel.name,
|
|
expand: false,
|
|
children: [
|
|
{
|
|
expand: false,
|
|
title: '监控点位',
|
|
ref: 'monitor_' + window.guid(),
|
|
children: [],
|
|
},
|
|
{
|
|
expand: false,
|
|
title: '雷达点位',
|
|
ref: 'ldList_' + window.guid(),
|
|
children: [],
|
|
},
|
|
{
|
|
expand: false,
|
|
title: '微波点位',
|
|
ref: 'wbList_' + window.guid(),
|
|
children: [],
|
|
},
|
|
],
|
|
};
|
|
// 挂载并显示到树上
|
|
// window.$earth.sceneTree.$refs.areas.children.push(node);
|
|
parent.children.push(node);
|
|
// 提示用户
|
|
createMessage.success('添加成功！', 2);
|
|
} else {
|
|
throw '新增防区数据出错';
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
createMessage.error('新增防区数据出错', 2);
|
|
});
|
|
};
|
|
// 取消按钮
|
|
cancelBtn.onclick = xBtn.onclick = function () {
|
|
//后台防区管理调用，直接return终止
|
|
if(currentModel.from == "msMapLineHandler.edit" || currentModel.from == "msMapLineHandler.create"){
|
|
$mitt.emit('toMsMapLineForm')
|
|
return
|
|
}
|
|
$mitt.off('windowCancel');
|
|
// 消耗当前窗体的dom节点
|
|
el.remove();
|
|
// 消耗当前创建的对象
|
|
currentModel.destroy();
|
|
//组件销毁前 关闭mitt
|
|
$mitt.emit('drawShapeShow', { show: false });
|
|
$mitt.off('addAreaFinished');
|
|
};
|
|
});
|
|
return currentModel;
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
// vue程序销毁时，需要清理相关资源
|
|
proxy._disposers.forEach((d) => d());
|
|
proxy._disposers.length = 0;
|
|
_viewer.value = _viewer.value && _viewer.value.destroy();
|
|
window._uavRealTimePath = undefined;
|
|
window._uavPrimitive = undefined;
|
|
$mitt.off('warnInfoMan');
|
|
$mitt.off('addAreaFinished');
|
|
$mitt.off('drawShapeShow');
|
|
$mitt.off('msMapLineHandler');
|
|
$mitt.off('msCameraSiteHandle');
|
|
});
|
|
|
|
return {
|
|
show,
|
|
title,
|
|
fullscreen,
|
|
exitfullscreen,
|
|
twothreeDchange,
|
|
mapchange,
|
|
zoomin,
|
|
zoomout,
|
|
reset,
|
|
celiang,
|
|
specialEffects,
|
|
warnInfo,
|
|
history,
|
|
eventNotif,
|
|
drawShapeIMG,
|
|
_viewer,
|
|
modalVisible,
|
|
isFullScren,
|
|
sceneMode3D,
|
|
measureMentType,
|
|
imageryskin,
|
|
url,
|
|
selected,
|
|
mapObj_,
|
|
orgCode,
|
|
eventData,
|
|
// getEventNum,
|
|
eventDataNum,
|
|
getEventData,
|
|
click,
|
|
cancel,
|
|
screen,
|
|
layerMan,
|
|
mapMan,
|
|
compass,
|
|
scale,
|
|
capture,
|
|
viewAngle,
|
|
selectMap,
|
|
terrainDepth,
|
|
keyboardRoam,
|
|
terrainDEM,
|
|
resetEarth,
|
|
clearResults,
|
|
getRadarScanShader,
|
|
drawWall,
|
|
addRadarScanPostStage,
|
|
clearObj,
|
|
twoTothreeD,
|
|
warnInfoMan,
|
|
mapZoom,
|
|
addUAV,
|
|
retrospect,
|
|
openPopModal,
|
|
closePopModal,
|
|
openCreateModel,
|
|
drawShape,
|
|
drawShapeMilitary,
|
|
addMonitorPoint,
|
|
addWave,
|
|
addRadar,
|
|
addArea,
|
|
addModelWinShow,
|
|
addMonitorPointComShow,
|
|
msCameraSiteHandle,
|
|
addWaveComShow,
|
|
addRadarComShow,
|
|
roamPathListShow,
|
|
keyControlAreaListShow,
|
|
notificationModelShow,
|
|
WarnListShow,
|
|
drawShapeShow,
|
|
drawShapePackage,
|
|
drawShapeMilitaryShow,
|
|
drawShapeMilitaryIMG,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.barbox {
|
|
left: 0 !important;
|
|
top: 0 !important;
|
|
/* height: 600px !important; */
|
|
width: 65px !important;
|
|
}
|
|
|
|
.toolbar > .xbsj-model-box {
|
|
background: -webkit-linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
|
|
background: -o-linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
|
|
background: -moz-linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
|
|
background: linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* .toolbar .xbsj-model-close {
|
|
display: none ;
|
|
} */
|
|
|
|
/* .toolbar .xbsj-model-header .xbsj-model-arrow {
|
|
right: 25px;
|
|
} */
|
|
#toolbarWindow .xbsj-model-header .xbsj-model-arrow {
|
|
right: 25px;
|
|
}
|
|
|
|
.tbImg p {
|
|
width: 45px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
font-size: 0px !important;
|
|
}
|
|
|
|
.tbImg p:hover {
|
|
cursor: pointer;
|
|
background: url('../../assets/earthMap/toolbar/nav_bg_act.png') no-repeat;
|
|
background-size: 100% 100% !important;
|
|
color: #00ffe4 !important;
|
|
}
|
|
|
|
.tbImg img {
|
|
width: 28px;
|
|
margin: 4px;
|
|
align-items: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tbImgHover {
|
|
background: url('../../assets/earthMap/toolbar/nav_bg_act.png') no-repeat;
|
|
background-size: 100% 100% !important;
|
|
color: #00ffe4 !important;
|
|
}
|
|
|
|
.alarm {
|
|
position: relative;
|
|
/*width: 60px;*/
|
|
/*height: 60px;*/
|
|
/*margin: 60px;*/
|
|
}
|
|
|
|
.divright {
|
|
position: absolute;
|
|
left: 60%;
|
|
color: white;
|
|
font-size: 10px;
|
|
background-color: red;
|
|
width: 17px;
|
|
height: 17px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
/* 气泡窗 */
|
|
.popModal {
|
|
margin: 20px auto;
|
|
padding: 5px;
|
|
position: absolute;
|
|
left: 65px;
|
|
top: 265px;
|
|
|
|
width: 100px;
|
|
line-height: 40px;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
/* border-radius: 5px; */
|
|
filter: alpha(opacity=50);
|
|
opacity: 0.8;
|
|
border: 1px solid RGBA(12, 177, 177, 0.9);
|
|
background: RGBA(12, 177, 177, 0.9);
|
|
display: none;
|
|
}
|
|
|
|
.popModal::after {
|
|
/* 箭头靠下边 */
|
|
content: '';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
top: 10px;
|
|
left: -15px;
|
|
border-left: 20px solid transparent;
|
|
border-top: 15px solid RGBA(12, 177, 177, 1);
|
|
}
|
|
|
|
.popModal > ul p {
|
|
cursor: pointer;
|
|
margin-bottom: 0.3em !important;
|
|
}
|
|
|
|
.popModal > ul p:hover {
|
|
background-color: RGBA(12, 222, 222, 1);
|
|
}
|
|
|
|
/* 地图切换列表 */
|
|
.mapBox {
|
|
width: 620px;
|
|
height: 150px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 5%;
|
|
transform: translate(-50%);
|
|
color: #dddddd;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
font-family: 宋体;
|
|
background: RGBA(9, 39, 76, 0.7);
|
|
display: none;
|
|
}
|
|
|
|
.mapBox ul {
|
|
display: flex;
|
|
}
|
|
|
|
.mapBox li {
|
|
list-style: none;
|
|
height: 134px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mapBox .mapBoxBack {
|
|
border: 2px solid;
|
|
border-radius: 4px;
|
|
background: gray;
|
|
margin: 10px;
|
|
}
|
|
|
|
.mapBox .mapBoxBack img {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.mapBox .mapBoxBack span {
|
|
display: inline-block;
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mapBox .highlight {
|
|
border: 2px solid #00ffe4;
|
|
}
|
|
|
|
.mapBoxBack:hover {
|
|
border: 2px solid #00ffe4;
|
|
}
|
|
|
|
#createModelSvg {
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
.xbsjEarthPanel {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
|