分屏对比，等高线，坡度图，坐标定位功能添加

Surpriseplus

2023-07-13 f6dd93cb0d1b0fe17674e948f0daf6ceb792bb55

 src/views/Index.vue

@@ -1,9 +1,6 @@
<template>
  <div class="body_box">
    <div
      id="cesiumContainer"
      style="width: 100%; height: 100%; position: absolute"
    ></div>
    <div id="cesiumContainer"></div>
    <export-map
      v-if="layerExportshow"
      @SETexportMap="SETexportMap"
@@ -11,6 +8,16 @@
    <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>
  </div>
</template>

@@ -32,14 +39,19 @@
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 router from "@/router";
// import * as SmartEarth from "../../public/CIMSDK/index.js";
// import * as SmartEarth from "../assets/js/CIMSDK/index.js";
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;
@@ -54,8 +66,38 @@
    case "exportMap":
      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) {
@@ -64,13 +106,7 @@

  InitMap.init3DMap();
  init();
  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";

  // setCloseNavigatBar();
  window.functionForJs = functionForJs;
});
</script>