Explorar el Código

增加地图透明度组件、水下地形视角

sbj hace 1 año
padre
commit
e2bd6f098a
Se han modificado 3 ficheros con 63 adiciones y 4 borrados
  1. 15 0
      src/utils/map/ArcgisUtil.js
  2. 16 0
      src/utils/map/Common.js
  3. 32 4
      src/utils/map/Layer.js

+ 15 - 0
src/utils/map/ArcgisUtil.js

@@ -62,6 +62,21 @@ export function changeMap(type){
     bridge.Invoke(params);
 }
 
+/**
+ * 设置透明度
+ * 参数 opacity 范围 0-1,0全透明,1不透明
+ */
+export function setOpacity(opacity){
+    let params = {
+        "ActionName": "SetOpacity",
+        "Parameters": {
+            "opacity": opacity
+        }
+    };
+    bridge.Invoke(params);
+}
+
+
 /**
  * 添加图层
  * @param data 地图参数

+ 16 - 0
src/utils/map/Common.js

@@ -7,6 +7,9 @@ import { fullExtent, clearMap, calculation, changeMap, setCamera,
     getMapScale
 } from '@/utils/map/ArcgisUtil'
 
+/**
+ * 初始视角
+ */
 export function setCenter() {
     setCamera({
         x:2267,
@@ -15,4 +18,17 @@ export function setCenter() {
         heading:100,
         tilt:0
     })
+}
+
+/**
+ * 水下地形视角
+ */
+export function setSxdxCamera() {
+    setCamera({
+        x:2103,
+        y:100,
+        z:-40,
+        heading:0,
+        tilt:90
+    })
 }

+ 32 - 4
src/utils/map/Layer.js

@@ -2,9 +2,10 @@
  * 图层加载工具类
  */
 import {setBoat} from '@/utils/map/Boat'
-import {addLayer} from "@/utils/map/ArcgisUtil";
+import {addLayer,setOpacity} from "@/utils/map/ArcgisUtil";
+import {setCenter,setSxdxCamera} from '@/utils/map/Common'
 
-let layerList = ['cb','mt','jjq','dtq','md','sszh','hb','hd','sxdx','2022.1','2022.2','2021.1','2021.2','2020.1','2020.2']
+let layerList = ['cb','mt','jjq','dtq','md','sszh','hb','hd','sxdx','2023.1','2022.1','2022.2','2021.1','2021.2','2020.1','2020.2']
 
 export function closeAllLayer() {
     for (let i = 0; i < layerList.length;i++) {
@@ -13,6 +14,26 @@ export function closeAllLayer() {
 }
 
 export function addLayerByName(name,isShow){
+    // 存储到打开图层列表
+    // if(isShow){
+    //     let isExist = false
+    //     for(let i = layerList.length-1; i >=0;i--){
+    //         if(layerList[i] == name){
+    //             isExist = true
+    //         }
+    //     }
+    //     if(!isExist){
+    //         layerList.push(name)
+    //     }
+    // }else{
+    //     for(let i = layerList.length-1; i >=0;i--){
+    //         if(layerList[i] == name){
+    //             layerList.slice()
+    //         }
+    //     }
+    // }
+    // console.log(layerList)
+
     switch (name) {
         // 船舶
         case 'cb':
@@ -121,11 +142,18 @@ export function addLayerByName(name,isShow){
                 token: '',
                 is_goto: true
             })
+            // if(isShow){
+            //     setOpacity(0.4)
+            //     setSxdxCamera()
+            // }else{
+            //     setOpacity(1)
+            //     setCenter()
+            // }
             break
         case '2023.1':
             addLayer({
-                id: 'dbsLayer',
-                title: 'dbsLayer',
+                id: 'deepthLayer202301',
+                title: 'deepthLayer202301',
                 type: 'scene',
                 url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/多波束/SceneServer',
                 visible: isShow,