新增地图切换和船舶面板回调

src/apis/ship.js

@@ -13,4 +13,13 @@ export function GetBoatAISHistoryByMMSI(data) {
         method: "post",
         data: data
     })
+}
+
+
+export function GetShipHistoryByArea(data) {
+    return request({
+        url: '/digitalTwain/getShipHistory',
+        method: "post",
+        data: data
+    })
 }

src/utils/map/ArcgisUtil.js

@@ -7,7 +7,8 @@ import bus from '@/utils/bus';
 
 let bridge
 let calculateFinish = false
-let drawGeometry
+// let drawGeometry = null
+let drawResult = null
 let showBoat = false
 let mapExtent
 let mapScale
@@ -17,8 +18,8 @@ export function initBridge(){
     bridge = new CityGis.Bridge({
         id: "i_map",
         // url: "http://10.83.68.108:8090/mapVue/#/map", //政务网
-        url: "http://10.83.68.108:8090/mapWidgetVue/#/map", //政务网
-        // url: "http://localhost:8081/#/map", //政务网
+        // url: "http://10.83.68.108:8090/mapWidgetVue/#/map", //政务网
+        url: "http://localhost:8081/#/map", //政务网
         onReady: function(){
             console.log("地图创建完成");
         }
@@ -36,10 +37,13 @@ export function initBridge(){
                     onLocationBoat()
                 }
                 break;
-            case "BoatClickObject":
+            case "MapClickObject":
                 clickGraphic = arg.data.graphic
-                console.log('mmsi:',clickGraphic.attributes.mmsi)
-                bus.emit('ueRec_BoatClick',{'mmsi':clickGraphic.attributes.mmsi})
+                // 点击船舶则打开船舶面板
+                if(clickGraphic.attributes.mmsi){
+                    bus.emit('ueRec_BoatClick',{'mmsi':clickGraphic.attributes.mmsi})
+                }
+
                 break
             default:
                 console.log(JSON.stringify(arg.data, null, 4))
@@ -162,6 +166,53 @@ export function setBoatHistory(datas){
     bridge.Invoke(params);
 }
 
+/* 绘制多船轨迹 */
+/*参数格式：
+datas:[
+[
+    {
+        "mmsi": 123456789,
+        "mapx": 2755.61767,
+        "mapy": 1521.00687,
+        "direction": 0,
+        "gpsTime": "2021/1/18 9:40:53"
+    },
+    {
+        "mmsi": 123456789,
+        "mapx": 2705.61767,
+        "mapy": 1481.00687,
+        "direction": 0,
+        "gpsTime": "2021/1/18 10:07:19"
+    }
+    ],[
+{
+        "mmsi": 123456790,
+        "mapx": 2755.61767,
+        "mapy": 1521.00687,
+        "direction": 0,
+        "gpsTime": "2021/1/18 9:40:53"
+    },
+    {
+        "mmsi": 123456790,
+        "mapx": 2705.61767,
+        "mapy": 1481.00687,
+        "direction": 0,
+        "gpsTime": "2021/1/18 10:07:19"
+    }
+    ]
+]*/
+export function setAreaBoatHistory(param){
+    let params = {
+        "ActionName": "SetAreaBoatHistory",
+        "Parameters": {
+            "startTime": param.startTime,
+            "endTime": param.endTime,
+            "data":param.datas
+        }
+    };
+    bridge.Invoke(params);
+}
+
 /**
  * 开始：start，
  * 暂停：pause，
@@ -179,6 +230,29 @@ export function playBoatHistory(type){
     bridge.Invoke(params);
 }
 
+/**
+ * 开始：start，
+ * 暂停：pause，
+ * 继续：resume，
+ * 停止：stop
+ * @param type
+ */
+export function playMultiBoatHistory(type){
+    let params = {
+        "ActionName": "PlayMultiBoatHistory",
+        "Parameters": {
+            "status": type
+        }
+    };
+    bridge.Invoke(params);
+    bridge.addEventListener((arg) => {
+        switch (arg.action) {
+            case "MapIsReady":
+                break;
+        }
+    });
+}
+
 /**
  * 清除船舶轨迹
  * @constructor
@@ -338,8 +412,8 @@ export function draw(type){
     bridge.Invoke(params);
     bridge.addEventListener((arg) => {
         if(arg.action == "DrawComplete"){
-
-            return drawGeometry = arg.data.geometry
+            drawResult = arg.data
+            // drawGeometry = arg.data.geometry
         }
     });
 }
@@ -385,7 +459,7 @@ export function setCamera(data){
 /**
  * 清空地图
  * 下面是支持的图层，可多选
- * layers:['sketchLayer','bufferLayer','tempLayer','boatLayer','boatPathLayer']
+ * layers:['sketchLayer','bufferLayer','tempLayer','boatLayer','boatPathLayer','boatGraphicLayer']
  * is_draw 对应图形绘制
  * is_search 对应点查询和图形标记
  * */
@@ -402,6 +476,31 @@ export function clearMap(data){
     bridge.Invoke(params);
 }
 
-export function getDrawGeometry(){
-    return drawGeometry
+export function getDrawResult(){
+    return drawResult
+}
+
+/**
+ * 开启船舶模拟
+ * */
+export function openBoatDriving(data){
+    let params = {
+        "ActionName": "AddBoatDriving",
+        "Parameters": {
+            "mapx": data.mapx,
+            "mapy": data.mapy
+        }
+    };
+    bridge.Invoke(params);
+}
+
+/**
+ * 关闭船舶模拟
+ * */
+export function closeBoatDriving(data){
+    let params = {
+        "ActionName": "CloseBoatDriving",
+        "Parameters": {}
+    };
+    bridge.Invoke(params);
 }

src/utils/map/Boat.js

@@ -2,11 +2,13 @@
  * 船舶地图组件功能，通过调用封装好的基础地图组件实现特定业务功能
  */
 import { fullExtent, clearMap, calculation, changeMap, setCamera,
-    layerControl, layerQuery, addGraphic, draw, getDrawGeometry,
+    layerControl, layerQuery, addGraphic, draw, getDrawResult,
     addBoats, setBoatHistory, playBoatHistory, clearBoatHistory,
+    openBoatDriving,closeBoatDriving,setAreaBoatHistory, playMultiBoatHistory,
     getMapScale
 } from '@/utils/map/ArcgisUtil'
-import {GetHpjShip,GetBoatAISHistoryByMMSI} from "@/apis/ship";
+import {GetHpjShip,GetBoatAISHistoryByMMSI,GetShipHistoryByArea} from "@/apis/ship";
+import {setCenter} from '@/utils/map/Common'
 import {nextTick} from "vue";
 import bus from "@/utils/bus";
 
@@ -44,7 +46,7 @@ export function locationBoat(mmsi,isShow){
         })
     }else{
         if (!showBoat){
-            clearMap({is_draw: false, is_search:false, layers: ['boatLayer']})
+            clearMap({is_draw: false, is_search:false, layers: ['boatLayer','boatPathLayer','boatGraphicLayer']})
         }
     }
 }
@@ -70,7 +72,7 @@ export function setBoat(isShow){
         if (boatInterval != null) {
             clearInterval(boatInterval)
         }
-        clearMap({is_draw: false, is_search:true, layers: ['boatLayer','boatPathLayer']})
+        clearMap({is_draw: false, is_search:true, layers: ['boatLayer','boatPathLayer','boatGraphicLayer']})
     }
 }
 
@@ -123,9 +125,12 @@ export  function setBoatPath(data){
         let historyPoints=[]
         for(let i=0;i<data.length;i++){
             let boat = {
-                "gpsTime": data[i].GPSTIME,
+                "mmsi": data[i].DEVICEID,
                 "mapx": data[i].MAPX,
-                "mapy": data[i].MAPY
+                "mapy": data[i].MAPY,
+                "direction": data[i].DIRECTION,
+                "shipTypeName": data[i].SHIPTYPENAME,
+                "gpsTime": data[i].GPSTIME
             }
             historyPoints.push(boat)
         }
@@ -155,4 +160,54 @@ bus.on('playBoatHistoryPath', (type) => {
 export function clearBoatHistoryPath(){
     console.log('清除船舶')
     clearBoatHistory()
+    clearMap({is_draw: true, is_search:true, layers: ['boatLayer','boatPathLayer','boatGraphicLayer']})
+}
+
+export function drawArea(){
+    draw('polygon');
+}
+
+export function setMultiBoatHistory(startTime,endTime){
+    let drawResult = getDrawResult()
+    GetShipHistoryByArea({
+        "minMapx": drawResult.extent.xmin,
+        "minMapy": drawResult.extent.ymin,
+        "maxMapx": drawResult.extent.xmax,
+        "maxMapy": drawResult.extent.ymax,
+        "startTime": startTime,
+        "endTime": endTime
+    }).then(res => {
+        if(res.code === "200"){
+            if(res.data){
+                if(res.data.Rows){
+                    setAreaBoatHistory({
+                        startTime: startTime,
+                        endTime: endTime,
+                        datas:res.data.Rows
+                    })
+                }
+            }
+        }
+    })
+}
+
+/***
+ * 多船轨迹回放
+ * @param type
+ */
+export function playAreaBoatHistory(type){
+    playMultiBoatHistory(type);
+}
+
+/**
+ * 模拟驾驶
+ * */
+export function boatDriving(isShow){
+    if(isShow){
+        openBoatDriving({mapx: 2100,mapy: 220})
+    }else{
+        closeBoatDriving()
+        clearMap({is_draw: false, is_search:true, layers: ['boatLayer','boatPathLayer','boatGraphicLayer']})
+        setCenter()
+    }
 }

src/utils/map/WaterPassenger.js

@@ -32,10 +32,10 @@ export function pjylLine(isShow){
                 if(lineData.lineName == '精华航线'){
                     symbol = {
                         type: "simple-fill",
-                        color: [50, 205, 50, 0.5],
+                        // color: [201, 242, 208, 0.5],
                         //style: "cross",
                         outline: {
-                            color: [255, 0, 0],
+                            color: [201, 242, 208],
                             width: 2,
                             style: "dash"
                         }
@@ -43,10 +43,10 @@ export function pjylLine(isShow){
                 }else{
                     symbol = {
                         type: "simple-fill",
-                        color: [50, 205, 50, 0.5],
+                        // color: [115, 178, 255, 0.5],
                         //style: "cross",
                         outline: {
-                            color: [255, 0, 0],
+                            color: [115, 178, 255],
                             width: 2,
                             style: "dash"
                         }

src/views/map/Index.vue

@@ -1,6 +1,9 @@
 <template>
     <div id="map_div">
         <iframe id="i_map" name="i_map" frameborder="0" style="width: 100%; height: 100%;"></iframe>
+        <div id="timeSliderDiv">
+
+        </div>
         <div id="tool_div">
             <button @click="fullExtent()">全景</button>
             <button @click="clearMap()">清除</button>
@@ -25,14 +28,20 @@
             <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,changeMap} from "@/utils/map/ArcgisUtil"
+    import {initBridge, fullExtent, calculation, clearMap, changeMap, draw} from "@/utils/map/ArcgisUtil"
     import {pjylLine, djldLine,djldLineAll,onePjylPortLocation,oneDjldPortLocation} from '@/utils/map/WaterPassenger'
-    import {setBoat, setBoatPath, onLocationBoat, locationBoat} from '@/utils/map/Boat'
+    import {setBoat, setBoatPath, onLocationBoat, locationBoat, boatDriving, drawArea, setMultiBoatHistory, playAreaBoatHistory} from '@/utils/map/Boat'
     import {setCenter} from '@/utils/map/Common'
     import {addLayerByName,closeAllLayer} from '@/utils/map/Layer'
 
@@ -157,6 +166,24 @@
                     case '遥感地图':
                         changeMap('airMap')
                         break
+                    case '开启模拟驾驶':
+                        boatDriving(true)
+                        break
+                    case '关闭模拟驾驶':
+                        boatDriving(false)
+                        break
+                    case '绘制轨迹回放区域':
+                        drawArea()
+                        break
+                    case '查询区域轨迹':
+                        setMultiBoatHistory('2023-9-9 19:00:00','2023-9-9 19:15:00')
+                        break
+                    case '轨迹回放':
+                        playAreaBoatHistory('start')
+                        break
+                    case '结束回放':
+                        playAreaBoatHistory('stop')
+                        break
                     default:
                 }
             },
@@ -172,7 +199,7 @@
     }
 
     #tool_div {
-        display: none;
+        display: block;
         background-color: #cccccc;
         z-index: 10;
         position: absolute;
@@ -181,4 +208,13 @@
         width: 100px;
         height: 500px;
     }
+
+    #timeSliderDiv{
+        display: none;
+        position: absolute;
+        bottom: 145px;
+        left: 340px;
+        width: calc(100% - 680px);
+
+    }
 </style>

vue.config.js

@@ -3,7 +3,7 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave:false,
-  publicPath: './'
+  publicPath: '/ghjg-digital-twin'
 })
 
 const webpack = require("webpack");