修改鼠标获取经纬度方法；添加分辨率显示功能;修改图层管理，字体大小，菜单样式；修改图层编辑弹窗样式;添加地图快照功能;修改左侧菜单样式

Surpriseplus

2023-07-03 698582a994ef3c05bb6243952675b0f14f31ca2e

 src/views/menus.vue

@@ -1,41 +1,69 @@
<template>
  <div class="menus" v-show="fullScreen">
  <div
    class="menus"
    v-show="fullScreen"
  >
    <div class="logo_box">
      <img src="../assets/img/logo.png" alt="" class="logo" />
      <img
        src="../assets/img/logo.png"
        alt=""
        class="logo"
      />
      <div class="logo_name">
        <h3>月球大数据地理空间分析展示平台</h3>
        <img src="../assets/img/logob.png" alt="" class="logo_name_b" />
        <img
          src="../assets/img/logob.png"
          alt=""
          class="logo_name_b"
        />
      </div>
    </div>
    <div class="menus_box">
      <div
        class="imgBox"
        v-for="(item, i) in menuOptions"
        :key="i"
        @click="setMenuClick(item)"
      >
        <img
          v-if="checkMenuFlag != item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/' + item.imgUrl)"
        />
        <img
          v-if="checkMenuFlag == item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/' + item.checkImgUrl)"
        />

      <div class="menu_Image_box">
        <div
          class="imgBox"
          v-for="(item, i) in menuOptions"
          :key="i"
          @click="setMenuClick(item)"
        >
          <img
            v-if="checkMenuFlag != item.id"
            class="imgIcon"
            :src="require('../assets/img/leftBtn/' + item.imgUrl)"
          />
          <img
            v-if="checkMenuFlag == item.id"
            class="imgIcon"
            :src="require('../assets/img/leftBtn/' + item.checkImgUrl)"
          />
        </div>
      </div>

    </div>
  </div>
  <div class="content_box" v-show="fullScreen">
    <layer-manage v-show="checkMenuFlag == 'l1'"> </layer-manage>
  <div
    class="content_box"
    v-show="fullScreen"
  >
    <layer-manage
      @setCloseLayer="setCloseLayer"
      v-if="checkMenuFlag == 'l1'"
    > </layer-manage>
    <plotting v-show="checkMenuFlag == 'l2'"> </plotting>
    <baseMapSwitching v-show="checkMenuFlag == 'l5'"> </baseMapSwitching>
    <search v-if="thematicMapBtnState"> </search>
  </div>
  <top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn>
  <top-btn
    v-show="fullScreen"
    v-if="thematicMapBtnState"
  ></top-btn>
  <thematic-map v-show="!thematicMapBtnState"></thematic-map>
  <div class="fullScreen_btn" v-show="!fullScreen" @click="screen"></div>
  <div
    class="fullScreen_btn"
    v-show="!fullScreen"
    @click="screen"
  ></div>
</template>

<script lang="ts" setup>
@@ -84,6 +112,9 @@
    checkMenuFlag.value = res.id;
    menuTool.leftTools(res);
  }
};
const setCloseLayer = (res) => {
  checkMenuFlag.value = null;
};
// 切换浏览器全屏
const screen = () => {
@@ -153,7 +184,7 @@
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 9px;
        line-height: 35px;
      }
      .logo_name_b {
        text-align: center;
@@ -163,13 +194,14 @@
    }
  }
  .menus_box {
    background: url("../assets/img/矩形 1.png");
    background: #010a1c;

    left: 7px;
    position: absolute;
    top: 105px;
    width: 71px;
    height: 628px;
    padding: 36px 0px;
    height: 850px;

    .imgBox {
      width: 100%;
      display: flex;
@@ -183,6 +215,13 @@
    }
  }
}
.menu_Image_box {
  height: 778px;
  width: 100%;
  padding: 36px 0px;
  background: url("../assets/img/矩形 1.png") no-repeat;
  background-size: 100% 100%;
}
.content_box {
  position: absolute;
  top: 135px;