zzy + 底图切换

.env.development

@@ -1,4 +1,4 @@
 VITE_BASE_API = '/api'
 VITE_OPEN_API = '/addressapi'
 VITE_BASE_URL = 'http://localhost:9250'
-VITE_OPEN_URL = 'http://localhost:9250'
+VITE_OPEN_URL = 'https://cimweb.zjw.sh.cegn.cn:2008/'

src/service/map.js

@@ -11,6 +11,7 @@ export function getMapToken(){
     })
 }
 export function getServiceToken(name,password){
+    debugger
     return requestInstance_Service_token({
         url:'/security/getToken',
         params:{

src/store/mapStore.js

@@ -3,6 +3,7 @@ export const useMapStore = defineStore('map',{
     state:() =>({
         layerShow:false,
         currentLayerList:[],
+        whiteMoldState:false,
         camera:{
             heading:null,
             tilt:null,

src/unit/map/addLayer.js

@@ -30,15 +30,16 @@ async function returnProxyUrl(url){
     let arr = url.split('/');
     let username = '';
     let password = '';
+    debugger
     if(arr.indexOf('MapProxyApi') !== -1){ //不需要授权服务
         for(let i=0;i<arr.length;i++){
             if(arr[i] ==='getSceneServer'){
                 username = arr[i+1];
                 password = arr[i+2];
                 const response = await getServiceToken(username,password);
-                if(response.length > 0){
+                if(response?.data.length > 0){
                     arr.splice(i-1, 4);
-                    return arr.join('/')+'/MapServiceProxy/'+response;
+                    return arr.join('/')+'/MapServiceProxy/'+response.data;
                 }
             }
         }
@@ -47,6 +48,13 @@ async function returnProxyUrl(url){
     }
 }
 
+export function SetBackground(){
+    invokeParams('SetBackground', {
+        "opacity": 1,
+        "color": "transparent",
+    })
+}
+
 //点查询
 export function MapClickByType(status){
     invokeParams('MapClickAll', {
@@ -55,6 +63,49 @@ export function MapClickByType(status){
     })
 }
 
+export async function AddBaseMapLayer() {
+    let url = await returnProxyUrl("https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/93493321");
+    console.log("1111",url);
+    debugger
+    invokeParams('AddBaseMapLayer', {
+        "id": "BaseMap",
+        "title": "BaseMap",
+        "visible": true,
+        "opacity": 1,
+        url
+    })
+}
+
+export async function AddZhenwuMapLayer() {
+    let url = await returnProxyUrl("https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/37072265");
+    console.log("1111",url);
+    debugger
+    invokeParams('AddBaseMapLayer', {
+        "id": "BaseMapZhenwu",
+        "title": "BaseMapZhenwu",
+        "visible": true,
+        "opacity": 1,
+        url
+    })
+}
+
+export async function AddYaoganMapLayer() {
+    let url = await returnProxyUrl("https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/50115036");
+    console.log("1111",url);
+    debugger
+    invokeParams('AddBaseMapLayer', {
+        "id": "BaseMapYaoGan",
+        "title": "BaseMapYaoGan",
+        "visible": true,
+        "opacity": 1,
+        "type": "tile",
+       url
+    })
+}
+
+
+
+
 export function AddSingleLayer(params){
     if(params.token){
         params.url = "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.token;

src/views/c-cpns/BaseMapSwitch.vue

@@ -0,0 +1,168 @@
+<template>
+  <div id="baseMapSwitch" @mouseleave="leave" @mouseenter="enter">
+    <Transition name="fade" >
+      <div class="hide_part" v-show="show">
+        <div v-for="item in mapList" :key="item.id" >
+          <transition name="width">
+            <img class="title_img" v-if="!item.chosen" :src="imgUrl(item.name)" @click="changeBaseMap(item.id)">
+          </transition>
+        </div>
+      </div>
+    </Transition>
+    <div class="cur">
+      <div class="single-chosen" v-for="item in mapList" :key="item.id" >
+        <img class="title_img_next" v-if="item.chosen" :src="imgUrl(item.name)" @click="changeBaseMap(item.id)" alt="">
+        <div v-if="item.chosen" class="img-name">
+          <span>{{item.label}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useMapStore} from "@/store/mapStore.js";
+import {ref} from "vue";
+import {AddBaseMapLayer, AddYaoganMapLayer, AddZhenwuMapLayer} from "@/unit/map/addLayer.js";
+
+export default {
+  name: "BaseMapSwitch",
+  setup(){
+    const mapStore = useMapStore();
+    let show = ref(false);
+    let mapList = ref([
+      {
+        id:1,
+        label:"政务",
+        name:"zhenwu",
+        chosen:false
+      },
+      {
+        id:2,
+        label:"遥感",
+        name:"yaogan",
+        chosen:false
+      },
+      {
+        id:3,
+        label:"暗色",
+        name:"ditu",
+        chosen:true
+      },
+    ]);
+    function imgUrl(name){
+      return new URL(`../../assets/imgs/${name}.png`, import.meta.url).href
+    }
+    function changeBaseMap(id) {
+      for (let i = 0; i < mapList.value.length; i++) {
+        if (id == mapList.value[i].id) {
+          if (mapList.value[i].chosen) {
+            return
+          } else {
+            switch (mapList.value[i].id) {
+              case 1:
+                AddZhenwuMapLayer();
+                break;
+              case 2:
+                AddYaoganMapLayer();
+                break;
+              case 3:
+                AddBaseMapLayer()
+                break;
+            }
+            mapList.value[i].chosen = true;
+          }
+        } else {
+          mapList.value[i].chosen = false;
+        }
+      }
+    }
+    function enter(){
+      show.value = true;
+    }
+    function leave(){
+      show.value = false;
+    }
+    return{
+      imgUrl,
+      changeBaseMap,
+      enter,
+      leave,
+      mapList,
+      show
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fade-enter,.fade-leave-to{
+  transform: translateX(100px);
+  .title_img{
+    width: 25px !important;
+  }
+}
+.fade-enter-active,.fade-leave-active{
+  transition: 0.5s all;
+}
+.width-enter,.width-leave-to{
+  width: 25px !important;
+}
+.width-enter-active,.width-leave-active{
+  transition: 0.5s all;
+}
+#baseMapSwitch{
+  background-color: rgba(0, 22, 52, 0.75);
+  position: absolute;
+  z-index: 2;
+  right: 460px;
+  bottom: 80px;
+  width: 92px;
+  height: 92px;
+  cursor: pointer;
+  .cur{
+    border: 1px solid #4CD2FF;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+  }
+  .single-chosen{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .img-name{
+      position: absolute;
+      width: 100%;
+      height: 30px;
+      bottom: 0px;
+      left:0px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0,71,141,0.5);
+      span{
+        font-weight: 400;
+        font-size: 14px;
+        color: #FFFFFF;
+      }
+    }
+  }
+
+  .hide_part{
+    display: flex;
+    position: absolute;
+    right: 100px;
+
+  }
+  .title_img{
+    transition: 0.5s all;
+    width: 90px;
+    height: 90px;
+  }
+  .title_img_next{
+    width: 90px;
+    height: 90px;
+  }
+}
+</style>

src/views/c-cpns/Map.vue

@@ -11,7 +11,7 @@ import CityGis from '../../unit/map/CityGis.Bridge.js';
 import {myBridge} from "../../unit/map/map.js";
 import {useMapStore} from "../../store/mapStore.js";
 import {nextTick,ref,onMounted} from "vue";
-import {AddSingleLayer, MapClickByType} from "../../unit/map/addLayer.js";
+import {AddSingleLayer, MapClickByType, SetBackground} from "../../unit/map/addLayer.js";
 let bridge;
 export default {
   name: "Map",
@@ -25,7 +25,8 @@ export default {
           console.log("地图创建完成")
         }
       })
-      MapClickByType('show')
+      MapClickByType('show');
+      SetBackground()
     })
   }
 }

src/views/c-cpns/ServiceTree.vue

@@ -10,7 +10,12 @@
           ref="treeRef"
           show-checkbox
       >
-
+        <template #default="{ node, data }">
+          <span  class="custom-tree-label">{{ node.label }}</span>
+          <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
+            <Edit />
+          </span>
+        </template>
       </el-tree>
     </div>
   </div>
@@ -22,9 +27,10 @@ import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 import {getServiceTree} from "@/service/http.js";
 import {AddSingleLayer} from "@/unit/map/addLayer.js";
 import {useMapStore} from "@/store/mapStore.js";
+import {Edit} from "@element-plus/icons-vue";
 export default {
   name: "ServiceTree",
-  components: {CommonTitle},
+  components: {CommonTitle,Edit},
   setup(){
     const mapStore = useMapStore()
     let treeData = ref([]);
@@ -38,6 +44,10 @@ export default {
         treeData.value = resData;
       })
     }
+    function applyData(data){
+      window.open("https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/main/resource-apply?name=" + data.label)
+
+    }
     function changeChange(){
       let nowChecked = treeRef.value.getCheckedNodes(true);
       //找到原来有现在没有的删除
@@ -81,7 +91,8 @@ export default {
       mapStore,
       treeData,
       changeChange,
-      treeRef
+      treeRef,
+      applyData
     }
   }
 }
@@ -94,6 +105,16 @@ export default {
       background: transparent !important;
     }
   }
+  .custom-tree-label{
+    font-size: 16px;
+  }
+  .custom-tree-icon{
+    position: absolute;
+    right: 10px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+  }
   position: absolute;
   z-index: 2;
   left: 460px;

src/views/c-cpns/figureLegend.vue

@@ -41,8 +41,8 @@ export default {
       }
     }
     async function getSingleLegend(params) {
-      await getLegend("https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.TOKEN + '/0?f=json').then(res => {
-
+      try{
+        const res =  await getLegend("https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.TOKEN + '/0?f=json');
         if (res?.data?.drawingInfo?.renderer?.symbol) {//简单的单个样式
           let data = res?.data?.drawingInfo?.renderer?.symbol;
           if (data?.imageData) {
@@ -72,7 +72,9 @@ export default {
             }
           })
         }
-      })
+      }catch (error){
+        console.error('Error fetching legend:', error);
+      }
     }
     return{
       legendImgUrl,

src/views/c-views/visualizationPart/VisualizationHome.vue

@@ -5,6 +5,7 @@
     <TreeMenu />
     <ServiceTree />
     <FigureLegend />
+    <BaseMapSwitch />
     <router-view/>
     <VisualizationBottom />
   </div>
@@ -17,9 +18,10 @@ import VisualizationBottom from "@/views/c-cpns/VisualizationBottom.vue";
 import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
 import FigureLegend from "@/views/c-cpns/figureLegend.vue";
 import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
+import BaseMapSwitch from "@/views/c-cpns/BaseMapSwitch.vue";
 export default {
   name: "VisualizationHome",
-  components: {TreeMenu, FigureLegend, ServiceTree, VisualizationBottom, Map, VisualizationHeader}
+  components: {BaseMapSwitch, TreeMenu, FigureLegend, ServiceTree, VisualizationBottom, Map, VisualizationHeader}
 }
 </script>
 

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
             // 代理所有 /api 的请求，该求情将被代理到 target 中
             '/api': {
                 // 代理请求之后的请求地址（你的真实接口地址)
-                target: 'https://cimweb.zjw.sh.cegn.cn:2007/data-business-prod/',
-                //target: 'http://localhost:9250/',
+                //target: 'https://cimweb.zjw.sh.cegn.cn:2007/data-business-prod/',
+                target: 'http://localhost:9250/',
                 secure: false,
                 ws: true,
                 // 跨域