<!--
|
* @Description:
|
* @Author: TT
|
* @Date: 2023-02-27 11:30:56
|
* @LastEditTime: 2023-03-06 15:19:16
|
* @LastEditors: TT
|
-->
|
<template>
|
<div class="MapBox">
|
<div class="banner" :class="{ leftMap: screenFlag }">
|
<div id="cesiumContainer"></div>
|
</div>
|
<div class="leftMap" v-if="screenFlag">
|
<div id="cesiumContainer2"></div>
|
</div>
|
|
<div class="boxContent" v-if="popFlag">
|
<div class="popContent1">
|
<div>属性信息</div>
|
<div @click="popFlag = false" class="closeLeftMenu">
|
<span>x</span>
|
</div>
|
</div>
|
|
<div class="popContent">
|
{{ popOption }}
|
</div>
|
<div class="popContent">
|
<video
|
v-if="showImg == 'video'"
|
width="500"
|
height="300"
|
autoplay
|
:src="videoUrl"
|
></video>
|
<img
|
v-if="showImg == 'img'"
|
:src="imageUrl"
|
style="width: 500px; height: 300px"
|
alt=""
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
|
import store from "@/store";
|
import mapView from "../assets/js/mapView.js";
|
import mapDobule from "../assets/js/mapDobule.js";
|
const popOption = ref();
|
const screenFlag = ref(false);
|
const popFlag = ref(false);
|
const videoUrl = ref(null);
|
const imageUrl = ref(null);
|
const showImg = ref(null);
|
const setShowPops = (res) => {
|
imageUrl.value = null;
|
videoUrl.value = null;
|
showImg.value = null;
|
if (res["remarks"] && res["remarks"]._value) {
|
var name = res["name"]._value;
|
var id = res["remarks"]._value;
|
var url = config.popVideo + name + "/" + id;
|
showImg.value = "video";
|
popOption.value = name;
|
videoUrl.value = url;
|
} else if (res["TE_DESC"] && res["TE_DESC"]._value) {
|
popOption.value = res["TE_DESC"]._value;
|
} else {
|
showImg.value = "img";
|
var name = res["name"]._value;
|
var id = res["Id"]._value;
|
var url = config.popImg + name + "/" + id + ".jpg";
|
imageUrl.value = url;
|
popOption.value = name + "_" + id + "号";
|
}
|
popFlag.value = true;
|
};
|
watch(
|
() => store.state.showProperties,
|
(newVal, oldVal) => {
|
if (newVal) {
|
setShowPops(newVal);
|
}
|
},
|
{ immediate: true, deep: true }
|
);
|
watch(
|
() => store.state.showScreenFlag,
|
(newVal, oldVal) => {
|
screenFlag.value = !newVal;
|
if (screenFlag.value) {
|
nextTick(() => {
|
mapDobule.Init();
|
});
|
}
|
},
|
{ immediate: true, deep: true }
|
);
|
onMounted(() => {
|
mapView.init();
|
});
|
onBeforeUnmount(() => {});
|
</script>
|
<style scoped lang="less">
|
.MapBox {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
.banner {
|
width: 100%;
|
height: 100vh;
|
background-size: cover;
|
}
|
.leftMap {
|
width: 50%;
|
height: 100vh;
|
background-size: cover;
|
#cesiumContainer {
|
width: 50%;
|
position: absolute;
|
}
|
#cesiumContainer2 {
|
width: 50%;
|
position: absolute;
|
}
|
}
|
.boxContent {
|
padding: 10px;
|
top: 50%;
|
left: 50%;
|
background: url("../assets/img/menu/listbg.png") no-repeat;
|
background-size: 100% 100%;
|
transform: translate(-50%, -50%);
|
position: absolute;
|
z-index: 40;
|
}
|
.closeLeftMenu {
|
color: #fff;
|
height: 20px;
|
width: 20px;
|
|
cursor: pointer;
|
transition: 1s;
|
float: right;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.closeLeftMenu:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
.popContent {
|
width: 100%;
|
color: white;
|
font-family: Source Han Sans CN;
|
font-size: 14px;
|
margin-bottom: 10px;
|
}
|
.popContent1 {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
color: white;
|
font-family: Source Han Sans CN;
|
font-size: 16px;
|
align-items: center;
|
}
|
#cesiumContainer2 {
|
height: 100vh;
|
}
|
hr {
|
height: 0px;
|
}
|
}
|
</style>
|
