海绵城市2.1版本

.env.development

@@ -1,4 +1,10 @@
 VITE_BASE_API = '/api'
 VITE_OPEN_API = '/addressapi'
 VITE_BASE_URL = 'http://localhost:9250'
-VITE_OPEN_URL = 'https://cimweb.zjw.sh.cegn.cn:2008/'
+VITE_OPEN_URL = 'https://cimweb.zjw.sh.cegn.cn:2008/'
+
+VITE_NET_API = '/netapi'
+VITE_NET_URL = 'http://localhost:9250'
+
+VITE_ZW_API = '/zwapi'
+VITE_ZW_URL = 'http://localhost:9250'

.env.production

@@ -1,4 +1,10 @@
 VITE_BASE_API='https://cimweb.zjw.sh.cegn.cn:2007/data-business-prod/'
 VITE_BASE_URL='https://cimweb.zjw.sh.cegn.cn:2007/data-business-prod/'
 VITE_OPEN_API='https://cimweb.zjw.sh.cegn.cn:2008/'
-VITE_OPEN_URL='https://cimweb.zjw.sh.cegn.cn:2008/'
+VITE_OPEN_URL='https://cimweb.zjw.sh.cegn.cn:2008/'
+
+VITE_NET_API = 'http://58.34.215.19:19259/'
+VITE_NET_URL = 'http://58.34.215.19:19259/'
+
+VITE_ZW_API = 'http://10.90.9.143:9252/'
+VITE_ZW_URL = 'http://10.90.9.143:9252/'

src/service/index.js

@@ -31,12 +31,25 @@ const requestGet = axios.create({
 })
 
 
+const requestNetPost = axios.create({
+    baseURL:import.meta.env.VITE_NET_API,
+    timeout,
+    method:"post"
+})
+const requestZWPost = axios.create({
+    baseURL:import.meta.env.VITE_ZW_API,
+    timeout,
+    method:"post"
+})
+
 export {
     requestInstance,
     requestInstance_Map_token,
     requestInstance_Service_token,
 	requestPost,
-	requestGet
+	requestGet,
+    requestNetPost,
+    requestZWPost
 }
 
 

src/service/map.js

@@ -1,4 +1,10 @@
-import {requestInstance_Map_token, requestInstance_Service_token, requestPost} from "./index.js";
+import {
+    requestInstance_Map_token,
+    requestInstance_Service_token,
+    requestNetPost,
+    requestPost,
+    requestZWPost
+} from "./index.js";
 
 export function getMapToken(){
     return requestInstance_Map_token({
@@ -42,4 +48,47 @@ export function getMapNum(type,id){
             }
         }
     })
-}
+}
+
+
+export function searchPathByPoint(params){
+    return requestNetPost({
+        url:'/PathPlan/searchByPoint',
+        data:{
+            "start": params.start,
+            "end": params.end,
+            "height": params.height,
+            "coordinateType": "sh_2000"
+        }
+    })
+}
+
+export function queryGridByLine(params){
+    return requestNetPost({
+        url:'/PathPlan/queryGridByLine',
+        data:{
+            "line":params.line,
+            "coordinateType": "sh_2000",
+            "lineId":"",
+            "scrollId":"",
+            "pageIndex":1,
+            "pageSize":10000,
+            "level": 24
+        }
+    })
+}
+
+export function gridBaseInfo(params){
+    return requestZWPost({
+        url:'/DataSearch/LowAltitudeGrid/gridBaseInfo',
+        data:{
+            "locationPoint": {
+                "mapX": 4205.643879225469,
+                "mapY": 7385.613897950465
+            },
+            "radiusInMeters": params.radius,
+            "level":params.level,
+            "type": 1
+        }
+    })
+}

src/store/mapStore.js

@@ -29,6 +29,9 @@ export const useMapStore = defineStore('map',{
         layerDetailShow:false,   //服务详情是否开启
         left_board:true,     //左侧板是否开启
         right_board:false,    //右侧板是否开启
+        path_planShow:false,   //路线规划是否开启
+        simulate_flyShow:false,   //模拟飞行是否开启
+        draw_geometry:null,   //绘制的几何
     }),
     persist:true,
     actions:{

src/unit/map/addLayer.js

@@ -107,84 +107,24 @@ export function GeometryMeshPrismEffect(params){
         "rings": [
             [
                 [
-                    2283.1137006787776,
-                    636.1578526852668
+                    3764.910326990452,
+                    8853.749163112263
                 ],
                 [
-                    2755.442842863678,
-                    1026.8816302796026
+                    5715.688477752859,
+                    8853.749163112263
                 ],
                 [
-                    3531.034281735133,
-                    1248.901078489329
+                    5715.688477752859,
+                    6816.1711134560055
                 ],
                 [
-                    4264.864482789166,
-                    1262.6133470962304
+                    3764.910326990452,
+                    6816.1711134560055
                 ],
                 [
-                    4846.072870575944,
-                    1220.3100790217377
-                ],
-                [
-                    5349.2761417332795,
-                    1254.9545222719507
-                ],
-                [
-                    5489.116295834501,
-                    849.424842489057
-                ],
-                [
-                    5680.445379537043,
-                    447.08383557562183
-                ],
-                [
-                    5897.983788255289,
-                    -72.23287029218955
-                ],
-                [
-                    5353.235081713489,
-                    -314.4967403232263
-                ],
-                [
-                    4880.7215573706435,
-                    -446.1705186078343
-                ],
-                [
-                    4419.945274186343,
-                    -620.6697712028126
-                ],
-                [
-                    4022.245846137783,
-                    -798.2234781410284
-                ],
-                [
-                    3588.865915776516,
-                    -1016.6756351545175
-                ],
-                [
-                    3308.344794632267,
-                    -716.4720188261422
-                ],
-                [
-                    2995.5705887037257,
-                    -401.75745444376344
-                ],
-                [
-                    2660.6207445233986,
-                    -59.444218653938606
-                ],
-                [
-                    2377.4465865885672,
-                    212.6415896605945
-                ],
-                [
-                    2272.8639529375205,
-                    442.8097125262784
-                ],
-                [
-                    2283.1137006787776,
-                    636.1578526852668
+                    3764.910326990452,
+                    8853.749163112263
                 ]
             ]
         ],
@@ -203,6 +143,128 @@ export function ThreeGrid(params){
     })
 }
 
+export function ShowThreeCube(params){
+    invokeParams('ShowThreeCube', {
+        "status": params.status,
+        "size": params.size,
+        "points":params.points
+    })
+}
+
+
+export function ShowBuildingThreeCubeByInterface(params){
+    invokeParams('ShowBuildingThreeCubeByInterface', {
+        "status": params.status,
+        "level":params.level,
+        "size": params.size
+    })
+}
+
+export function ShowNoFlyThreeCubeByInterface(params){
+    invokeParams('ShowNoFlyThreeCubeByInterface', {
+        "status": params.status,
+        "level":params.level,
+        "size": params.size
+    })
+}
+
+export function ShowRoadThreeCubeByInterface(params){
+    invokeParams('ShowRoadThreeCubeByInterface', {
+        "status": params.status,
+        "level":params.level,
+        "size": params.size
+    })
+}
+
+export function ShowRiverThreeCubeByInterface(params){
+    invokeParams('ShowRiverThreeCubeByInterface', {
+        "status": params.status,
+        "level":params.level,
+        "size": params.size
+    })
+}
+
+
+export function ShowThreeNet(params){
+    invokeParams('ShowThreeNet', {
+        "status": params.status,
+        "size": params.size,
+        "origin": params.origin,
+        "buffer": params.buffer,
+        "maxHeight": 120,
+        "minHeight": 0,
+    })
+}
+
+export function DrawPoint(params){
+    invokeParams('Draw', {
+        "type": "point",
+        "hasZ": true,
+        "status":params.status,
+        "symbol": {
+            "type": "point-3d",
+            "symbolLayers": [{
+                "type": "object",
+                "width": 20,
+                "height": 20,
+                "depth": 20,
+                "resource": { "primitive": "circle" },
+                "material": { "color": [0, 255, 0,0.8] }
+            }]
+        }
+    })
+}
+
+export function DrawPath(params){
+    invokeParams('Draw', {
+        "type": "polyline",
+        "hasZ": true,
+        "status":params.status,
+        "path":params.path,
+        "symbol": {
+            "type": "line-3d",
+            "symbolLayers": [
+                {
+                    "type": "path",
+                    "profile": "circle",
+                    "material": {
+                        "color": [
+                            0,
+                            255,
+                            0,
+                            0.3
+                        ]
+                    },
+                    "width": 10,
+                    "height": 10
+                }
+            ]
+        }
+    })
+}
+
+export function PathPipe(params){
+    debugger
+    invokeParams('PathPipe', {
+        "status": params.status,
+        "paths": params.paths,
+        "color": "#00FF7F",
+        "pipeRadius": 10
+    })
+}
+
+
+
+export function FlyGLTF(params){
+    invokeParams('FlyGLTF', {
+        "paths": params.paths,
+        "isFollow": true,
+        "speed": 0.001
+    })
+}
+
+
+
 
 export async function PrismEffectService_sfky(params) {
     let url = await returnProxyUrl("https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/gxjh_fwjk/D9999990220240926") + '/1';
@@ -293,77 +355,27 @@ export function LimitHeightAnalysis(params){
         "limitH":params.start,
         "maxLimitH":params.end,
         "rings": [
-            [
-                5247.157017153374,
-                1270.0023461957703,
-                0
-            ],
-            [
-                4336.760437624776,
-                1266.8009572542537,
-                0
-            ],
-            [
-                3491.5636610067518,
-                1259.1626394806458,
-                0
-            ],
-            [
-                2936.531521888444,
-                1110.645927011667,
-                0
-            ],
-            [
-                2374.838356876977,
-                813.8209338083046,
-                0
-            ],
-            [
-                2203.756572715624,
-                557.0385520252402,
-                0
-            ],
-            [
-                2236.8693873322263,
-                298.6578417857288,
-                0
-            ],
-            [
-                2623.475887507855,
-                -94.53847230161708,
-                -4.547473508864641e-13
-            ],
-            [
-                3050.6804353369535,
-                -481.69651302570674,
-                4.547473508864641e-13
-            ],
-            [
-                3479.696719634885,
-                -1045.8470428289725,
-                0
-            ],
-            [
-                4229.590273863496,
-                -700.3542445387985,
-                0
-            ],
-            [
-                5037.960178306457,
-                -386.92470877155085,
-                0
-            ],
-            [
-                5931.864847386253,
-                -46.32862144039693,
-                0
-            ],
-            [
-                5505.553990112907,
-                838.9373631601887,
-                0
-            ]
-        ],
+                [
+                    5734.326828652739,
+                    8833.735652138346,
+                    0
+                ],
+                [
+                    3738.5816674344023,
+                    8812.731486429415,
+                    0
+                ],
+                [
+                    3783.7974914766223,
+                    6817.002289960246,
+                    0
+                ],
+                [
+                    5778.02483719044,
+                    6840.510219478308,
+                    0
+                ]
+        ]
     })
 }
 

src/views/c-cpns/Map.vue

@@ -37,7 +37,7 @@ export default {
       //MapClickByType('show');
       AddBaseMapLayer(true);
       AddWhiteMold(true);
-      importantAreaPosition(1990, -1185, 1412, 13, 54);
+      importantAreaPosition(4190, -5273, 19419, 6, 34);
       // WaterEffect({
       //   status:"show"
       // })
@@ -51,6 +51,10 @@ export default {
             let status = arg.data.status;
             mapStore.isLoading = false;
             break;
+          case "DrawComplete":
+            let geometry = arg.data.geometry;
+            mapStore.draw_geometry = geometry;
+            break;
         }
       })
     })

src/views/c-cpns/ToolList.vue

@@ -0,0 +1,208 @@
+<template>
+  <div id="toolList">
+    <div class="common-title">
+      <span>功能列表</span>
+    </div>
+    <div class="common-content">
+      <div v-for="(item,index) in list"  :key="index" @click="showSingleTool(item)" >
+        <div class="menu-item">
+          <span>{{item.name}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+import {useMapStore} from "@/store/mapStore.js";
+import {
+  GeometryMeshPrismEffect,
+  importantAreaPosition,
+  LimitHeightAnalysis, ShowBuildingThreeCubeByInterface,
+  ShowThreeNet
+} from "@/unit/map/addLayer.js";
+export default {
+  name: "ToolList",
+  setup(){
+    const mapStore = useMapStore()
+    let list = ref([
+      {
+        id:"1",
+        name:"网格",
+      },
+      {
+        id:"2",
+        name:"航线划设"
+      },
+      {
+        id:3,
+        name:"航路展示"
+      }
+    ]);
+    function showSingleTool(item){
+      if(item.id === "1"){
+        mapStore.right_board = true;
+        mapStore.path_planShow= false;
+        mapStore.simulate_flyShow = false;
+      }else if(item.id =="2"){
+        mapStore.right_board = false;
+        mapStore.path_planShow= true;
+        mapStore.simulate_flyShow = false;
+      }else if(item.id == "3"){
+        mapStore.right_board = false;
+        mapStore.path_planShow= false;
+        mapStore.simulate_flyShow = true;
+      }
+      changeMap(item)
+    }
+
+    function changeMap(item){
+      if(item.id == "1"){
+        GeometryMeshPrismEffect({
+          status:"show",
+          startHeight:0,
+          items:[
+            {
+              "id": 1,
+              "name": "",
+              "depth": 120,
+              "material": [
+                81,174,255,
+                0.30
+              ]
+            },
+            {
+              "id": 2,
+              "name": "",
+              "depth": 180,
+              "material": [
+                46,153,255,
+                0.40
+              ]
+            },
+            {
+              "id": 3,
+              "name": "",
+              "depth": 300,
+              "material": [
+                4,138,255,
+                0.50
+              ]
+            }
+          ]
+        });
+        importantAreaPosition(4190, -5273, 19419, 6, 34);
+      }
+      if(item.id == "2"){
+        GeometryMeshPrismEffect({
+          status:"hide"
+        });
+        LimitHeightAnalysis({
+          status:"hide"
+        })
+        ShowThreeNet({
+          status:"hide"
+        });
+        ShowBuildingThreeCubeByInterface({
+          status:"hide"
+        });
+      }
+      if(item.id == "3"){
+        GeometryMeshPrismEffect({
+          status:"hide"
+        });
+        LimitHeightAnalysis({
+          status:"hide"
+        })
+        ShowThreeNet({
+          status:"hide"
+        });
+        ShowBuildingThreeCubeByInterface({
+          status:"hide"
+        });
+      }
+    }
+
+    return {
+      list,
+      showSingleTool
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+#toolList {
+  position: absolute;
+  z-index: 2;
+  left: 20px;
+  bottom: 87px;
+  width: 337px;
+  height: 360px;
+  //background-color: rgba(0, 22, 52, 0.75);
+  background-image: url("../../assets/imgs/lowAltitude/serviceBackground.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .common-title{
+    width: 100%;
+    height: 20%;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    span {
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      font-size: 20px;
+      color: #BBCDE6;
+      opacity: 1;
+      background: linear-gradient(0deg, #ACE5FF 0%, #FFFFFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .title-right{
+      padding-right: 60px;
+    }
+  }
+  .common-content{
+    width: 70%;
+    height: 70%;
+    font-size: 18px;
+    color: #FFF;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .menu-item{
+      width: 137px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      background-image: url("../../assets/imgs/lowAltitude/menu_chosen.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      span{
+        font-family: YouSheBiaoTiHei;
+        font-weight: 400;
+        font-size: 22px;
+        color: #FFFFFF;
+        text-shadow: 0px 8px 1px rgba(19, 80, 143, 0.1);
+        background: linear-gradient(0deg, rgb(119, 186, 255) 0%, rgb(233, 248, 255) 73%, rgb(255, 255, 255) 100%);
+        opacity: 0.89;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+}
+</style>

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

@@ -2,10 +2,16 @@
   <div id="visualizationHome" v-loading="mapStore.isLoading" element-loading-background="rgba(0, 22, 52, 0.75)">
     <VisualizationHeader />
     <Map/>
-    <ExtentHeight />
+<!--    <ExtentHeight />-->
+    <tool-list />
     <ServiceTree/>
     <BaseMapSwitch />
-    <router-view/>
+
+    <MainPageRight />
+    <path-plan />
+    <simulate-fly />
+
+
     <BoardSwitch />
     <VisualizationBottom />
   </div>
@@ -23,9 +29,17 @@ import {useMapStore} from "@/store/mapStore.js";
 import LayerDetailDialog from "@/views/c-cpns/LayerDetailDialog.vue";
 import BoardSwitch from "@/views/c-cpns/BoardSwitch.vue";
 import ExtentHeight from "@/views/c-cpns/ExtentHeight.vue";
+import MainPageRight from "@/views/c-views/visualizationPart/mainPage/mainPageRight/MainPageRight.vue";
+import ToolList from "@/views/c-cpns/ToolList.vue";
+import PathPlan from "@/views/c-views/visualizationPart/mainPage/mainPageRight/PathPlan.vue";
+import SimulateFly from "@/views/c-views/visualizationPart/mainPage/mainPageRight/simulateFly.vue";
 export default {
   name: "VisualizationHome",
   components: {
+    SimulateFly,
+    PathPlan,
+    ToolList,
+    MainPageRight,
     ExtentHeight,
     BoardSwitch,
     LayerDetailDialog,

src/views/c-views/visualizationPart/mainPage/mainPageRight/MainPageRight.vue

@@ -10,8 +10,13 @@
         <span>{{item.label}}</span>
       </div>
     </template>
-    <template v-else>
-      <div v-for="(item ,index) in listWG" :key="index" class="single" @click="showWGLimit(item)" :class="[item.chosen?'single-icon-chosen':'single-icon']">
+    <template v-if="currentMenu === 'net'">
+      <div v-for="(item ,index) in listNet" :key="index" class="single" @click="showNetLimit(item)" :class="[item.chosen?'single-icon-chosen':'single-icon']">
+        <span>{{item.label}}</span>
+      </div>
+    </template>
+    <template v-if="currentMenu === 'cube'">
+      <div v-for="(item ,index) in listCube" :key="index" class="single" @click="showCubeLimit(item)" :class="[item.chosen?'single-icon-chosen':'single-icon']">
         <span>{{item.label}}</span>
       </div>
     </template>
@@ -21,7 +26,16 @@
 <script setup>
 import {ref} from "vue";
 import {useMapStore} from "@/store/mapStore.js";
-import {ThreeGrid, GeometryMeshPrismEffect, LimitHeightAnalysis} from "@/unit/map/addLayer.js";
+import {
+  GeometryMeshPrismEffect,
+  LimitHeightAnalysis,
+  ShowBuildingThreeCubeByInterface,
+  ShowNoFlyThreeCubeByInterface,
+  ShowRiverThreeCubeByInterface,
+  ShowRoadThreeCubeByInterface,
+  ShowThreeNet
+} from "@/unit/map/addLayer.js";
+import {gridBaseInfo} from "@/service/map.js";
 let menuList = ref([
   {
     name:"分层",
@@ -29,24 +43,29 @@ let menuList = ref([
     value:"fenceng"
   },
   {
-    name:"网格",
+    name:"网",
     chosen:false,
-    value:"wangluo"
+    value:"net"
   },
+  {
+    name:"格子",
+    chosen:false,
+    value:"cube"
+  }
 ])
 const currentMenu = ref('fenceng');
 const list = ref([
   {
-    label:'600米-1000米',
+    label:'300米-600米',
     chosen:false,
     value: {
-      start:600,
-      end:1000
+      start:300,
+      end:600
     },
     items:[{
       "id": 7,
       "name": "",
-      "depth": 400,
+      "depth": 300,
       "material": [
         4,138,255,
         0.44
@@ -54,16 +73,16 @@ const list = ref([
     }]
   },
   {
-    label:'500米-600米',
+    label:'120米-300米',
     chosen:false,
     value: {
-      start:500,
-      end:600
+      start:120,
+      end:300
     },
     items:[{
       "id": 6,
       "name": "",
-      "depth": 100,
+      "depth": 180,
       "material": [
         46,153,255,
         0.40
@@ -71,133 +90,100 @@ const list = ref([
     }]
   },
   {
-    label:'400米-500米',
+    label:'0米-120米',
     chosen:false,
     value: {
-      start:400,
-      end:500
+      start:0,
+      end:120
     },
     items:[{
       "id": 5,
       "name": "",
-      "depth": 100,
+      "depth": 120,
       "material": [
         81,174,255,
         0.36
       ]
     }]
-  },
+  }
+])
+const listNet = ref([
   {
-    label:'300米-400米',
+    id:"1",
+    value:24,
+    label:'二十四级网格(3m)',
     chosen:false,
-    value: {
-      start:300,
-      end:400
-    },
-    items:[{
-      "id": 4,
-      "name": "",
-      "depth": 100,
-      "material": [
-        118,198,254,
-        0.32
-      ]
-    }]
+    radius:1000,
+    layerHeight:400,
+    height:1200,
+    animationEnabled:false
   },
+  // {
+  //   id:"2",
+  //   value:23,
+  //   label:'二十三级网格(6m)',
+  //   chosen:false,
+  //   height:1200,
+  //   layerHeight:100,
+  //   animationEnabled:true
+  // },
   {
-    label:'200米-300米',
+    id:"3",
+    value:22,
+    label:'二十二级网格(11m)',
     chosen:false,
-    value: {
-      start:200,
-      end:300
-    },
-    items:[{
-      "id": 3,
-      "name": "",
-      "depth": 100,
-      "material": [
-        151,220,252,
-        0.28
-      ]
-    }]
+    radius:2000,
+    layerHeight:61.84,
+    height:1200,
+    animationEnabled:true
   },
+  // {
+  //   id:"4",
+  //   value:21,
+  //   label:'二十一级网格(23m)',
+  //   chosen:false,
+  //   layerHeight:7.73,
+  //   height:1200,
+  //   animationEnabled:false
+  // },
   {
-    label:'100米-200米',
+    id:"5",
+    value:20,
+    label:'二十级网格(46米)',
     chosen:false,
-    value: {
-      start:100,
-      end:200
-    },
-    items:[{
-      "id": 2,
-      "name": "",
-      "depth": 100,
-      "material": [
-        180,240,249,
-        0.24
-      ]
-    }]
+    radius:5000,
+    layerHeight:0.97,
+    height:1200,
+    animationEnabled:false
   },
+]);
+const listCube = ref([
   {
-    label:'0米-100米',
+    id:"1",
+    label:'建筑物(24级)',
     chosen:false,
-    value: {
-      start:0,
-      end:100
-    },
-    items:[{
-      "id": 1,
-      "name": "",
-      "depth": 100,
-      "material": [
-        201,254,246,
-        0.2
-      ]
-    }]
-  }
-])
-const listWG = ref([
-  {
-    label:'四级网格(18500米)',
-    chosen:false,
-    size:1850,
-    layerHeight:400,
-    height:1200,
-    animationEnabled:false
   },
   {
-    label:'五级网格(123.69米)',
+    id:"2",
+    label:'禁飞区(20级)',
     chosen:false,
-    size:123.69,
-    height:1200,
-    layerHeight:100,
-    animationEnabled:true
   },
   {
-    label:'六级网格(61.84米)',
+    id:"3",
+    label:'道路(22级)',
     chosen:false,
-    size:61.84,
-    layerHeight:61.84,
-    height:1200,
-    animationEnabled:true
   },
   {
-    label:'七级网格(7.73米)',
+    id:"4",
+    label:'河流(22级)',
     chosen:false,
-    size:7.73,
-    layerHeight:7.73,
-    height:1200,
-    animationEnabled:false
   },
   {
-    label:'八级网格(0.97米)',
+    id:"5",
+    label:'人口',
     chosen:false,
-    size:0.97,
-    layerHeight:0.97,
-    height:1200,
-    animationEnabled:false
   },
-])
+]);
 function showHeightLimit(item){
   //useMapStore().isLoading = true;
   list.value.forEach((i)=>{
@@ -219,17 +205,32 @@ function showHeightLimit(item){
   })
 }
 
-function showWGLimit(item){
-  listWG.value.forEach((i)=>{
+function showNetLimit(item){
+  listNet.value.forEach((i)=>{
     if(i.label == item.label){
       i.chosen = true
-      debugger
-      ThreeGrid({
-        "status":"show",
-        "size":i.size,
-        "layerHeight":i.layerHeight,
-        "height:":i.height,
-        "animationEnabled":i.animationEnabled,
+      gridBaseInfo({
+        radius:item.radius,
+        level:item.value
+      }).then(res =>{
+        if(res.data.code == "200"){
+          let data = res.data.data;
+          let size = {
+            xLength:data.list[0].xlength,
+            yLength:data.list[0].ylength,
+            zLength:data.list[0].zlength,
+          }
+          let origin = {
+            x:data.list[0].x -data.list[0].xlength/2,
+            y:data.list[0].y -data.list[0].ylength/2
+          }
+          ShowThreeNet({
+            "status":"show",
+            "size": size,
+            "origin": origin,
+            "buffer": item.radius * 2,
+          })
+        }
       })
     }else{
       i.chosen = false
@@ -243,6 +244,105 @@ function showWGLimit(item){
   })
 }
 
+function showCubeLimit(item){
+  listCube.value.forEach((i)=>{
+    if(i.label == item.label){
+      i.chosen = true
+      debugger
+      if(item.id == "1"){
+        gridBaseInfo({
+          radius:1000,
+          level:24
+        }).then(res =>{
+          debugger
+          if(res.data.code == "200"){
+            let data = res.data.data;
+            let size = {
+              xLength:data.list[0].xlength,
+              yLength:data.list[0].ylength,
+              zLength:data.list[0].zlength,
+            }
+            ShowBuildingThreeCubeByInterface({
+              "status":"show",
+              "size": size,
+              "level":24
+            })
+          }
+        })
+      }else if(item.id =="2"){
+        gridBaseInfo({
+          radius:1000,
+          level:20
+        }).then(res =>{
+          debugger
+          if(res.data.code == "200"){
+            let data = res.data.data;
+            let size = {
+              xLength:data.list[0].xlength,
+              yLength:data.list[0].ylength,
+              zLength:data.list[0].zlength,
+            }
+            ShowNoFlyThreeCubeByInterface({
+              "status":"show",
+              "size": size,
+              "level":20
+            })
+          }
+        })
+      }else if(item.id =="3"){
+        gridBaseInfo({
+          radius:1000,
+          level:22
+        }).then(res =>{
+          debugger
+          if(res.data.code == "200"){
+            let data = res.data.data;
+            let size = {
+              xLength:data.list[0].xlength,
+              yLength:data.list[0].ylength,
+              zLength:data.list[0].zlength,
+            }
+            ShowRoadThreeCubeByInterface({
+              "status":"show",
+              "size": size,
+              "level":22
+            })
+          }
+        })
+      }else if(item.id =="4"){
+        gridBaseInfo({
+          radius:1000,
+          level:22
+        }).then(res =>{
+          debugger
+          if(res.data.code == "200"){
+            let data = res.data.data;
+            let size = {
+              xLength:data.list[0].xlength,
+              yLength:data.list[0].ylength,
+              zLength:data.list[0].zlength,
+            }
+            ShowRiverThreeCubeByInterface({
+              "status":"show",
+              "size": size,
+              "level":22
+            })
+          }
+        })
+      }
+    }else{
+      i.chosen = false
+    }
+  })
+  GeometryMeshPrismEffect({
+    status:"hide",
+  });
+  LimitHeightAnalysis({
+    status:"hide"
+  })
+}
+
+
 function changeMenu(item){
   menuList.value.forEach((i)=>{
     if(i.name == item.name){
@@ -263,64 +363,28 @@ function changeMenu(item){
         {
           "id": 1,
           "name": "",
-          "depth": 100,
-          "material": [
-            201,254,246,
-            0.2
-          ]
-        },
-        {
-          "id": 2,
-          "name": "",
-          "depth": 100,
-          "material": [
-            180,240,249,
-            0.24
-          ]
-        },
-        {
-          "id": 3,
-          "name": "",
-          "depth": 100,
-          "material": [
-            151,220,252,
-            0.28
-          ]
-        },
-        {
-          "id": 4,
-          "name": "",
-          "depth": 100,
-          "material": [
-            118,198,254,
-            0.32
-          ]
-        },
-        {
-          "id": 5,
-          "name": "",
-          "depth": 100,
+          "depth": 120,
           "material": [
             81,174,255,
-            0.36
+            0.30
           ]
         },
         {
-          "id": 6,
+          "id": 2,
           "name": "",
-          "depth": 100,
+          "depth": 180,
           "material": [
             46,153,255,
             0.40
           ]
         },
         {
-          "id": 7,
+          "id": 3,
           "name": "",
-          "depth": 400,
+          "depth": 300,
           "material": [
             4,138,255,
-            0.44
+            0.50
           ]
         }
       ]
@@ -328,9 +392,12 @@ function changeMenu(item){
     LimitHeightAnalysis({
       status:"hide"
     })
-    ThreeGrid({
+    ShowThreeNet({
       status:"hide"
-    })
+    });
+    ShowBuildingThreeCubeByInterface({
+      status:"hide"
+    });
   }else{
     debugger
     GeometryMeshPrismEffect({
@@ -349,6 +416,7 @@ function changeMenu(item){
   right: 20px;
   top: 87px;
   width: 360px;
+  z-index: 2;
   .top-menu{
     width: 100%;
     height: 60px;

src/views/c-views/visualizationPart/mainPage/mainPageRight/PathPlan.vue

@@ -0,0 +1,334 @@
+<template>
+  <div id="pathPlan" :class="[useMapStore().path_planShow?'switch-right-active':'switch-right']">
+    <div class="top-menu">
+      <div v-for="(item,index) in menuList" class="menu-item" :class="[item.chosen?'top-menu-chosen':'top-menu-item']" :key="index" @click="changeMenu(item,index)">
+        <span>{{item.name}}</span>
+      </div>
+    </div>
+    <template v-if="currentMenu === 'auto'">
+      <div class="middle-content">
+          <div class="auto_item" @click="drawAction('start')">
+            <span>1、选择起点</span>
+          </div>
+          <div class="auto_item" @click="drawAction('end')">
+            <span>2、选择终点</span>
+          </div>
+        <div class="single-item">
+          <div class="auto_item">
+            <span>3、请输入高度</span>
+          </div>
+          <div class="auto_value">
+            <el-input v-model="height" placeholder="请输入高度(m)" ></el-input>
+          </div>
+        </div>
+        <div class="single-bottom">
+          <div class="auto_item item-bottom" @click="getAutoPath()">
+            <span>规划</span>
+          </div>
+          <div class="auto_item item-bottom" @click="getCube()">
+            <span>网格</span>
+          </div>
+          <div class="auto_item item-bottom" @click="flyPath()">
+            <span>模拟</span>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="middle-content middle-height">
+        <div class="auto_item" @click="drawPolylineAction('polyline')">
+          <span>1、绘制路径</span>
+        </div>
+        <div class="single-bottom">
+          <div class="auto_item item-bottom" @click="getAutoPath()">
+            <span>规划</span>
+          </div>
+          <div class="auto_item item-bottom" @click="getCube()">
+            <span>网格</span>
+          </div>
+          <div class="auto_item item-bottom" @click="getAutoPath()">
+            <span>模拟</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useMapStore} from "@/store/mapStore.js";
+import {DrawPath, DrawPoint, FlyGLTF, PathPipe, ShowThreeCube} from "@/unit/map/addLayer.js";
+import {queryGridByLine, searchPathByPoint} from "@/service/map.js";
+let menuList = ref([
+  {
+    name:"自动",
+    chosen:true,
+    value:"auto"
+  },
+  {
+    name:"手动",
+    chosen:false,
+    value:"handle"
+  },
+])
+const currentMenu = ref('auto');
+let currentDrawAction = "start";
+let startPoint = null;
+let endPoint = null;
+let height = ref(null);
+let currentLine = null;  //用于获取查询所有网格
+let flyPathArr = null;
+const mapStore = useMapStore();
+function changeMenu(item){
+  menuList.value.forEach((i)=>{
+    if(i.name == item.name){
+      i.chosen = true;
+      currentMenu.value = i.value
+    }else{
+      i.chosen = false
+    }
+  })
+}
+function drawAction(action){
+  currentDrawAction = action;
+  DrawPoint({
+    status:"show"
+  })
+}
+
+function drawPolylineAction(action){
+  currentDrawAction = action;
+  DrawPath({
+    status:"show"
+  })
+}
+
+
+function getDrawGeometry(){
+  if(currentDrawAction == "start"){
+    startPoint = mapStore.draw_geometry;
+  }else if(currentDrawAction == "end"){
+    endPoint = mapStore.draw_geometry;
+  }else if(currentDrawAction == "polyline"){
+    currentLine = [];
+    let path = mapStore.draw_geometry.paths[0];
+    flyPathArr = mapStore.draw_geometry.paths[0];
+    path.forEach((item)=>{
+      currentLine.push({
+        x:item[0],
+        y:item[1],
+        z:item[2]
+      })
+    })
+  }
+  currentDrawAction = null;
+}
+
+
+function getCube(){
+  if(currentLine){
+    queryGridByLine({
+      line:currentLine
+    }).then(res =>{
+      if(res.data.code == "200"){
+        debugger
+        let data = res.data.data.gridArr;
+        debugger
+        let size = {
+          xLength:data[0].scaleX,
+          yLength:data[0].scaleY,
+          zLength:data[0].scaleZ,
+        }
+        let points = [];
+        data.forEach((item)=>{
+         points.push({
+            x:item.locationX,
+            y:item.locationY,
+            z:item.locationZ
+         })
+        })
+        ShowThreeCube({
+          status:true,
+          size,
+          points
+        })
+      }
+    })
+  }
+}
+
+function flyPath(){
+  DrawPath({
+    status:"hide"
+  });
+  debugger
+  PathPipe({
+    status:"show",
+    paths:[flyPathArr]
+  })
+  FlyGLTF({
+    status:"show",
+    paths:flyPathArr
+  });
+}
+
+function getAutoPath(){
+  currentLine = null;
+  mapStore.isLoading = true;
+  searchPathByPoint({
+    start: {
+      x:startPoint.x,
+      y:startPoint.y,
+      z:startPoint.z
+    },
+    end: {
+      x:endPoint.x,
+      y:endPoint.y,
+      z:endPoint.z
+    },
+    height:height.value
+  }).then(res => {
+    mapStore.isLoading = false;
+    if(res.data.code == "200"){
+      let data  = res.data.data.line;
+      currentLine = res.data.data.line;
+      let path = [];
+      data.forEach((item) =>{
+        path.push([item.x,item.y,item.z]);
+      });
+      flyPathArr = path;
+      showAutoPath(path)
+    }
+  })
+}
+
+function showAutoPath(path){
+  DrawPath({
+    status:"show",
+    path
+  })
+}
+
+
+watch(() => mapStore.draw_geometry,(val) => {
+  getDrawGeometry()
+},{
+  immediate:true,
+  deep:true
+})
+</script>
+
+<style scoped lang="scss">
+#pathPlan {
+  position: absolute;
+  right: 20px;
+  top: 87px;
+  width: 360px;
+  z-index: 2;
+  background-image: url("../../../../../assets/imgs/lowAltitude/serviceBackground.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .top-menu{
+    width: 100%;
+    padding-top: 30px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    .menu-item{
+      width: 137px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      span{
+        font-family: YouSheBiaoTiHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        text-shadow: 0px 8px 1px rgba(19, 80, 143, 0.1);
+        background: linear-gradient(0deg, rgb(119, 186, 255) 0%, rgb(233, 248, 255) 73%, rgb(255, 255, 255) 100%);
+        opacity: 0.89;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    .top-menu-item{
+      background-image: url("../../../../../assets/imgs/lowAltitude/menu_unchosen.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .top-menu-chosen{
+      background-image: url("../../../../../assets/imgs/lowAltitude/menu_chosen.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .middle-height{
+    height: 300px;
+  }
+  .middle-content{
+    width: 100%;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .single-item{
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .auto_value{
+        height: 40px;
+      }
+    }
+    .auto_item{
+      width: 200px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      height: 50px;
+
+      background-image: url("../../../../../assets/imgs/lowAltitude/menu_chosen.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      span{
+        font-family: YouSheBiaoTiHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        text-shadow: 0px 8px 1px rgba(19, 80, 143, 0.1);
+        background: linear-gradient(0deg, rgb(119, 186, 255) 0%, rgb(233, 248, 255) 73%, rgb(255, 255, 255) 100%);
+        opacity: 0.89;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    .single-bottom{
+      display: flex;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      .item-bottom{
+        width: 80px;
+      }
+    }
+  }
+}
+.switch-right-active{
+  transition-property: transform;
+  transition-duration:1s;
+}
+.switch-right{
+  transition-property: transform;
+  transition-duration:1s;
+  transform: translateX(480px);
+}
+</style>

src/views/c-views/visualizationPart/mainPage/mainPageRight/simulateFly.vue

@@ -0,0 +1,310 @@
+<template>
+  <div id="simulateFly" :class="[useMapStore().simulate_flyShow?'switch-right-active':'switch-right']">
+    <div class="top-menu">
+      <div v-for="(item,index) in menuList" class="menu-item" :class="[item.chosen?'top-menu-chosen':'top-menu-item']" :key="index" @click="changeMenu(item,index)">
+        <span>{{item.name}}</span>
+      </div>
+    </div>
+    <template v-if="currentMenu === 'existing'">
+      <div v-for="(item ,index) in existingPathList" :key="index" class="single" @click="showPath(item)" :class="[item.chosen?'single-icon-chosen':'single-icon']">
+        <span>{{item.begin}}--{{item.end}}</span>
+      </div>
+    </template>
+    <template v-else>
+      <div v-for="(item ,index) in planPathList" :key="index" class="single" :class="[item.chosen?'single-icon-chosen':'single-icon']">
+        <span>{{item.begin}}--{{item.end}}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {useMapStore} from "@/store/mapStore.js";
+import {PathPipe} from "@/unit/map/addLayer.js";
+let menuList = ref([
+  {
+    name:"现有航路",
+    chosen:true,
+    value:"existing"
+  },
+  {
+    name:"规划航路",
+    chosen:false,
+    value:"plan"
+  },
+]);
+let currentPaths = [];//当前选中的路径
+let existingPathList = ref([
+  {
+    id:"1",
+    begin:"合生汇",
+    end:"同济大学",
+    path:[
+      [4399.5433631362393, 7370.3376136757433,0],
+      [4307.0713031925261, 7251.5063864272088,100],
+      [4207.5877708923072, 7308.6565007288009,100],
+      [4050.9541242914274, 7308.6565007288009,100],
+      [3661.4866786887869, 7162.6062086299062,100],
+      [2960.8686107881367, 6910.7223715279251,100],
+      [2910.0685091875494, 6045.003973422572,100],
+      [2793.651609685272, 5721.1533257234842,0]
+    ],
+    chosen:false
+  },
+  {
+    id:"2",
+    begin:"合生汇",
+    end:"复旦大学",
+    path:[
+      [4399.5433631362393, 7370.3376136757433,0],
+      [4307.0713031925261, 7251.5063864272088,100],
+      [4207.5877708923072, 7308.6565007288009,100],
+      [4050.9541242914274, 7308.6565007288009,100],
+      [3661.4866786887869, 7162.6062086299062,100],
+      [3113.2689155880362, 7162.6062086299062,100]
+    ],
+    chosen:false
+  },
+  {
+    id:"3",
+    begin:"合生汇",
+    end:"复旦大学学生公寓",
+    path:[
+      [4399.5433631362393, 7370.3376136757433,0],
+      [4307.0713031925261, 7251.5063864272088,100],
+      [4207.5877708923072, 7308.6565007288009,100],
+      [4050.9541242914274, 7308.6565007288009,100],
+      [3661.4866786887869, 7162.6062086299062,100],
+      [3542.9531082902104, 7171.0728922281414,100],
+      [3352.6202267482877, 7543.2479691505432,100],
+      [2515.309386334382, 7247.2730446271598,100],
+      [2481.4426519349217, 7477.9901727326214,100]
+    ],
+    chosen:false
+  },
+  {
+    id:"4",
+    begin:"合生汇",
+    end:"财大绿叶步行街",
+    path:[
+      [4399.5433631362393, 7370.3376136757433,0],
+      [4307.0713031925261, 7251.5063864272088,100],
+      [4207.5877708923072, 7308.6565007288009,100],
+      [4050.9541242914274, 7308.6565007288009,100],
+      [3661.4866786887869, 7162.6062086299062,100],
+      [3542.9531082902104, 7171.0728922281414,100],
+      [3352.6202267482877, 7543.2479691505432,100],
+      [3084.568078446202, 8067.3945490997285,100],
+      [2648.6596530349925, 8013.507910432294,0]
+    ],
+    chosen:false
+  },
+  {
+    id:"5",
+    begin:"合生汇",
+    end:"国正中心",
+    path:[
+      [4399.5433631362393, 7370.3376136757433,0],
+      [4307.0713031925261, 7251.5063864272088,100],
+      [4207.5877708923072, 7308.6565007288009,100],
+      [4050.9541242914274, 7308.6565007288009,100],
+      [3661.4866786887869, 7162.6062086299062,100],
+      [3542.9531082902104, 7171.0728922281414,100],
+      [2973.5686361864209, 8284.441785633564,100],
+      [3316.469321988523, 8288.6751274317503,100],
+      [3316.469321988523, 8417.7920523341745,0]
+    ],
+    chosen:false
+  },
+  {
+    id:"6",
+    begin:"合生汇",
+    end:"互联宝地",
+    path:[
+      [4399.5433631362393, 7370.3376136757433,0],
+      [4673.2553688948974, 7064.3463766910136,100],
+      [4946.3059149952605, 5978.4942049868405,100],
+      [5183.24076386448, 5030.0933498516679,100],
+      [5095.9280892377719, 4891.1868220418692,100],
+      [5508.6789147406816, 4220.4667305964977,0]
+    ],
+    chosen:false
+  },
+  {
+    id:"7",
+    begin:"合生汇",
+    end:"共青森林公园",
+    path:[
+      [4399.5433631362393, 7370.3376136757433,0],
+      [4645.6063552629203, 7362.4000978022814,100],
+      [5751.5669005159289, 7709.0049576759338,100],
+      [6475.7329321820289, 7954.5387820750475,100],
+      [6469.3829194819555, 8229.7059990745038,100],
+      [7199.6343799848109, 8585.3067102786154,100],
+      [7504.4349895855412, 9167.3912077825516,100],
+      [7280.0678741866723, 9861.6592629849911,0]
+    ],
+    chosen:false
+  },
+  {
+    id:"8",
+    begin:"合生汇",
+    end:"黄兴公园-去程",
+    path:[
+      [5533.4394958499997, 6674.1814939699998,0],
+      [5565.1395865100003, 6664.3312929399999,100],
+      [5771.0319604699998, 7084.9363842700004,100],
+      [5747.4897482899996, 7181.6602556999997,100],
+      [5775.4378630900001, 7452.3969179300002,100],
+      [5773.1627494000004, 7551.3616085399999,100],
+      [5756.9613519900004, 7714.4921131499996,100],
+      [5090.5727929900004, 7511.65297938,100],
+      [4777.61920852, 7378.2719266800004,100],
+      [4445.5372873599999, 7295.6718325900001,100],
+      [4413.6341138199996, 7361.9600904199997,0]
+    ],
+    chosen:false
+  },
+  {
+    id:"9",
+    begin:"合生汇",
+    end:"黄兴公园-返程",
+    path:[
+      [4419.4892839994282, 7361.3196348026395,0],
+      [4722.4523340091109, 7353.5317879915237,100],
+      [5082.947024250403, 7512.1369348522276,100],
+      [5757.1514683701098, 7714.9800673611462,100],
+      [5775.1619675792754, 7551.3184095919132,100],
+      [5774.801678430289, 7449.5138318110257,100],
+      [5737.2197882905602, 7127.4370903726667,100],
+      [5591.3118801191449, 6784.3444970101118,100],
+      [5542.6769579108804, 6669.9844871591777,100],
+      [5533.4394958522171, 6674.1814939714968,0]
+    ],
+    chosen:false
+  },
+]);
+let planPathList = ref([
+  {
+    id:"1",
+    begin:"xxxxx",
+    end:"xxxxx",
+    chosen:false
+  },
+  {
+    id:"2",
+    begin:"xxxxx",
+    end:"xxxxx",
+    chosen:false
+  },
+])
+const currentMenu = ref('existing');
+function changeMenu(item){
+  menuList.value.forEach((i)=>{
+    if(i.name == item.name){
+      i.chosen = true;
+      currentMenu.value = i.value
+    }else{
+      i.chosen = false
+    }
+  })
+}
+function showPath(item){
+  existingPathList.value.forEach((i)=>{
+    if(item.id == i.id){
+      i.chosen = !i.chosen
+    }
+  });
+  currentPaths = [];
+  debugger
+  existingPathList.value.forEach((i)=>{
+    if(i.chosen){
+      currentPaths.push(i.path);
+    }
+  });
+  PathPipe({
+    status:"show",
+    paths:currentPaths
+  })
+}
+</script>
+
+<style scoped lang="scss">
+#simulateFly {
+  position: absolute;
+  right: 20px;
+  top: 87px;
+  width: 360px;
+  z-index: 2;
+  .top-menu{
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    .menu-item{
+      width: 137px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      span{
+        font-family: YouSheBiaoTiHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        text-shadow: 0px 8px 1px rgba(19, 80, 143, 0.1);
+        background: linear-gradient(0deg, rgb(119, 186, 255) 0%, rgb(233, 248, 255) 73%, rgb(255, 255, 255) 100%);
+        opacity: 0.89;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    .top-menu-item{
+      background-image: url("../../../../../assets/imgs/lowAltitude/menu_unchosen.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .top-menu-chosen{
+      background-image: url("../../../../../assets/imgs/lowAltitude/menu_chosen.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .single{
+    width: 100%;
+    height: 45px;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span{
+      color:rgba(255,255,255,0.8);
+      font-size: 16px;
+    }
+  }
+  .single-icon{
+    cursor: pointer;
+    background-image: url("../../../../../assets/imgs/lowAltitude/board.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .single-icon-chosen{
+    background-image: url("../../../../../assets/imgs/lowAltitude/board_chosen.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.switch-right-active{
+  transition-property: transform;
+  transition-duration:1s;
+}
+.switch-right{
+  transition-property: transform;
+  transition-duration:1s;
+  transform: translateX(480px);
+}
+</style>

vite.config.js

@@ -32,6 +32,26 @@ export default defineConfig({
                 // 跨域
                 changeOrigin: true,
                 rewrite: (path) => path.replace(/^\/addressapi/, '')
+            },
+            '/netapi': {
+                // 代理请求之后的请求地址（你的真实接口地址)
+                target: 'http://58.34.215.19:19259/',
+                //target: 'http://localhost:9250/',
+                secure: false,
+                ws: true,
+                // 跨域
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/netapi/, '')
+            },
+            '/zwapi': {
+                // 代理请求之后的请求地址（你的真实接口地址)
+                target: 'http://10.90.9.143:9252/',
+                //target: 'http://localhost:9250/',
+                secure: false,
+                ws: true,
+                // 跨域
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/zwapi/, '')
             }
         },
     },