Browse Source

水上客运相关功能开发优化,增加功能显隐控制

sbj 1 year ago
parent
commit
05ca1f5f65
3 changed files with 166 additions and 135 deletions
  1. 10 10
      src/utils/map/ArcgisUtil.js
  2. 133 118
      src/utils/map/WaterPassenger.js
  3. 23 7
      src/views/map/Index.vue

+ 10 - 10
src/utils/map/ArcgisUtil.js

@@ -8,8 +8,8 @@ let calculateFinish = false
 export function initBridge(){
     bridge = new CityGis.Bridge({
         id: "i_map",
-        url: "http://10.83.68.108:8090/mapVue/#/map", //政务网
-        // url: "http://localhost:8081/#/map", //政务网
+        // url: "http://10.83.68.108:8090/mapVue/#/map", //政务网
+        url: "http://localhost:8081/#/map", //政务网
         onReady: function(){
             console.log("地图创建完成");
         }
@@ -302,10 +302,9 @@ export function addGraphic(datas){
         "ActionName": "AddGraphic",
         "Parameters": {
             "type": datas.type,
-            "edit": datas.edit,
-            "temp": datas.temp,
-            "clear": datas.clear,
-            "goto": datas.goto,
+            "is_edit": datas.edit,
+            "is_clear": datas.clear,
+            "is_goto": datas.goto,
             "data": datas.data,
             "attributes": datas.attributes,
             "symbol": datas.symbol,
@@ -334,13 +333,14 @@ export function setCamera(data){
 }
 
 /*清空地图*/
-export function clearMap(){
+export function clearMap(data){
     let params = {
         "ActionName": "ClearMap",
         "Parameters": {
-            "is_draw": true,
-            "is_search": true,
-            "is_position": true
+            "is_draw": data.is_draw,
+            "is_search": data.is_search,
+            // "is_position": data.is_position,
+            "layers": data.layers
         }
     };
     bridge.Invoke(params);

+ 133 - 118
src/utils/map/WaterPassenger.js

@@ -9,77 +9,87 @@ import { fullExtent, clearMap, calculation, changeMap, setCamera,
 import {GetPjylLinePaths, GetWaterFlightPoints} from "@/apis/ssky";
 
 // 浦江游览航线
-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)]
+export function pjylLine(isShow){
+    if(isShow){
+        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(point)
-            }
-            points.push(first)
+                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
+                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)
             }
-            // 绘制到地图上
-            addGraphic(params)
-        }
-    })
+        })
+    }else{
+        clearMap({is_draw: false, is_search:true, layers: []})
+    }
+
 }
 
 // 浦江游览码头定位
-export function onePjylPortLocation(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"
+export function onePjylPortLocation(data,isShow){
+    if(isShow){
+        // 码头定位
+        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"
+        })
+    }else{
+        clearMap({is_draw: false, is_search:true, layers: []})
     }
-    addGraphic(param)
-    // 绘制陆域围栏
-    layerQuery({
-        title: "waterPassenger",
-        layerId: "4",
-        where: "码头名称='" + data.portName +"'",
-        symbol: null,
-        is_draw: true,
-        is_clear: false,
-        callback: "pjylPortHandle"
-    })
+
 }
 // 浦江游览码头查询回调
 export function pjylPortHandle(res) {
@@ -88,7 +98,6 @@ export function pjylPortHandle(res) {
         type: 'line-3d',
         data: data,
         edit: false,
-        temp: true,
         clear: false,
         goto: true,
         attributes: null,
@@ -98,35 +107,38 @@ export function pjylPortHandle(res) {
 }
 
 // 对江轮渡码头定位
-export function oneDjldPortLocation(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"
+export function oneDjldPortLocation(data,isShow){
+    if(isShow) {
+        // 码头定位
+        let param = {
+            title: data.portName,
+            type: 'point',
+            data: [data.mapx, data.mapy, 20],
+            edit: false,
+            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: "1",
+            where: "码头名称='" + data.portName + "'",
+            symbol: null,
+            is_draw: true,
+            is_clear: false,
+            callback: "djldPortHandle"
+        })*/
+    }else{
+        clearMap({is_draw: false, is_search:true, layers: []})
     }
-    addGraphic(param)
-    // 绘制陆域围栏
-    layerQuery({
-        title: "waterPassenger",
-        layerId: "1",
-        where: "码头名称='" + data.portName +"'",
-        symbol: null,
-        is_draw: true,
-        is_clear: false,
-        callback: "djldPortHandle"
-    })
 }
 
 // 浦江游览码头查询回调
@@ -136,7 +148,6 @@ export function djldPortHandle(res) {
         type: 'line-3d',
         data: data,
         edit: false,
-        temp: true,
         clear: false,
         goto: true,
         attributes: null,
@@ -146,34 +157,38 @@ export function djldPortHandle(res) {
 }
 
 // 对江轮渡航线
-export function djldLine(lineName){
-    GetWaterFlightPoints({lineName:lineName}).then(res=>{
-        let rows = res.data.Rows;
-        for (let i=0;i<rows.length;i++){
-            let lineData = rows[i]
-            let linePoints = lineData.linePoint[0]
-            let points = []
-            for(let j=0;j<linePoints.length;j++){
-                let point = [Number(linePoints[j].x),Number(linePoints[j].y)]
-                points.push(point)
-            }
-            let params = {
-                title: lineName,
-                type: 'polyline',
-                data: points,
-                edit: false,
-                temp: true,
-                clear: false,
-                goto: true,
-                attributes: null,
-                symbol: {
-                    type: "simple-line",
-                    color: [255, 0, 0],
-                    width: 2
+export function djldLine(lineName,isShow){
+    if(isShow){
+        GetWaterFlightPoints({lineName:lineName}).then(res=>{
+            let rows = res.data.Rows;
+            for (let i=0;i<rows.length;i++){
+                let lineData = rows[i]
+                let linePoints = lineData.linePoint[0]
+                let points = []
+                for(let j=0;j<linePoints.length;j++){
+                    let point = [Number(linePoints[j].x),Number(linePoints[j].y)]
+                    points.push(point)
                 }
+                let params = {
+                    title: lineName,
+                    type: 'polyline',
+                    data: points,
+                    edit: false,
+                    clear: false,
+                    goto: true,
+                    attributes: null,
+                    symbol: {
+                        type: "simple-line",
+                        color: [255, 255, 0],
+                        width: 2
+                    }
+                }
+                // 绘制到地图上
+                addGraphic(params)
             }
-            // 绘制到地图上
-            addGraphic(params)
-        }
-    })
+        })
+    }else{
+        clearMap({is_draw: false, is_search:true, layers: []})
+    }
+
 }

+ 23 - 7
src/views/map/Index.vue

@@ -3,10 +3,11 @@
         <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="clearMap()">清除</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>
             <button @click="test('对江轮渡航线')">对江轮渡航线</button>
             <button @click="test('船舶撒点')">船舶撒点</button>
@@ -17,7 +18,7 @@
 
 <script>
     import {initBridge,fullExtent,calculation,clearMap} from "@/utils/map/ArcgisUtil"
-    import {pjylLine, djldLine} from '@/utils/map/WaterPassenger'
+    import {pjylLine, djldLine,onePjylPortLocation,oneDjldPortLocation} from '@/utils/map/WaterPassenger'
     import {setBoat, setBoatPath, onLocationBoat, locationBoat} from '@/utils/map/Boat'
 
     export default {
@@ -27,6 +28,10 @@
                 mapExtent:'',
                 calculateFinish: false,
                 showBoat: false,
+                isShowPjylPort:false,
+                isShowDjldPort:false,
+                isShowPjylLine:false,
+                isShowDjldLine:false,
             }
         },
         mounted(){
@@ -41,17 +46,28 @@
             test(value){
                 switch (value) {
                     case '浦江游览码头':
-                        pjylPortLocation({
+                        this.isShowPjylPort = !this.isShowPjylPort
+                        onePjylPortLocation({
                             'portName':'东方明珠旅游码头',
                             'mapx':'2360.10554497',
                             'mapy':'794.13869415'
-                        })
+                        },this.isShowPjylPort)
+                        break
+                    case '对江轮渡码头':
+                        this.isShowDjldPort = !this.isShowDjldPort
+                        oneDjldPortLocation({
+                            'portName':'闵行轮渡站',
+                            'mapx':'-4562.25034385326',
+                            'mapy':'-26256.4229700345'
+                        },this.isShowDjldPort)
                         break
                     case '浦江游览航线':
-                        pjylLine()
+                        this.isShowPjylLine = !this.isShowPjylLine
+                        pjylLine(this.isShowPjylLine)
                         break
                     case '对江轮渡航线':
-                        djldLine('歇宁线')
+                        this.isShowDjldLine = !this.isShowDjldLine
+                        djldLine('歇宁线',this.isShowDjldLine)
                         break
                     case '船舶撒点':
                         setBoat()
@@ -76,7 +92,7 @@
     }
 
     #tool_div {
-        display: none;
+        display: block;
         background-color: #cccccc;
         z-index: 10;
         position: absolute;