样式修改，openlayer加载影像（未完成）

WX

2023-09-01 e603818514e4849cd71c1df6f621a70dc019d156

 src/views/baseMapSwitching/baseMapSwitching.vue

@@ -1,14 +1,11 @@
<template>
  <div
    v-drag
    class="baseMapSwitching"
  >
  <div class="baseMapSwitching">
    <div class="baseMapSwitchingTitle">
      <div class="tileLeft">
        <div class="titleImg">
          <ArrowLeft />
        </div>
        <div class="titleLable"> 投影图层管理</div>
        <div class="titleLable">投影图层管理</div>
      </div>
    </div>
    <div class="baseMapSwitching_content">
@@ -20,7 +17,9 @@
          @click="setProjectionLayerChange(item)"
        >
          <div class="baseMapSwitching_list_tr_name">
            <span :class="{  'baseMapActive' : activceIndex == item.id}">{{item.cnName }}</span>
            <span :class="{ baseMapActive: activceIndex == item.id }">{{
              item.cnName
            }}</span>
          </div>
        </div>
      </div>
@@ -40,12 +39,35 @@
import { perms_selectProjectLayers } from "@/api/api";
import server from "@/assets/js/Map/server";
import store from "@/store";

import projection from "@/assets/js/Map/projectionServer";

import olMap from "@/assets/js/Map/olMap";
let list = ref([]);
const activceIndex = ref();
const setProjectionLayerChange = (res) => {
  // projection.addTreeData(res);
  console.log(res);
  let projection = {
    code: "",
    extent: [],
  };
  if (res.cnName == "等距离圆柱投影（<75度）") {
    projection.code = "ESRI:103881";
    projection.extent = [-180, -75, 180, 75];
  } else if (res.cnName == "月球近地投影") {
    projection.code = "ESRI:103880";
    projection.extent = [-90, -90, 90, 90];
  } else if (res.cnName == "月球北极投影") {
    projection.code = "ESRI:103877";
    projection.extent = [-180, 60, 180, 90];
  } else if (res.cnName == "月球南极投影") {
    projection.code = "ESRI:103878";
    projection.extent = [-180, -90, 180, -60];
  } else if (res.cnName == "月球远地投影") {
    projection.code = "ESRI:103879";
    projection.extent = [-90, -90, 90, 90];
  }
  // olMap.initMap();
  olMap.addTreeData(res, projection);
  activceIndex.value = res.id;
  // store.state.restLayer = true;
};
@@ -58,9 +80,10 @@
    }
  });
  list.value = result.reverse();
  if (!activceIndex.value) {
    setProjectionLayerChange(list.value[0]);
  }
  setProjectionLayerChange(list.value[0]);
  // if (!activceIndex.value) {
  //   setProjectionLayerChange(list.value[0]);
  // }
};
getProjectionLayer();
</script>
@@ -71,8 +94,8 @@
  height: 680px;
  background: rgba(7, 8, 14, 0.8);
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  z-index: 40;
  position: absolute;
  z-index: 101;
  position: relative;
  .baseMapSwitchingTitle {
    width: calc(100% - 27px);
    height: 42px;