更新部分地图功能，增加图层加载

src/utils/map/ArcgisUtil.js

@@ -2,9 +2,14 @@
 import CityGis from "@/utils/map/CityGis.Bridge";
 import { ElMessage } from 'element-plus'
 import 'element-plus/es/components/message/style/css'
+import {onLocationBoat} from '@/utils/map/Boat'
+
 let bridge
 let calculateFinish = false
 let drawGeometry
+let showBoat = false
+let mapExtent
+let mapScale
 
 export function initBridge(){
     bridge = new CityGis.Bridge({
@@ -22,10 +27,10 @@ export function initBridge(){
                 break;
             case "MapExtentChanged":
                 console.log(arg)
-                // 地图标记
-                this.mapExtent = arg.data.result
-                if(this.showBoat){
-                    this.djldShip()
+                mapExtent = arg.data.result
+                mapScale = arg.data.scale
+                if(showBoat){
+                    onLocationBoat()
                 }
                 break;
             default:
@@ -33,6 +38,17 @@ export function initBridge(){
         }
     });
 }
+
+// 获取地图范围
+export function getMapExtent() {
+    return mapExtent
+}
+
+// 获取地图比例尺
+export function getMapScale() {
+    return mapScale
+}
+
 /*切换底图*/
 export function changeMap(type){
     let params = {
@@ -45,6 +61,29 @@ export function changeMap(type){
     bridge.Invoke(params);
 }
 
+/**
+ * 添加图层
+ * @param data 地图参数
+ * @param isShow 显隐控制 true 显示，false 隐藏
+ */
+export function addLayer(data){
+    let params = {
+        "ActionName": "AddLayer",
+        "Parameters": {
+            "id": data.id,
+            "title": data.title,
+            "visible": data.visible,
+            "opacity": data.opacity,
+            // "url": "http://10.83.68.109:6080/arcgis/rest/services/ghjg_cxall/MapServer",
+            "url": data.url,
+            "type": data.type,
+            "token": data.token,
+            "is_goto": data.is_goto
+        }
+    };
+    bridge.Invoke(params);
+}
+
 /* 定位船舶 */
 /*参数格式：
 [
@@ -69,7 +108,7 @@ export function addBoats(boats){
             "data": boats.data
         }
     };
-    console.log('定位：'+JSON.stringify(params))
+    // console.log('定位：'+JSON.stringify(params))
     bridge.Invoke(params);
 }
 
@@ -298,8 +337,8 @@ export function setCamera(data){
                 "z": data.z,
                 "spatialReference": 102100
             },
-            "heading": 0,
-            "tilt": 60
+            "heading": data.heading,
+            "tilt": data.tilt,
         }
     };
     bridge.Invoke(params);

src/utils/map/Boat.js

@@ -3,7 +3,8 @@
  */
 import { fullExtent, clearMap, calculation, changeMap, setCamera,
     layerControl, layerQuery, addGraphic, draw, getDrawGeometry,
-    addBoats, setBoatHistory, playBoatHistory
+    addBoats, setBoatHistory, playBoatHistory,
+    getMapScale
 } from '@/utils/map/ArcgisUtil'
 import {GetHpjShip} from "@/apis/ship";
 
@@ -15,7 +16,7 @@ export function locationBoat(mmsi){
     GetHpjShip().then(res=>{
         let data = res.Result.data
         let boats = {
-            "scale": 2000,
+            "scale": getMapScale(),
             "goto": true,
             "data": []
         }
@@ -35,20 +36,34 @@ export function locationBoat(mmsi){
                 boats.data.push(boat)
             }
         }
-        console.log('定位：'+JSON.stringify(boats))
+        // console.log('定位：'+JSON.stringify(boats))
         addBoats(boats)
     })
 }
 
 // 船舶撒点
-export function setBoat(){
-    if(!showBoat)
-        showBoat = true
-    onLocationBoat()
-    if(boatInterval!=null){
-        clearInterval(boatInterval)
+export function setBoat(isShow){
+    if(isShow) {
+        if (!showBoat){
+            showBoat = true
+        }else{
+            return
+        }
+
+        onLocationBoat()
+        if (boatInterval != null) {
+            clearInterval(boatInterval)
+        }
+        boatInterval = setInterval(onLocationBoat, 10000)
+    }else{
+        if (showBoat){
+            showBoat = false
+        }
+        if (boatInterval != null) {
+            clearInterval(boatInterval)
+        }
+        clearMap({is_draw: false, is_search:true, layers: ['boatLayer','boatPathLayer']})
     }
-    boatInterval = setInterval(onLocationBoat,10000)
 }
 
 // 加载船舶
@@ -56,7 +71,7 @@ function onLocationBoat(){
     GetHpjShip().then(res=>{
         let data = res.Result.data
         let boats = {
-            "scale": 5000,
+            "scale": getMapScale(),
             "goto": false,
             "data": []
         }

src/utils/map/WaterPassenger.js

@@ -1,9 +1,10 @@
 /**
  * 水上客运地图功能组件，通过调用封装好的基础地图组件实现特定业务功能
  */
-import { fullExtent, clearMap, calculation, changeMap, setCamera,
+import {
+    fullExtent, clearMap, calculation, changeMap, setCamera,
     layerControl, layerQuery, addGraphic, draw, getDrawGeometry,
-    addBoats, addBoatHistory
+    addBoats, addBoatHistory, addLayer
 } from '@/utils/map/ArcgisUtil'
 
 import {GetPjylLinePaths, GetWaterFlightPoints, GetShipRout} from "@/apis/ssky";
@@ -31,7 +32,7 @@ export function pjylLine(isShow){
                     type: 'polygon',
                     data: points,
                     edit: false,
-                    temp: true,
+                    temp: false,
                     clear: false,
                     goto: true,
                     attributes: null,
@@ -51,6 +52,13 @@ export function pjylLine(isShow){
         })
     }else{
         clearMap({is_draw: false, is_search:true, layers: []})
+        setCamera({
+            x:2667,
+            y:463,
+            z:4000,
+            heading:100,
+            tilt:0
+        })
     }
 
 }
@@ -64,7 +72,7 @@ export function onePjylPortLocation(data,isShow){
             type: 'point',
             data:[data.mapx,data.mapy,20],
             edit: false,
-            temp: true,
+            temp: false,
             clear: false,
             goto: true,
             attributes: null,
@@ -88,6 +96,13 @@ export function onePjylPortLocation(data,isShow){
         })
     }else{
         clearMap({is_draw: false, is_search:true, layers: []})
+        setCamera({
+            x:2667,
+            y:463,
+            z:4000,
+            heading:100,
+            tilt:0
+        })
     }
 
 }
@@ -138,6 +153,13 @@ export function oneDjldPortLocation(data,isShow){
         })*/
     }else{
         clearMap({is_draw: false, is_search:true, layers: []})
+        setCamera({
+            x:2667,
+            y:463,
+            z:4000,
+            heading:100,
+            tilt:0
+        })
     }
 }
 
@@ -158,39 +180,49 @@ export function djldPortHandle(res) {
 
 // 对江轮渡航线批量展示
 export function djldLineAll(isShow) {
-    if(isShow){
-        GetShipRout({keywords:'',type:''}).then(res =>{
-            let list = res.data.Rows.list;
-            for(let i = 0; i < list.length;i++){
-                let lineData = list[i].pointList;
-                let lineName = list[i].name;
-                let points = []
-                for(let j=0;j<lineData.length;j++){
-                    let point = [Number(lineData[j].mapx),Number(lineData[j].mapy)]
-                    points.push(point)
-                }
-                let params = {
-                    title: lineName,
-                    type: 'polyline',
-                    data: points,
-                    edit: false,
-                    clear: false,
-                    temp: false,
-                    goto: false,
-                    attributes: null,
-                    symbol: {
-                        type: "simple-line",
-                        color: [255, 255, 0],
-                        width: 2
-                    }
-                }
-                // 绘制到地图上
-                addGraphic(params)
-            }
-        })
+    addLayer({
+        id: 'djldLayer',
+        title: 'djldLayer',
+        type: 'feature',
+        url: 'http://10.83.68.109:6080/arcgis/rest/services/water_passenger_3857/MapServer/5',
+        visible: isShow,
+        opacity: 1,
+        token: '',
+        is_goto: true
+    })
+   /* if(isShow){
+        // GetShipRout({keywords:'',type:''}).then(res =>{
+        //     let list = res.data.Rows.list;
+        //     for(let i = 0; i < list.length;i++){
+        //         let lineData = list[i].pointList;
+        //         let lineName = list[i].name;
+        //         let points = []
+        //         for(let j=0;j<lineData.length;j++){
+        //             let point = [Number(lineData[j].mapx),Number(lineData[j].mapy)]
+        //             points.push(point)
+        //         }
+        //         let params = {
+        //             title: lineName,
+        //             type: 'polyline',
+        //             data: points,
+        //             edit: false,
+        //             clear: false,
+        //             temp: false,
+        //             goto: false,
+        //             attributes: null,
+        //             symbol: {
+        //                 type: "simple-line",
+        //                 color: [255, 255, 0],
+        //                 width: 2
+        //             }
+        //         }
+        //         // 绘制到地图上
+        //         addGraphic(params)
+        //     }
+        // })
     }else{
         clearMap({is_draw: false, is_search: true, layers: []})
-    }
+    }*/
 }
 
 // 对江轮渡航线
@@ -226,6 +258,13 @@ export function djldLine(lineName,isShow){
         })
     }else{
         clearMap({is_draw: false, is_search:true, layers: []})
+        setCamera({
+            x:2667,
+            y:463,
+            z:4000,
+            heading:100,
+            tilt:0
+        })
     }
 
 }

src/views/map/Index.vue

@@ -6,18 +6,27 @@
             <button @click="clearMap()">清除</button>
             <button @click="calculation('distance')">测距</button>
             <button @click="calculation('area')">侧面积</button>
+            <button @click="test('初始视角')">初始视角</button>
             <button @click="test('浦江游览码头')">浦江游览码头</button>
             <button @click="test('对江轮渡码头')">对江轮渡码头</button>
             <button @click="test('浦江游览航线')">浦江游览航线</button>
             <button @click="test('对江轮渡航线')">对江轮渡航线</button>
-            <button @click="test('船舶撒点')">船舶撒点</button>
-            <button @click="test('船舶定位')">船舶定位</button>
+            <button @click="test('船舶定位')">单船定位</button>
+            <button @click="test('船舶撒点')">船舶</button>
+            <button @click="test('码头泊位')">码头泊位</button>
+            <button @click="test('航道')">航道</button>
+            <button @click="test('锚地')">锚地</button>
+            <button @click="test('掉头区')">掉头区</button>
+            <button @click="test('警戒区')">警戒区</button>
+            <button @click="test('水上综合服务器')">水上综合服务器</button>
+            <button @click="test('航标')">航标</button>
+            <button @click="test('水下地形')">水下地形</button>
         </div>
     </div>
 </template>
 
 <script>
-    import {initBridge,fullExtent,calculation,clearMap} from "@/utils/map/ArcgisUtil"
+    import {initBridge,fullExtent,calculation,clearMap,setCamera,addLayer} from "@/utils/map/ArcgisUtil"
     import {pjylLine, djldLine,djldLineAll,onePjylPortLocation,oneDjldPortLocation} from '@/utils/map/WaterPassenger'
     import {setBoat, setBoatPath, onLocationBoat, locationBoat} from '@/utils/map/Boat'
 
@@ -32,11 +41,27 @@
                 isShowDjldPort:false,
                 isShowPjylLine:false,
                 isShowDjldLine:false,
+                isShowBoat:false,
+                isShowPortLayer:false,
+                isShowJjqLayer:false,
+                isShowDtqLayer:false,
+                isShowMdLayer:false,
+                isShowSsfwqLayer:false,
+                isShowHbLayer:false,
+                isShowHdLayer:false,
+                isShowDbsLayer:false,
             }
         },
         mounted(){
             //加载地图控件
             initBridge();
+            setCamera({
+                x:2667,
+                y:463,
+                z:4000,
+                heading:100,
+                tilt:0
+            })
         },
         methods:{
             fullExtent(){fullExtent()},
@@ -51,7 +76,7 @@
                     case '浦江游览码头':
                         this.isShowPjylPort = !this.isShowPjylPort
                         onePjylPortLocation({
-                            'portName':'东方明珠旅游码头',
+                            'portName':'金陵东路轮渡码头',
                             'mapx':'2360.10554497',
                             'mapy':'794.13869415'
                         },this.isShowPjylPort)
@@ -74,7 +99,8 @@
                         djldLineAll(this.isShowDjldLine)
                         break
                     case '船舶撒点':
-                        setBoat()
+                        this.isShowBoat = !this.isShowBoat
+                        setBoat(this.isShowBoat)
                         break
                     case '船舶轨迹':
                         setBoatPath()
@@ -82,6 +108,120 @@
                     case '船舶定位':
                         locationBoat('413810782')
                         break
+                    case '初始视角':
+                        setCamera({
+                            x:2667,
+                            y:463,
+                            z:4000,
+                            heading:100,
+                            tilt:0
+                        })
+                        break
+                    case '码头泊位':
+                        this.isShowPortLayer = !this.isShowPortLayer
+                        addLayer({
+                            id: 'portLayer',
+                            title: 'portLayer',
+                            type: 'feature',
+                            url: 'http://10.83.68.109:6080/arcgis/rest/services/ghjg_cxall_3857/MapServer/28',
+                            visible: this.isShowPortLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    case '警戒区':
+                        this.isShowJjqLayer = !this.isShowJjqLayer
+                        addLayer({
+                            id: 'jjqLayer',
+                            title: 'jjqLayer',
+                            type: 'feature',
+                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/4',
+                            visible: this.isShowJjqLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    case '掉头区':
+                        this.isShowDtqLayer = !this.isShowDtqLayer
+                        addLayer({
+                            id: 'dtqLayer',
+                            title: 'dtqLayer',
+                            type: 'feature',
+                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/3',
+                            visible: this.isShowDtqLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    case '锚地':
+                        this.isShowMdLayer = !this.isShowMdLayer
+                        addLayer({
+                            id: 'mdLayer',
+                            title: 'mdLayer',
+                            type: 'feature',
+                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/5',
+                            visible: this.isShowMdLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    case '水上综合服务器':
+                        this.isShowSsfwqLayer = !this.isShowSsfwqLayer
+                        addLayer({
+                            id: 'ssfwqLayer',
+                            title: 'sszhfwqLayer',
+                            type: 'feature',
+                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/2',
+                            visible: this.isShowSsfwqLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    case '航标':
+                        this.isShowHbLayer = !this.isShowHbLayer
+                        addLayer({
+                            id: 'hbLayer',
+                            title: 'hbLayer',
+                            type: 'feature',
+                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/0',
+                            visible: this.isShowHbLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    case '航道':
+                        this.isShowHdLayer = !this.isShowHdLayer
+                        addLayer({
+                            id: 'channelLayer',
+                            title: 'channelLayer',
+                            type: 'feature',
+                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/1',
+                            visible: this.isShowHdLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    case '水下地形':
+                        this.isShowDbsLayer = !this.isShowDbsLayer
+                        addLayer({
+                            id: 'dbsLayer',
+                            title: 'dbsLayer',
+                            type: 'scene',
+                            url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/多波束/SceneServer',
+                            visible: this.isShowDbsLayer,
+                            opacity: 1,
+                            token: '',
+                            is_goto: true
+                        })
+                        break
+                    default:
                 }
             },
         }
@@ -96,7 +236,7 @@
     }
 
     #tool_div {
-        display: none;
+        display: block;
         background-color: #cccccc;
         z-index: 10;
         position: absolute;