<!--
|
* @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>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
|
import store from "@/store";
|
import mapView from "../assets/js/mapView.js";
|
|
const data = ref([]);
|
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: 2%;
|
left: 1%;
|
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>
|
