<!--
|
* @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="rightMap"></div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
watch,
|
} from "vue";
|
import store from "@/store";
|
import mapView from "../assets/js/mapView.js";
|
const popOption = ref();
|
const screenFlag = ref(true);
|
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;
|
},
|
{ immediate: true, deep: true }
|
);
|
onMounted(() => {
|
// mapView.init();
|
});
|
onBeforeUnmount(() => {});
|
</script>
|
<style scoped lang="less">
|
.MapBox {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
|
.banner {
|
width: 100%;
|
height: 100vh;
|
position: absolute;
|
background-size: cover;
|
}
|
|
.leftMap {
|
width: 50%;
|
height: 100vh;
|
position: absolute;
|
background: skyblue;
|
background-size: cover;
|
float: left;
|
}
|
.rightMap {
|
width: 50%;
|
height: 100vh;
|
position: absolute;
|
background: red;
|
background-size: cover;
|
float: right !important;
|
}
|
}
|
</style>
|
