增加地图组件更新，增加浦江游览部分功能

package-lock.json

@@ -17393,6 +17393,15 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",

src/apis/ship.js

@@ -0,0 +1,8 @@
+import request from "@/request/index";
+
+export function GetHpjShip() {
+    return request({
+        url: 'http://10.83.68.109:8092/digitalTwin2/dataShare/GetBoatAISByExtentCalculateGwTest',
+        method: "post"
+    })
+}

src/apis/ssky.js

@@ -57,3 +57,10 @@ export function GetLshb(mmsi) {
     data: { mmsi },
   })
 }
+
+export function GetPjylLinePaths() {
+  return request({
+    url: '/DigitalTwin/GetPjylLinePaths',
+    method: "post"
+  })
+}

src/router/index.js

@@ -42,6 +42,11 @@ export const defaultRoutes = [
       },
     ]
   },
+  {
+    path: '/map',
+    name: 'Map',
+    component: () => import('../views/map/Index.vue')
+  }
 ]
 
 

src/views/home/Home.vue

@@ -7,7 +7,12 @@
 
     <HomeHeader class="header" />
     <TabSwitch class="navi"/>
-    <UeVideo class="ue"/>
+<!--    <UeVideo class="ue"/>-->
+    <Map ref="map" class="map"
+         @update:pjylPortLocation = "pjylPortLocation[pjylPortLocation]"
+         @update:pjylPortHandle = "pjylPortHandle[pjylPortHandle]"
+         @pjylLine = pjylLine
+    ></Map>
     <ComPage class="common"/>
     <RouterView class="page"/>
   </div>
@@ -20,6 +25,10 @@ import { RouterView } from 'vue-router'
 import UeVideo from '@/components/UeVideo'
 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'
 
 
 // 禁用鼠标右键
@@ -28,12 +37,173 @@ document.onselectstart=new Function("event.returnValue=false;")
 
 export default {
   name: 'HomePage',
-  components: { HomeHeader, TabSwitch, RouterView, UeVideo, ComPage },
+  components: { HomeHeader, TabSwitch, RouterView, UeVideo, ComPage ,Map},
   setup() {
     const aside_hide = asideShow().isHide
     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>
@@ -115,6 +285,9 @@ export default {
   .ue {
     z-index: 1;
   }
-  
+
+  .map {
+    z-index: 1;
+  }
 }
 </style>

src/views/map/Index.vue

@@ -1,209 +1,528 @@
 <template>
-    <div>
+    <div id="map_div">
         <iframe id="i_map" name="i_map" frameborder="0" style="width: 100%; height: 100%;"></iframe>
+        <div id="tool_div">
+            <button @click="fullExtent()">全景</button>
+            <button @click="calculation('distance')">测距</button>
+            <button @click="calculation('area')">侧面积</button>
+            <button @click="clearMap()">清除</button>
+            <button @click="test('浦江游览码头')">浦江游览码头</button>
+            <button @click="test('浦江游览航线')">浦江游览航线</button>
+            <button @click="test('对江轮渡船舶')">对江轮渡船舶</button>
+        </div>
     </div>
 </template>
 
-<script>
-    export default {
-        name: "MapHome",
-    }
-</script>
-
 <script>
     import CityGis from "@/utils/CityGis.Bridge"
-    import {onMounted} from "vue"
+    import {GetPjylLinePaths} from "@/apis/ssky";
+    import {GetHpjShip} from "@/apis/ship";
 
     let bridge;
 
-    onMounted(() => {
-        bridge = new CityGis.Bridge({
-            id: "i_map",
-            url: "http://10.83.68.108:8090/mapVue/#/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))
-            }
-        });
-    })
-
-    /*切换底图*/
-    function changeMap(type){
-        let params = {
-            "ActionName": "ChangeBaseMap",
-            "Parameters": {
-                "title": type,
-                "opacity": 1
+    export default {
+        name: "MapHome",
+        data(){
+            return{
+                mapExtent:'',
+                calculateFinish: false,
             }
-        };
-        bridge.Invoke(params)
-    }
+        },
+        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))
+                }
+            });
+        },
+        methods:{
+            /*切换底图*/
+            changeMap(type){
+                let params = {
+                    "ActionName": "ChangeBaseMap",
+                    "Parameters": {
+                        "title": type,
+                        "opacity": 1
+                    }
+                };
+                bridge.Invoke(params);
+            },
 
-    /*全景*/
-    function fullExtent(){
-        let params = {
-            "ActionName": "FullExtent"
-        };
-        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);
+            },
 
-    /*测距/测面积*/
-    /*测距：distance   测面积：area*/
-    function calculation(type){
-        let g_type
-        if(type == "distance"){
+            /* 绘制船舶轨迹 */
+            /*参数格式：
+            [
+                {
+                    "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);
+            },
 
-            g_type = "polyline"
-        }
-        if(type == "area"){
-            g_type = "polygon"
-        }
+            /*查询服务*/
+            /*参数格式：
+            {
+                "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)
+                        }
+                    }
+                });
+            },
 
-        let params = {
-            "ActionName": "Calculation",
-            "Parameters": {
-                "type": g_type,
-                "is_show": false
-            }
-        }
-        bridge.Invoke(params)
-        bridge.addEventListener((arg) => {
-            if(arg.action == "Calculation"){
-                this.$message({
-                    showClose: true,
-                    message: "测量结果：" + arg.data.result,
-                    type:"success"
-                })
-                // this.$refs.divMapTools.isToolBusy = false
+            /*全景*/
+            fullExtent(){
+                let params = {
+                    "ActionName": "FullExtent"
+                };
+                bridge.Invoke(params);
+            },
+
+            /*测距/测面积*/
+            /*测距：distance   测面积：area*/
+            calculation(type){
+                let g_type
+                this.calculateFinish = false
                 if(type == "distance"){
-                    this.$refs.divMapTools.handleToolClick(2, true)
+                    g_type = "polyline"
                 }
                 if(type == "area"){
-                    this.$refs.divMapTools.handleToolClick(3, true)
+                    g_type = "polygon"
                 }
-            }
-        })
-    }
 
-    /*图层开关*/
-    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);
-    }
+                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)
+                    }
+                });
+            },
 
-    /*清空地图*/
-    function clearMap(){
-        let params = {
-            "ActionName": "ClearMap",
-            "Parameters": {
-                "is_draw": true,
-                "is_search": true,
-                "is_position": true,
-                "is_remove": true,
-                "is_temp": true
-            }
-        };
-        bridge.Invoke(params);
-    }
+            /*图层开关*/
+            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 面；*/
-    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"){
-                        // 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]+"/"
+            /*绘制点线面*/
+            /*参数说明：
+                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)
                         }
-                        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]+"/"
+                        // 区域统计
+                        if(this.componentsStatus.showMapStatistics){
+                            if(!arg.data.geometry){
+                                return
+                            }
+                            this.$refs.divStatistics.setGeometry(arg.data.geometry)
                         }
-                        path = path.substring(0,path.length-1)
+                        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
                     }
-                    this.$refs.divMark.setPath(path)
+                };
+                bridge.Invoke(params);
+            },
+            getDrawGeometry(){
+                return this.drawGeometry
+            },
+
+            // 测试方法
+            test(value){
+                switch (value) {
+                    case '浦江游览码头':
+                        this.pjylPortLocation({
+                            'portName':'东方明珠旅游码头',
+                            'mapx':'2360.10554497',
+                            'mapy':'794.13869415'
+                        })
+                        break
+                    case '浦江游览航线':
+                        this.pjylLine()
+                        break
+                    case '对江轮渡船舶':
+                        this.djldShip()
+                        break
                 }
-                // 区域统计
-                if(this.componentsStatus.showMapStatistics){
-                    if(!arg.data.geometry){
-                        return
+            },
+
+            // 浦江游览
+            // 浦江游览码头定位
+             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.$refs.divStatistics.setGeometry(arg.data.geometry)
                 }
-                return this.drawGeometry = arg.data.geometry
+                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>
 
 <style scoped>
+    #map_div{
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
 
+    #tool_div {
+        display: none;
+        background-color: #cccccc;
+        z-index: 10;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 100px;
+        height: 500px;
+    }
 </style>