提交水下地形和底图切换

src/views/home/ComPage.vue

@@ -4,6 +4,7 @@
     <scene-box v-if="sceneBoxShow"/>
     <pic-viewer v-if="picViewShow" :pic-list="picList.value" @close-pic-viewer="picViewShow=false"></pic-viewer>
     <under-water-legend/>
+    <MapArea  @changeBaseMap=""  />
   </div>
 </template>
 
@@ -20,6 +21,7 @@ import BoatPanel from './cpns/boatPanel/Index.vue'
 import SceneBox from './cpns/SceneBox.vue';
 import PicViewer from './cpns/PicViewer.vue';
 import UnderWaterLegend from './cpns/UnderWaterLegend.vue';
+import MapArea from '@/views/map/BaseMapArea.vue'
 import {locationBoat} from "@/utils/map/Boat";
 
 const boatPanelShow = ref(false)

src/views/home/cpns/UnderWater.vue

@@ -43,8 +43,9 @@ import 'element-plus/es/components/carousel-item/style/css'
 import { useNow, useDateFormat } from '@vueuse/core'
 import { ueCallCloseWater, ueCallOpenWater, ueCallChangeShuishen, ueCallFlyToSXDX, ueCallFlyToSXDXNew, ueCallFlyToSXDXStretch, ueCallChangeTime, ueCallGetNowTime } from '@/utils/UIInteractions'
 import bus from '@/utils/bus'
-
+import {setSxdxCamera} from '@/utils/map/Common'
 import {addLayerByName} from '@/utils/map/Layer'
+import {setOpacity} from '@/utils/map/ArcgisUtil'
 onMounted(() => {
   bus.emit('toggleUnderWaterLegend',{from: 'show_sxdx', state: true})
   initSxdxData()
@@ -97,6 +98,7 @@ function handleSxdxScroll(type) {
 
 function handleChooseSxdx(i, type) {
   addLayerByName('sxdx',false)
+  setOpacity(0.4)
   if(type==='.1'&&i.usable1) {
     sxdxCurrent.value = i.year+'.1'
     // addLayerByName(sxdxCurrent.value,true)
@@ -137,18 +139,19 @@ const currentView = ref('up')
 
 // 切换视角
 function handleChangeView() {
-  if(currentView.value==='up') {
-    if(currentType==='lashen') {
-      // 拉伸视角
-      ueCallFlyToSXDXStretch()
-    } else {
-      ueCallFlyToSXDXNew()
-    }
-    currentView.value = 'down'
-  } else {
-    ueCallFlyToSXDX()
-    currentView.value = 'up'
-  }
+  setSxdxCamera()
+  // if(currentView.value==='up') {
+  //   if(currentType==='lashen') {
+  //     // 拉伸视角
+  //     ueCallFlyToSXDXStretch()
+  //   } else {
+  //     ueCallFlyToSXDXNew()
+  //   }
+  //   currentView.value = 'down'
+  // } else {
+  //   ueCallFlyToSXDX()
+  //   currentView.value = 'up'
+  // }
 }
 
 const currentType = ref('lashen')

src/views/home/cpns/tools/Tools.vue

@@ -26,7 +26,7 @@ export default {
 import bus from '@/utils/bus'
 import 'element-plus/es/components/date-picker/style/css'
   import {setBoat} from "@/utils/map/Boat";
-  import {addLayer, clearMap} from "@/utils/map/ArcgisUtil";
+  import {addLayer, clearMap, setOpacity} from "@/utils/map/ArcgisUtil";
   import {addLayerByName} from '@/utils/map/Layer'
 onMounted(() => {
 
@@ -62,6 +62,7 @@ onBeforeUnmount(() => {
             // 操作水下地形
             bus.emit('toggle_sxdx', false)
             bus.emit('hiddenWater')
+                setOpacity(1)
             }
         }
         else {
@@ -71,6 +72,7 @@ onBeforeUnmount(() => {
             }
             if (item.indexName=='sxdx'){
                 bus.emit('toggle_sxdx', true)
+                setOpacity(0.4)
             }
             addLayerByName(item.indexName,true)
         }

src/views/map/BaseMapArea.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="basemap-area"  @mouseenter="isBaseExtend = true" @mouseleave="isBaseExtend = false"  :class="{'is-extend':isBaseExtend}">
+    <ul class="basemap-list clearfix">
+      <li v-for="item in baseMapArr" class="t-4px" :key="item.name" >
+        <div class="right-row">
+          <!-- <div class="content" :class="{'active':item.name === baseMapName}"> -->
+          <div class="content">
+            <div class="basemap-bgc" @click="changeMapBaseMap(item.name, item.className)" :class="[item.className]">
+              <span class="basemap-name">{{item.title}}</span>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "BaseMapArea",
+    data() {
+      return {
+        // baseMapName: 'basemap_dark',
+        baseMapArr:[
+        {
+          name:'anse',
+          title:'暗色',
+          className:'dark'
+        },
+          {
+            name:'dtqh',
+            title:'影像',
+            className:'air'
+          },
+
+          {
+            name:'yaogan',
+            title:'遥感',
+            className:'gov'
+          },
+        ],
+        isBaseExtend:false,
+      }
+    },
+    methods:{
+      changeMapBaseMap(name, className) {
+        this.$emit('changeBaseMap',className)
+        let y = 0;
+        for (let i = 0; y < this.baseMapArr.length; y++) {
+          if (this.baseMapArr[i].name === name) this.baseMapArr.push(this.baseMapArr.splice(i, 1)[0]);//循环到是0的位置就删除该元素0并且在arr末尾push进这个元素0，由于splice删除了该位置元素，所以i不用+1，下次循环仍然检查i位置的元素
+          else i++;//循环到不是0的位置就继续往后循环
+        }
+      }
+    }
+
+  }
+</script>
+
+<style scoped lang="scss">
+  $width:92px;
+  $height:92px;
+  $splitWidth:5px;
+  $borderWidth:2px;
+  $allWidth:$width * 3 +  $borderWidth + $splitWidth * 2;
+
+  .basemap-area {
+    position: absolute;
+    bottom: 10vh;
+    right: 20vw;
+    z-index: 9;
+    background: rgba(255,255,255,0);
+    transition: width 0.5s;
+    width: $width;
+    height: $height;
+    box-shadow: 0 0 10px rgba(0, 103, 205, 0.2);
+
+    .basemap-list li{
+      width:$width;
+      height: $height;
+      box-sizing: border-box;
+      border: $borderWidth solid #00AC66;
+    }
+
+    .right-row{
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+    &.is-extend{
+      // background: rgba(255,255,255,0.1);
+      width:$allWidth;
+      .basemap-list{
+        li{
+          &:nth-child(2){
+            right:$splitWidth * 1 + $borderWidth + $width;
+            opacity: 1;
+          }
+          &:nth-child(1){
+            right: $splitWidth * 2 + $borderWidth + $width + $width;
+            opacity: 1;
+          }
+        }
+      }
+
+    }
+    .basemap-list{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+
+      .basemap-bgc{
+        position: relative;
+        width: 100%;
+        height: 100%;
+        .basemap-name{
+          position: absolute;
+          bottom: 0;
+          display: block;
+          width: 100%;
+          height: 32px;
+          line-height: 32px;
+          background-color: rgba($color: #00B368, $alpha: 0.6);
+          font-size: 16px;
+          color: #fff;
+          text-align: center;
+        }
+
+        &.dark{
+          background-image: url("@/assets/imgs/baseMap/anse.png");
+        }
+        &.gov{
+          background-image: url("@/assets/imgs/baseMap/qianse.png");
+        }
+        &.air{
+          background-image: url("@/assets/imgs/baseMap/yaogan.png");
+        }
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+
+      li {
+        .content{
+          box-sizing: border-box;
+          height: 100%;
+        }
+        cursor: pointer;
+        opacity: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        transition: all 0.5s;
+        position: absolute;
+        right: 0px;
+        &:nth-child(2){
+          z-index: 2;
+          right: $borderWidth;
+          opacity: 0;
+        }
+        &:nth-child(3){
+          z-index: 3;
+          right: $borderWidth;
+          opacity: 1;
+        }
+        float: left;
+      }
+    }
+  }
+</style>