<template>
|
<div class="body_box">
|
<div id="cesiumContainer">
|
|
</div>
|
<export-map
|
v-if="layerExportshow"
|
@SETexportMap="SETexportMap"
|
></export-map>
|
<menus></menus>
|
<bottom-btn></bottom-btn>
|
<mouse-move></mouse-move>
|
<spatial-box
|
v-if="layerSpatialshow"
|
@SETspatialClose="SETspatialClose"
|
></spatial-box>
|
<coord-location
|
v-if="layerLocationshow"
|
@SETcoordClose="setCoordLocation"
|
>
|
</coord-location>
|
<details-query v-if="store.state.details.showDetails">
|
|
</details-query>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import { removeToken, getToken } from "@/utils/auth";
|
//左侧菜单
|
import menus from "@/views/menus.vue";
|
//底部菜单
|
import bottomBtn from "@/components/bottomBtn.vue";
|
import exportMap from "./export/exportMap.vue";
|
import InitMap from "@/assets/js/Map/index.js";
|
//经纬度显示
|
import mouseMove from "@/components/mouseMove.vue";
|
//空间查询
|
import spatialBox from "@/views/query/SpatialQuery.vue";
|
//坐标定位
|
import CoordLocation from "@/views/query/CoordLocation.vue";
|
//阴影分析
|
import mapclock from "@/views/mapClock/index.vue";
|
//矢量数据信息弹窗
|
import detailsQuery from "@/views/query/detailsQuery.vue";
|
|
import router from "@/router";
|
import { useStore } from "vuex"; // 引入useStore 方法
|
|
let map;
|
var viewer;
|
const store = useStore(); // 该方法用于返回store 实例
|
const layerExportshow = ref(false);
|
const layerSpatialshow = ref(false);
|
const layerLocationshow = ref(false);
|
const init = () => {
|
viewer = InitMap.Viewer;
|
map = InitMap.sgworld;
|
window.setMouseMove(true);
|
};
|
//关闭状态
|
const SETexportMap = (res) => {
|
layerExportshow.value = res;
|
};
|
const functionForJs = (res) => {
|
switch (res.type) {
|
case "exportMap":
|
store.state.exportImgUrl = res.url;
|
layerExportshow.value = res.value;
|
|
break;
|
case "spatialQuery":
|
setSpatialQuery(res);
|
break;
|
case "closeNavigatBar":
|
setCloseNavigatBar();
|
break;
|
case "coordLocation":
|
setCoordLocation(res);
|
break;
|
}
|
};
|
const setCoordLocation = (res) => {
|
layerLocationshow.value = res;
|
};
|
const setCloseNavigatBar = () => {
|
const infobar = document.getElementsByClassName("map-info-bar")[0];
|
infobar.style.display = "none";
|
const navigation = document.getElementsByClassName("navigation-controls")[0];
|
navigation.style.top = "calc(100% - 182px)";
|
navigation.style.right = "70px";
|
const compass = document.getElementsByClassName("compass")[0];
|
compass.style.top = "calc(100% - 280px)";
|
compass.style.right = "38px";
|
};
|
const setSpatialQuery = async (res) => {
|
store.state.spatialQueryData.wkt = res.value;
|
layerSpatialshow.value = true;
|
};
|
const SETspatialClose = (res) => {
|
layerSpatialshow.value = res;
|
};
|
|
onMounted(() => {
|
var token = getToken();
|
if (!token) {
|
router.push("/Login");
|
}
|
|
InitMap.init3DMap();
|
init();
|
// setCloseNavigatBar();
|
window.functionForJs = functionForJs;
|
});
|
</script>
|
<style lang="less" scoped>
|
.body_box {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
}
|
</style>
|
