月球大数据地理空间分析展示平台-【前端】-月球2期前端
surprise
2023-11-29 36fbd1e5a40e319e6ac5f43d11c99ba4b66e93a3
src/views/Index.vue
@@ -1,14 +1,25 @@
<template>
  <div class="body_box">
    <div
      id="cesiumContainer"
      style="width: 100%; height: 100%; position: absolute;"
    ></div>
  <div class="body_box" v-loading="store.state.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <export-map v-if="layerExportshow" @SETexportMap="SETexportMap"></export-map>
    <export-list v-if="store.state.setExportList"></export-list>
    <menus></menus>
    <bottom-btn></bottom-btn>
    <top-btn></top-btn>
    <layer-manage> </layer-manage>
    <bottom-btn v-if="store.state.isShowMap"></bottom-btn>
    <mouse-move v-if="store.state.isShowMap"></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 v-if="store.state.isShowMap">
      <map-view></map-view>
    </div>
    <div v-if="!store.state.isShowMap">
      <ol-map></ol-map>
    </div>
    <plotting-inquire></plotting-inquire>
    <attribute-info v-if="store.state.setEditTemporaryShow"></attribute-info>
    <slopeQuery v-if="store.state.showSlopeQuey"></slopeQuery>
    <legend-layer  v-if="store.state.showlegendLayer"></legend-layer>
    <legend-analysis v-if="store.state.showlegendLayer"></legend-analysis>
  </div>
</template>
@@ -21,27 +32,95 @@
  defineProps,
  defineEmits,
} from "vue";
import { removeToken, getToken } from "@/utils/auth";
//左侧菜单
import menus from "@/components/menus.vue";
import menus from "@/views/menus.vue";
//底部菜单
import bottomBtn from "@/components/bottomBtn.vue";
//顶部菜单
import topBtn from "@/components/topBtn.vue";
//图层管理页面
import layerManage from "@/views/layer/layerManage.vue";
import exportMap from "./export/exportMap.vue";
import mapView from "@/views/Map/mapView.vue";
import olMap from "@/views/Map/olMap.vue";
//经纬度显示
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 exportList from "./export/exportList.vue";
//标绘查询
import plottingInquire from "./plotting/plottingInquire.vue";
//属性编辑
import attributeInfo from "./plotting/attributeInfo.vue";
// 坡度值
import slopeQuery from "./query/slopeQuery.vue";
//图列
import legendLayer from '@/views/Map/legendLayer';
import legendAnalysis from "./Map/legendAnalysis.vue";
import router from "@/router";
import { useStore } from "vuex"; // 引入useStore 方法
import InitMap from "@/assets/js/Map/index.js";
const store = useStore(); // 该方法用于返回store 实例
const layerExportshow = ref(false);
const layerSpatialshow = ref(false);
const layerLocationshow = ref(false);
let map;
var viewer;
const init = () => {
  viewer = InitMap.Viewer;
  map = InitMap.sgworld;
//关闭状态
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(() => {
  InitMap.init3DMap();
  init();
  var token = getToken();
  if (!token) {
    router.push("/Login");
  }
  // setCloseNavigatBar();
  window.functionForJs = functionForJs;
  store.state.isShowMap = true;
});
</script>
<style lang="less" scoped>