抽离地图组件和业务组件

src/utils/map/ArcgisUtil.js

@@ -0,0 +1,322 @@
+//加载地图控件
+import CityGis from "@/utils/map/CityGis.Bridge";
+let bridge
+export function initBridge(){
+    bridge = new CityGis.Bridge({
+        id: "i_map",
+        url: "http://10.83.68.108:8090/mapVue/#/map", //政务网
+        // url: "http://localhost:8081/#/map", //政务网
+        onReady: function(){
+            console.log("地图创建完成");
+        }
+    });
+    bridge.addEventListener((arg) => {
+        switch (arg.action) {
+            case "MapIsReady":
+                break;
+            case "MapExtentChanged":
+                console.log(arg)
+                // 地图标记
+                this.mapExtent = arg.data.result
+                if(this.showBoat){
+                    this.djldShip()
+                }
+                break;
+            default:
+                console.log(JSON.stringify(arg.data, null, 4))
+        }
+    });
+}
+/*切换底图*/
+export function changeMap(type){
+    let params = {
+        "ActionName": "ChangeBaseMap",
+        "Parameters": {
+            "title": type,
+            "opacity": 1
+        }
+    };
+    bridge.Invoke(params);
+}
+
+/* 定位船舶 */
+/*参数格式：
+[
+    {
+        "mmsi": "413266820",
+        "shipNameCn": "苏州号",
+        "shipTypeName": "客船",
+        "direction": 245,
+        "velocity": 0,
+        "shipBreadth": 22,
+        "shipLength": 154,
+        "mapx": 2755.61767,
+        "mapy": 1521.00687
+    }
+]*/
+export function addBoats(boats){
+    let params = {
+        "ActionName": "AddBoat",
+        "Parameters": {
+            "scale": boats.scale,
+            "is_goto": boats.goto,
+            "data": boats.data
+        }
+    };
+    bridge.Invoke(params);
+}
+
+/* 绘制船舶轨迹 */
+/*参数格式：
+[
+    {
+        "mapx": 2755.61767,
+        "mapy": 1521.00687,
+        "time": "2021/1/18 9:40:53"
+    },
+    {
+        "mapx": 2705.61767,
+        "mapy": 1481.00687,
+        "time": "2021/1/18 10:07:19"
+    }
+]*/
+export function addBoatHistory(datas){
+    let params = {
+        "ActionName": "AddBoatHistory",
+        "Parameters": {
+            "data":datas
+        }
+    };
+    console.log("addBoatHistory参数：",params)
+    bridge.Invoke(params);
+}
+
+/*查询服务*/
+/*参数格式：
+{
+    "ActionName": "LayerQuery",
+    "Parameters": {
+        "title": "ghjg_cxall",
+        "layerid": "0",
+        "where": "视频点名称='华江石油码头'",
+        "outFields": [
+            "*"
+        ],
+        "returnGeometry": true,
+        "is_draw": true,
+        "symbol": {
+            "type": "simple-marker",
+            "style": "circle",
+            "color": [
+                255,
+                0,
+                0
+            ],
+            "size": 10
+        }
+    }
+}*/
+export function layerQuery(paramData){
+    let params = {
+        "ActionName": "LayerQuery",
+        "Parameters": {
+            "title": paramData.title,
+            "layerid": paramData.layerId,
+            "where": paramData.where,
+            "outFields": [
+                "*"
+            ],
+            "returnGeometry": true,
+            "is_draw": paramData.is_draw == null?true:paramData.is_draw,
+            "is_clear": paramData.is_clear == null?true:paramData.is_clear,
+            "symbol": paramData.symbol
+        }
+    };
+    console.log("params",params)
+    bridge.Invoke(params);
+    bridge.addEventListener((arg) => {
+        if(arg.action == "ReturnDataList"){
+            console.log(arg)
+            if(arg.status == false){
+                this.$message({
+                    showClose: true,
+                    message: "未查询到结果！",
+                    type: "warning"
+                })
+                return
+            }
+            // 回调函数
+            if(paramData.callback != null){
+                // this.$emit(paramData.callback, arg.data);
+                this.pjylPortHandle(arg)
+            }
+        }
+    });
+}
+
+/*全景*/
+export function fullExtent(){
+    let params = {
+        "ActionName": "FullExtent"
+    };
+    bridge.Invoke(params);
+}
+
+/*测距/测面积*/
+/*测距：distance   测面积：area*/
+export function calculation(type){
+    let g_type
+    this.calculateFinish = false
+    if(type == "distance"){
+        g_type = "polyline"
+    }
+    if(type == "area"){
+        g_type = "polygon"
+    }
+
+    let params = {
+        "ActionName": "Calculation",
+        "Parameters": {
+            "type": g_type,
+            "is_show": false
+        }
+    };
+    bridge.Invoke(params);
+    bridge.addEventListener((arg) => {
+        if(arg.action == "Calculation" && this.calculateFinish == false){
+            this.calculateFinish = true
+            alert("测量结果：" + arg.data.result)
+        }
+    });
+}
+
+/*图层开关*/
+export function layerControl(data){
+    if(data == "" || data == null){
+        return
+    }
+    this.mapClickLayers = []
+    if(data.visible == true){
+        // this.mapClickLayers = data.sublayers
+        let sublayers = data.sublayers.split(",")
+        for(let i=0;i<sublayers.length;i++){
+            this.mapClickLayers.push(sublayers[i])
+        }
+    }
+    let params = {
+        "ActionName": "LayerControl",
+        "Parameters": {
+            "title": data.title,
+            "visible": data.visible,
+            "opacity": data.opacity,
+            "sublayers": data.sublayers  // 倒序
+        }
+    };
+    bridge.Invoke(params);
+}
+
+/*绘制点线面*/
+/*参数说明：
+    point 点；
+    polyline 线；
+    polygon 面；*/
+export function draw(type){
+    let params = {
+        "ActionName": "Draw",
+        "Parameters": {
+            "type": type
+        }
+    };
+    bridge.Invoke(params);
+    bridge.addEventListener((arg) => {
+        if(arg.action == "DrawComplete"){
+            // 地图标记
+            if(this.componentsStatus.showMapMark){
+                if(!arg.data.geometry){
+                    return
+                }
+                let data = arg.data.geometry
+                let path = ''
+                if(type == "point"){
+                    path = data.x.toFixed(2)+":"+data.y.toFixed(2)
+                }else if(type == "polyline"){
+                    let paths = data.paths[0][0]
+                    for(let i in paths){
+                        path = paths[i][0]+":"+paths[i][1]+"/"
+                    }
+                    path = path.substring(0,path.length-1)
+                }else if(type == "polygon"){
+                    let rings = data.rings[0][0]
+                    for(let i in rings){
+                        path = rings[i][0]+":"+rings[i][1]+"/"
+                    }
+                    path = path.substring(0,path.length-1)
+                }
+                this.$refs.divMark.setPath(path)
+            }
+            // 区域统计
+            if(this.componentsStatus.showMapStatistics){
+                if(!arg.data.geometry){
+                    return
+                }
+                this.$refs.divStatistics.setGeometry(arg.data.geometry)
+            }
+            return this.drawGeometry = arg.data.geometry
+        }
+    });
+}
+
+// 标记图形
+export function addGraphic(datas){
+    console.log("addGraphic:",datas)
+    let params = {
+        "ActionName": "AddGraphic",
+        "Parameters": {
+            "type": datas.type,
+            "edit": datas.edit,
+            "temp": datas.temp,
+            "clear": datas.clear,
+            "goto": datas.goto,
+            "data": datas.data,
+            "attributes": datas.attributes,
+            "symbol": datas.symbol,
+            "title": datas.title
+        }
+    };
+    bridge.Invoke(params);
+}
+
+// 设置摄像机
+export function setCamera(data){
+    let params = {
+        "ActionName": "SetCamera",
+        "Parameters": {
+            "position": {
+                "x": data.x,
+                "y": data.y,
+                "z": data.z,
+                "spatialReference": 102100
+            },
+            "heading": 0,
+            "tilt": 60
+        }
+    };
+    bridge.Invoke(params);
+}
+
+/*清空地图*/
+export function clearMap(){
+    let params = {
+        "ActionName": "ClearMap",
+        "Parameters": {
+            "is_draw": true,
+            "is_search": true,
+            "is_position": true
+        }
+    };
+    bridge.Invoke(params);
+}
+
+export function getDrawGeometry(){
+    return this.drawGeometry
+}

src/utils/map/Boat.js

@@ -0,0 +1,54 @@
+/**
+ * 船舶地图组件功能，通过调用封装好的基础地图组件实现特定业务功能
+ */
+import { fullExtent, clearMap, calculation, changeMap, setCamera,
+    layerControl, layerQuery, addGraphic, draw, getDrawGeometry,
+    addBoats, addBoatHistory
+} from '@/utils/map/ArcgisUtil'
+import {GetHpjShip} from "@/apis/ship";
+
+let boatInterval;
+let showBoat = false;
+
+// 船舶撒点
+export function setShip(){
+    if(!showBoat)
+        showBoat = true
+    onLocationBoat()
+    if(boatInterval!=null){
+        clearInterval(boatInterval)
+    }
+    boatInterval = setInterval(onLocationBoat,10000)
+}
+
+// 加载船舶
+export function onLocationBoat(){
+    GetHpjShip().then(res=>{
+        let data = res.Result.data
+        let boats = {
+            "scale": 5000,
+            "goto": false,
+            "data": []
+        }
+        for(let i=0;i<data.length;i++){
+            let boat = {
+                "mmsi": data[i].DEVICEID,
+                "shipNameCn": data[i].BOATNAME,
+                "shipTypeName": data[i].SHIPTYPENAME,
+                "direction": data[i].DIRECTION,
+                "velocity": data[i].VELOCITY,
+                "shipBreadth": data[i].SHIPBREADTH,
+                "shipLength": data[i].SHIPLENGTH,
+                "mapx": data[i].MAPX,
+                "mapy": data[i].MAPY
+            }
+            boats.data.push(boat)
+        }
+        addBoats(boats)
+    })
+}
+
+// 设置船舶历史轨迹
+export function setShipPath(){
+
+}

src/utils/map/WaterPassenger.js

@@ -0,0 +1,143 @@
+/**
+ * 水上客运地图功能组件，通过调用封装好的基础地图组件实现特定业务功能
+ */
+import { fullExtent, clearMap, calculation, changeMap, setCamera,
+    layerControl, layerQuery, addGraphic, draw, getDrawGeometry,
+    addBoats, addBoatHistory
+} from '@/utils/map/ArcgisUtil'
+
+import {GetPjylLinePaths} from "@/apis/ssky";
+import {GetHpjShip} from "@/apis/ship";
+
+let showBoat = false;
+let djldInterval;
+
+// 浦江游览航线
+export function pjylLine(){
+    GetPjylLinePaths().then(res=>{
+        for (let i=0;i<res.data.length;i++){
+            let lineData = res.data[i]
+            let linePoints = lineData.linePoints
+            let points = []
+            let first = []
+            for(let j=0;j<linePoints.length;j++){
+                let point = [Number(linePoints[j].x),Number(linePoints[j].y)]
+                if(j==0){
+                    first = [Number(linePoints[j].x),Number(linePoints[j].y)]
+                }
+                points.push(point)
+            }
+            points.push(first)
+
+            let params = {
+                // title: res.data[i].get('lineName'),
+                type: 'polygon',
+                data: points,
+                edit: false,
+                temp: true,
+                clear: false,
+                goto: true,
+                attributes: null,
+                symbol: {
+                    type: "simple-fill",
+                    color: [50, 205, 50, 0.5],
+                    //style: "cross",
+                    outline: {
+                        color: [255, 0, 0],
+                        width: 2
+                    }
+                }
+            }
+            // 绘制到地图上
+            addGraphic(params)
+        }
+    })
+}
+
+// 浦江游览
+// 浦江游览码头定位
+export function pjylPortLocation(data){
+    // 码头定位
+    let param = {
+        title: data.portName,
+        type: 'point',
+        data:[data.mapx,data.mapy,20],
+        edit: false,
+        temp: true,
+        clear: false,
+        goto: true,
+        attributes: null,
+        symbol:{
+            "type": "picture-marker",
+            "url": "images/ssky/bgImgPort.png",
+            "width":"300px",
+            "height":"10px"
+        }
+    }
+    addGraphic(param)
+    // 绘制陆域围栏
+    layerQuery({
+        title: "waterPassenger",
+        layerId: "4",
+        where: "码头名称='" + data.portName +"'",
+        symbol: null,
+        is_draw: true,
+        is_clear: false,
+        callback: "pjylPortHandle"
+    })
+}
+// 浦江游览码头查询回调
+export function pjylPortHandle(res) {
+    let data = res.data[0].geometry.rings[0]
+    console.log("浦江游览码头回调结果："+data)
+    let params = {
+        type: 'line-3d',
+        data: data,
+        edit: false,
+        temp: true,
+        clear: false,
+        goto: true,
+        attributes: null,
+        title: null
+    }
+    addGraphic(params)
+}
+
+// 对江轮渡船舶撒点
+export function djldShip(){
+    if(!showBoat)
+        showBoat = true
+    onLocationDjldBoat()
+    if(djldInterval!=null){
+        clearInterval(djldInterval)
+    }
+    djldInterval = setInterval(onLocationDjldBoat,10000)
+}
+
+export function onLocationDjldBoat(){
+    GetHpjShip().then(res=>{
+        let data = res.Result.data
+        let boats = {
+            "scale": 5000,
+            "goto": false,
+            "data": []
+        }
+        for(let i=0;i<data.length;i++){
+            if(data[i].LINETYPE == 'djld'){
+                let boat = {
+                    "mmsi": data[i].DEVICEID,
+                    "shipNameCn": data[i].BOATNAME,
+                    "shipTypeName": data[i].SHIPTYPENAME,
+                    "direction": data[i].DIRECTION,
+                    "velocity": data[i].VELOCITY,
+                    "shipBreadth": data[i].SHIPBREADTH,
+                    "shipLength": data[i].SHIPLENGTH,
+                    "mapx": data[i].MAPX,
+                    "mapy": data[i].MAPY
+                }
+                boats.data.push(boat)
+            }
+        }
+        addBoats(boats)
+    })
+}

src/views/home/Home.vue

@@ -8,11 +8,7 @@
     <HomeHeader class="header" />
     <TabSwitch class="navi"/>
 <!--    <UeVideo class="ue"/>-->
-    <Map ref="map" class="map"
-         @update:pjylPortLocation = "pjylPortLocation[pjylPortLocation]"
-         @update:pjylPortHandle = "pjylPortHandle[pjylPortHandle]"
-         @pjylLine = pjylLine
-    ></Map>
+    <Map ref="map" class="map"></Map>
     <ComPage class="common"/>
     <RouterView class="page"/>
   </div>
@@ -27,8 +23,6 @@ import ComPage from '@/views/home/ComPage'
 import { asideShow } from '@/store/index'
 import Map from '@/views/map/Index.vue'
 import {ref} from 'vue'
-import {GetPjylLinePaths} from '@/apis/ssky'
-import {GetHpjShip} from '@/apis/ship'
 
 
 // 禁用鼠标右键
@@ -43,167 +37,6 @@ export default {
     return {
       aside_hide
     }
-
-    const map = ref(null)
-
-    // 全景
-    function fullExtent(){
-      map.value.fullExtent()
-    }
-
-    // 测距:type=distance;侧面积:type=area
-    function calculation(type){
-      map.value.calculation(type);
-    }
-
-    // 清除
-    function clearMap(){
-      map.value.clearMap();
-    }
-
-    // 浦江游览
-    // 浦江游览码头定位
-    function pjylPortLocation(data){
-      debugger
-      // 码头定位
-      let param = {
-        title: data.portName,
-        type: 'points',
-        data:[data.mapx,data.mapy,20],
-        edit: false,
-        temp: true,
-        clear: true,
-        goto: true,
-        attributes: null,
-        symbol:{
-          "type": "picture-marker",
-          "url": "ssky/bgImgBlue.png",
-          "width":"300px",
-          "height":"10px"
-        }
-      }
-      map.value.addGraphic(param)
-      // 绘制陆域围栏
-      map.value.layerQuery({
-        layerId: "waterPassenger",
-        id: "4",
-        where: "码头名称=" + portName,
-        symbol: null,
-        is_draw: false,
-        callback: "pjylPortHandle"
-      })
-    }
-    // 浦江游览码头查询回调
-    function pjylPortHandle(data){
-      debugger
-      let params = {
-        title: null,
-        type: 'points',
-        data:data[0].geometry.rings,
-        edit: false,
-        temp: true,
-        clear: false,
-        goto: false,
-        attributes: null,
-        symbol:{
-          type: "line-3d",
-          symbolLayers: [{
-            type: "path",
-            profile: "quad",
-            material: {
-              color: [255, 152, 0, 0.8]
-            },
-            cap: "round",
-            join: "miter",
-            width: 5,
-            height: 100,
-            anchor: "bottom",
-            profileRotation: "heading"
-          }]
-        }
-      }
-      map.value.addGraphic(params)
-    }
-
-    // 浦江游览航线
-    function pjylLine(){
-      GetPjylLinePaths().then(res=>{
-        debugger
-        let data = res.data
-        for (let i=0;i<res.data.length;i++){
-          let linePoints = res.data[i].get('linePoints')
-          let points = []
-          let first = []
-          for(let j=0;j<linePoints.length;j++){
-            let point = [linePoints.get('x'),linePoints.get('y')]
-            if(j=0){
-              first = [linePoints.get('x'),linePoints.get('y')]
-            }
-            points.push(point)
-          }
-          points.push(first)
-
-          let params = {
-            // title: res.data[i].get('lineName'),
-            type: 'points',
-            data:points,
-            edit: false,
-            temp: true,
-            clear: false,
-            goto: false,
-            attributes: null,
-            symbol: {
-              type: "simple-fill",
-              color: [50, 205, 50, 0.5],
-              //style: "cross",
-              outline: {
-                color: [255, 0, 0],
-                width: 2
-              }
-            }
-          }
-          // 绘制到地图上
-          map.value.addGraphic(params)
-        }
-      })
-    }
-
-    // 浦江游览船舶撒点
-    function pjylShip(){
-      GetHpjShip().then(res=>{
-
-      })
-    }
-
-    // 对江轮渡船舶撒点
-    function djldShip(){
-      GetHpjShip().then(res=>{
-        debugger
-        let data = res.Result.data
-        let boats = {
-          "goto": false,
-          "data": []
-        }
-        for(let i=0;i<data.length;i++){
-          if(data[i].LINETYPE == 'djld'){
-            let boat = {
-              "mmsi": data[i].DEVICEID,
-              "shipNameCn": data[i].BOATNAME,
-              "shipTypeName": data[i].SHIPTYPENAME,
-              "direction": data[i].DIRECTION,
-              "velocity": data[i].VELOCITY,
-              "shipBreadth": data[i].SHIPBREADTH,
-              "shipLength": data[i].SHIPLENGTH,
-              "mapx": data[i].MAPX,
-              "mapy": data[i].MAPY
-            }
-            boats.data.push(boat)
-          }
-        }
-        map.value.addBoats(boats)
-      })
-    }
-
   }
 }
 </script>
@@ -287,7 +120,7 @@ export default {
   }
 
   .map {
-    z-index: 1;
+    z-index: -1;
   }
 }
 </style>

src/views/map/Index.vue

@@ -9,347 +9,35 @@
             <button @click="test('浦江游览码头')">浦江游览码头</button>
             <button @click="test('浦江游览航线')">浦江游览航线</button>
             <button @click="test('对江轮渡船舶')">对江轮渡船舶</button>
+            <button @click="test('船舶撒点')">船舶撒点</button>
         </div>
     </div>
 </template>
 
 <script>
-    import CityGis from "@/utils/CityGis.Bridge"
+    import {initBridge,fullExtent,calculation,clearMap} from "@/utils/map/ArcgisUtil"
+    import {pjylLine, djldShip} from '@/utils/map/WaterPassenger'
+    import {setShip, setShipPath, onLocationBoat} from '@/utils/map/Boat'
     import {GetPjylLinePaths} from "@/apis/ssky";
     import {GetHpjShip} from "@/apis/ship";
 
-    let bridge;
-
     export default {
         name: "MapHome",
         data(){
             return{
                 mapExtent:'',
                 calculateFinish: false,
+                showBoat: false,
             }
         },
         mounted(){
-            // 初始化组件
-            // this.initMap(true,true,true,true,false)
             //加载地图控件
-            bridge = new CityGis.Bridge({
-                id: "i_map",
-                url: "http://10.83.68.108:8090/mapVue/#/map", //政务网
-                // url: "http://localhost:8081/#/map", //政务网
-                onReady: function(){
-                    // console.log("地图创建完成");
-                }
-            });
-            bridge.addEventListener((arg) => {
-                switch (arg.action) {
-                    case "MapIsReady":
-                        break;
-                    case "MapExtentChanged":
-                        console.log(arg)
-                        // 地图标记
-                        this.mapExtent = arg.data.result
-                        break;
-                    default:
-                        console.log(JSON.stringify(arg.data, null, 4))
-                }
-            });
+            initBridge();
         },
         methods:{
-            /*切换底图*/
-            changeMap(type){
-                let params = {
-                    "ActionName": "ChangeBaseMap",
-                    "Parameters": {
-                        "title": type,
-                        "opacity": 1
-                    }
-                };
-                bridge.Invoke(params);
-            },
-
-            /* 定位船舶 */
-            /*参数格式：
-            [
-                {
-                    "mmsi": "413266820",
-                    "shipNameCn": "苏州号",
-                    "shipTypeName": "客船",
-                    "direction": 245,
-                    "velocity": 0,
-                    "shipBreadth": 22,
-                    "shipLength": 154,
-                    "mapx": 2755.61767,
-                    "mapy": 1521.00687
-                }
-            ]*/
-            addBoats(boats){
-                let params = {
-                    "ActionName": "AddBoat",
-                    "Parameters": {
-                        "scale": 5000,
-                        "is_goto": boats.goto,
-                        "attributes": boats.data
-                    }
-                };
-                bridge.Invoke(params);
-            },
-
-            /* 绘制船舶轨迹 */
-            /*参数格式：
-            [
-                {
-                    "mapx": 2755.61767,
-                    "mapy": 1521.00687,
-                    "time": "2021/1/18 9:40:53"
-                },
-                {
-                    "mapx": 2705.61767,
-                    "mapy": 1481.00687,
-                    "time": "2021/1/18 10:07:19"
-                }
-            ]*/
-            addBoatHistory(datas){
-                let params = {
-                    "ActionName": "AddBoatHistory",
-                    "Parameters": {
-                        "data":datas
-                    }
-                };
-                console.log("addBoatHistory参数：",params)
-                bridge.Invoke(params);
-            },
-
-            /*查询服务*/
-            /*参数格式：
-            {
-                "ActionName": "LayerQuery",
-                "Parameters": {
-                    "title": "ghjg_cxall",
-                    "layerid": "0",
-                    "where": "视频点名称='华江石油码头'",
-                    "outFields": [
-                        "*"
-                    ],
-                    "returnGeometry": true,
-                    "is_draw": true,
-                    "symbol": {
-                        "type": "simple-marker",
-                        "style": "circle",
-                        "color": [
-                            255,
-                            0,
-                            0
-                        ],
-                        "size": 10
-                    }
-                }
-            }*/
-            layerQuery(paramData){
-                let params = {
-                    "ActionName": "LayerQuery",
-                    "Parameters": {
-                        "title": paramData.title,
-                        "layerid": paramData.layerId,
-                        "where": paramData.where,
-                        "outFields": [
-                            "*"
-                        ],
-                        "returnGeometry": true,
-                        "is_draw": paramData.is_draw == null?true:paramData.is_draw,
-                        "is_clear": paramData.is_clear == null?true:paramData.is_clear,
-                        "symbol": paramData.symbol
-                    }
-                };
-                console.log("params",params)
-                bridge.Invoke(params);
-                bridge.addEventListener((arg) => {
-                    if(arg.action == "ReturnDataList"){
-                        console.log(arg)
-                        if(arg.status == false){
-                            this.$message({
-                                showClose: true,
-                                message: "未查询到结果！",
-                                type: "warning"
-                            })
-                            return
-                        }
-                        // 回调函数
-                        if(paramData.callback != null){
-                            // this.$emit(paramData.callback, arg.data);
-                            this.pjylPortHandle(arg.data)
-                        }
-                    }
-                });
-            },
-
-            /*全景*/
-            fullExtent(){
-                let params = {
-                    "ActionName": "FullExtent"
-                };
-                bridge.Invoke(params);
-            },
-
-            /*测距/测面积*/
-            /*测距：distance   测面积：area*/
-            calculation(type){
-                let g_type
-                this.calculateFinish = false
-                if(type == "distance"){
-                    g_type = "polyline"
-                }
-                if(type == "area"){
-                    g_type = "polygon"
-                }
-
-                let params = {
-                    "ActionName": "Calculation",
-                    "Parameters": {
-                        "type": g_type,
-                        "is_show": false
-                    }
-                };
-                bridge.Invoke(params);
-                bridge.addEventListener((arg) => {
-                    if(arg.action == "Calculation" && this.calculateFinish == false){
-                        this.calculateFinish = true
-                        // this.$message({
-                        //     showClose: true,
-                        //     message: "测量结果：" + arg.data.result,
-                        //     type:"success"
-                        // })
-                        alert("测量结果：" + arg.data.result)
-                    }
-                });
-            },
-
-            /*图层开关*/
-            layerControl(data){
-                if(data == "" || data == null){
-                    return
-                }
-                this.mapClickLayers = []
-                if(data.visible == true){
-                    // this.mapClickLayers = data.sublayers
-                    let sublayers = data.sublayers.split(",")
-                    for(let i=0;i<sublayers.length;i++){
-                        this.mapClickLayers.push(sublayers[i])
-                    }
-                }
-                let params = {
-                    "ActionName": "LayerControl",
-                    "Parameters": {
-                        "title": data.title,
-                        "visible": data.visible,
-                        "opacity": data.opacity,
-                        "sublayers": data.sublayers  // 倒序
-                    }
-                };
-                bridge.Invoke(params);
-            },
-
-            /*绘制点线面*/
-            /*参数说明：
-                point 点；
-                polyline 线；
-                polygon 面；*/
-            draw(type){
-                let params = {
-                    "ActionName": "Draw",
-                    "Parameters": {
-                        "type": type
-                    }
-                };
-                bridge.Invoke(params);
-                bridge.addEventListener((arg) => {
-                    if(arg.action == "DrawComplete"){
-                        // 地图标记
-                        if(this.componentsStatus.showMapMark){
-                            if(!arg.data.geometry){
-                                return
-                            }
-                            let data = arg.data.geometry
-                            let path = ''
-                            if(type == "point"){
-                                // let point = {"x":data.x,"y":data.y}
-                                // path.push(point)
-                                // let x = Number.valueOf(data.x)
-                                // let y = Number.valueOf(data.y)
-                                // path = x.toFixed(2)+":"+y.toFixed(2)
-                                path = data.x.toFixed(2)+":"+data.y.toFixed(2)
-                            }else if(type == "polyline"){
-                                let paths = data.paths[0][0]
-                                for(let i in paths){
-                                    // let point = {"x":paths[i][0],"y":paths[i][1]}
-                                    // path.push(point)
-                                    // let x = Number.valueOf(paths[i][0])
-                                    // let y = Number.valueOf(paths[i][1])
-                                    // path = x.toFixed(2)+":"+y.toFixed(2)+"/"
-                                    path = paths[i][0]+":"+paths[i][1]+"/"
-                                }
-                                path = path.substring(0,path.length-1)
-                            }else if(type == "polygon"){
-                                let rings = data.rings[0][0]
-                                for(let i in rings){
-                                    // let point = {"x":rings[i][0],"y":rings[i][1]}
-                                    // path.push(point)
-                                    // let x = Number.valueOf(rings[i][0])
-                                    // let y = Number.valueOf(rings[i][1])
-                                    // path = x.toFixed(2)+":"+y.toFixed(2)+"/"
-                                    path = rings[i][0]+":"+rings[i][1]+"/"
-                                }
-                                path = path.substring(0,path.length-1)
-                            }
-                            this.$refs.divMark.setPath(path)
-                        }
-                        // 区域统计
-                        if(this.componentsStatus.showMapStatistics){
-                            if(!arg.data.geometry){
-                                return
-                            }
-                            this.$refs.divStatistics.setGeometry(arg.data.geometry)
-                        }
-                        return this.drawGeometry = arg.data.geometry
-                    }
-                });
-            },
-
-            // 标记图形
-            addGraphic(res){
-                console.log("addGraphic:",res)
-                let params = {
-                    "ActionName": "AddGraphic",
-                    "Parameters": {
-                        "type": res.type,
-                        "edit": res.edit,
-                        "temp": res.temp,
-                        "clear": res.clear,
-                        "goto": res.goto,
-                        "data": res.data,
-                        "attributes": res.attributes,
-                        "symbol": res.symbol,
-                        "title": res.title
-                    }
-                };
-                bridge.Invoke(params);
-            },
-
-            /*清空地图*/
-            clearMap(){
-                let params = {
-                    "ActionName": "ClearMap",
-                    "Parameters": {
-                        "is_draw": true,
-                        "is_search": true,
-                        "is_position": true
-                    }
-                };
-                bridge.Invoke(params);
-            },
-            getDrawGeometry(){
-                return this.drawGeometry
-            },
-
+            fullExtent(){fullExtent()},
+            calculation(){calculation},
+            clearMap(){clearMap},
             // 测试方法
             test(value){
                 switch (value) {
@@ -361,149 +49,28 @@
                         })
                         break
                     case '浦江游览航线':
-                        this.pjylLine()
+                        pjylLine()
                         break
                     case '对江轮渡船舶':
-                        this.djldShip()
+                        djldShip()
                         break
+                    case '船舶撒点':
+                        setShip()
+                        break
+                    case '船舶轨迹':
+                        setShipPath()
+                        break
+/*                    case '开始':
+                        startPlayPath()
+                        break
+                    case '暂停':
+                        pasePlayPath()
+                        break
+                    case '结束':
+                        endPlayPath()
+                        break*/
                 }
             },
-
-            // 浦江游览
-            // 浦江游览码头定位
-             pjylPortLocation(data){
-                // 码头定位
-                let param = {
-                    title: data.portName,
-                    type: 'point',
-                    data:[data.mapx,data.mapy,20],
-                    edit: false,
-                    temp: true,
-                    clear: false,
-                    goto: true,
-                    attributes: null,
-                    symbol:{
-                        "type": "picture-marker",
-                        "url": "ssky/bgImgBlue.png",
-                        "width":"300px",
-                        "height":"10px"
-                    }
-                }
-                this.addGraphic(param)
-                // 绘制陆域围栏
-                this.layerQuery({
-                    title: "waterPassenger",
-                    layerId: "4",
-                    where: "码头名称='" + data.portName +"'",
-                    symbol: null,
-                    is_draw: true,
-                    is_clear: false,
-                    callback: "pjylPortHandle"
-                })
-            },
-            // 浦江游览码头查询回调
-             pjylPortHandle(data) {
-                 debugger
-                 let params = {
-                     title: null,
-                     type: 'line-3d',
-                     data: data[0].geometry.rings[0],
-                     edit: false,
-                     temp: true,
-                     clear: false,
-                     goto: false,
-                     attributes: null,
-                     // symbol: {
-                     //     type: "line-3d",
-                     //     symbolLayers: [{
-                     //         type: "path",
-                     //         profile: "quad",
-                     //         material: {
-                     //             color: [255, 152, 0, 0.8]
-                     //         },
-                     //         cap: "round",
-                     //         join: "miter",
-                     //         width: 5,
-                     //         height: 100,
-                     //         anchor: "bottom",
-                     //         profileRotation: "heading"
-                     //     }]
-                     // }
-                 }
-                 this.addGraphic(params)
-             },
-
-            // 浦江游览航线
-             pjylLine(){
-                GetPjylLinePaths().then(res=>{
-                    for (let i=0;i<res.data.length;i++){
-                        let lineData = res.data[i]
-                        let linePoints = lineData.linePoints
-                        let points = []
-                        let first = []
-                        for(let j=0;j<linePoints.length;j++){
-                            let point = [Number(linePoints[j].x),Number(linePoints[j].y)]
-                            if(j==0){
-                                first = [Number(linePoints[j].x),Number(linePoints[j].y)]
-                            }
-                            points.push(point)
-                        }
-                        points.push(first)
-
-                        let params = {
-                            // title: res.data[i].get('lineName'),
-                            type: 'polygon',
-                            data: points,
-                            edit: false,
-                            temp: true,
-                            clear: false,
-                            goto: true,
-                            attributes: null,
-                            symbol: {
-                                type: "simple-fill",
-                                color: [50, 205, 50, 0.5],
-                                //style: "cross",
-                                outline: {
-                                    color: [255, 0, 0],
-                                    width: 2
-                                }
-                            }
-                        }
-                        console.log(params)
-                        // 绘制到地图上
-                        this.addGraphic(params)
-                    }
-                })
-            },
-
-            // 对江轮渡船舶撒点
-             djldShip(){
-                GetHpjShip().then(res=>{
-                    debugger
-                    let data = res.Result.data
-                    let boats = {
-                        "goto": false,
-                        "data": []
-                    }
-                    for(let i=0;i<data.length;i++){
-                        if(data[i].LINETYPE == 'djld'){
-                            let boat = {
-                                "mmsi": data[i].DEVICEID,
-                                "shipNameCn": data[i].BOATNAME,
-                                "shipTypeName": data[i].SHIPTYPENAME,
-                                "direction": data[i].DIRECTION,
-                                "velocity": data[i].VELOCITY,
-                                "shipBreadth": data[i].SHIPBREADTH,
-                                "shipLength": data[i].SHIPLENGTH,
-                                "mapx": data[i].MAPX,
-                                "mapy": data[i].MAPY
-                            }
-                            boats.data.push(boat)
-                        }
-                    }
-                    this.addBoats(boats)
-                })
-            }
         }
     }
 </script>