地图服务工具类封装

src/utils/map/Layer.js

@@ -0,0 +1,217 @@
+/**
+ * 图层加载工具类
+ */
+import {setBoat} from '@/utils/map/Boat'
+import {addLayer} from "@/utils/map/ArcgisUtil";
+
+export function addLayerByName(name,isShow){
+    switch (name) {
+        // 船舶
+        case 'cb':
+            setBoat(isShow)
+            break
+        // 码头泊位
+        case 'mt':
+            addLayer({
+                id: 'portLayer',
+                title: 'portLayer',
+                type: 'feature',
+                url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/0',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        // 警戒区
+        case 'jjq':
+            addLayer({
+                id: 'jjqLayer',
+                title: 'jjqLayer',
+                type: 'feature',
+                url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/5',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        // 掉头区
+        case 'dtq':
+            addLayer({
+                id: 'dtqLayer',
+                title: 'dtqLayer',
+                type: 'feature',
+                url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/4',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        // 锚地
+        case 'md':
+            addLayer({
+                id: 'mdLayer',
+                title: 'mdLayer',
+                type: 'feature',
+                url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/6',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        // 水上综合绿色服务器
+        case 'sszh':
+            addLayer({
+                id: 'ssfwqLayer',
+                title: 'sszhfwqLayer',
+                type: 'feature',
+                url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/3',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        // 航标
+        case 'hb':
+            addLayer({
+                id: 'hbLayer',
+                title: 'hbLayer',
+                type: 'feature',
+                url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/1',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        // 航道
+        case 'hd':
+            addLayer({
+                id: 'channelLayer',
+                title: 'channelLayer',
+                type: 'feature',
+                url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/2',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        // 水下地形
+        case 'sxdx':
+            addLayer({
+                id: 'dbsLayer',
+                title: 'dbsLayer',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/多波束/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: true
+            })
+            break
+        case '2022.1':
+            addLayer({
+                id: 'deepthLayer202201',
+                title: 'deepthLayer202201',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/第一期2022/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            break
+        case '2022.2':
+            addLayer({
+                id: 'deepthLayer202202',
+                title: 'deepthLayer202202',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/第二期2022/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            break
+        case '2021.1':
+            addLayer({
+                id: 'deepthLayer202101',
+                title: 'deepthLayer202101',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/第一期2021/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            break
+        case '2021.2':
+            addLayer({
+                id: 'deepthLayer202102',
+                title: 'deepthLayer202102',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/第二期2021/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            break
+        case '2020.1':
+            addLayer({
+                id: 'deepthLayer202001',
+                title: 'deepthLayer202001',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/第一期2020/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            break
+        case '2020.2':
+            addLayer({
+                id: 'deepthLayer202002',
+                title: 'deepthLayer202002',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/第二期2020/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            break
+        // 两岸白膜
+        case 'bm':
+            addLayer({
+                id: 'hpj500mBuildingLayer',
+                title: 'hpj500mBuildingLayer',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/黄浦江周边建筑500m/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            addLayer({
+                id: 'pxBuildingLayer',
+                title: 'pxBuildingLayer',
+                type: 'scene',
+                url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/浦西核心段白膜/SceneServer',
+                visible: isShow,
+                opacity: 1,
+                token: '',
+                is_goto: false
+            })
+            break
+        // 两岸精膜
+        case 'jm':
+
+            break
+    }
+}

src/views/map/Index.vue

@@ -21,6 +21,7 @@
             <button @click="test('水上综合服务器')">水上综合服务器</button>
             <button @click="test('航标')">航标</button>
             <button @click="test('水下地形')">水下地形</button>
+            <button @click="test('白膜')">白膜</button>
         </div>
     </div>
 </template>
@@ -30,6 +31,7 @@
     import {pjylLine, djldLine,djldLineAll,onePjylPortLocation,oneDjldPortLocation} from '@/utils/map/WaterPassenger'
     import {setBoat, setBoatPath, onLocationBoat, locationBoat} from '@/utils/map/Boat'
     import {setCenter} from '@/utils/map/Common'
+    import {addLayerByName} from '@/utils/map/Layer'
 
     export default {
         name: "MapHome",
@@ -51,6 +53,7 @@
                 isShowHbLayer:false,
                 isShowHdLayer:false,
                 isShowDbsLayer:false,
+                isShowBmLayer:false,
             }
         },
         mounted(){
@@ -108,107 +111,39 @@
                         break
                     case '码头泊位':
                         this.isShowPortLayer = !this.isShowPortLayer
-                        addLayer({
-                            id: 'portLayer',
-                            title: 'portLayer',
-                            type: 'feature',
-                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/0',
-                            visible: this.isShowPortLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('mt',this.isShowPortLayer)
                         break
                     case '警戒区':
                         this.isShowJjqLayer = !this.isShowJjqLayer
-                        addLayer({
-                            id: 'jjqLayer',
-                            title: 'jjqLayer',
-                            type: 'feature',
-                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/5',
-                            visible: this.isShowJjqLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('jjq',this.isShowJjqLayer)
                         break
                     case '掉头区':
                         this.isShowDtqLayer = !this.isShowDtqLayer
-                        addLayer({
-                            id: 'dtqLayer',
-                            title: 'dtqLayer',
-                            type: 'feature',
-                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/4',
-                            visible: this.isShowDtqLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('dtq',this.isShowDtqLayer)
                         break
                     case '锚地':
                         this.isShowMdLayer = !this.isShowMdLayer
-                        addLayer({
-                            id: 'mdLayer',
-                            title: 'mdLayer',
-                            type: 'feature',
-                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/6',
-                            visible: this.isShowMdLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('md',this.isShowMdLayer)
                         break
                     case '水上综合服务器':
                         this.isShowSsfwqLayer = !this.isShowSsfwqLayer
-                        addLayer({
-                            id: 'ssfwqLayer',
-                            title: 'sszhfwqLayer',
-                            type: 'feature',
-                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/3',
-                            visible: this.isShowSsfwqLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('sszh',this.isShowSsfwqLayer)
                         break
                     case '航标':
                         this.isShowHbLayer = !this.isShowHbLayer
-                        addLayer({
-                            id: 'hbLayer',
-                            title: 'hbLayer',
-                            type: 'feature',
-                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/1',
-                            visible: this.isShowHbLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('hb',this.isShowHbLayer)
                         break
                     case '航道':
                         this.isShowHdLayer = !this.isShowHdLayer
-                        addLayer({
-                            id: 'channelLayer',
-                            title: 'channelLayer',
-                            type: 'feature',
-                            url: 'http://10.83.68.109:6080/arcgis/rest/services/digitalTwain_3857/MapServer/2',
-                            visible: this.isShowHdLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('hd',this.isShowHdLayer)
                         break
                     case '水下地形':
                         this.isShowDbsLayer = !this.isShowDbsLayer
-                        addLayer({
-                            id: 'dbsLayer',
-                            title: 'dbsLayer',
-                            type: 'scene',
-                            url: 'https://geoscene.geosceneonline.cn/server/rest/services/Hosted/多波束/SceneServer',
-                            visible: this.isShowDbsLayer,
-                            opacity: 1,
-                            token: '',
-                            is_goto: true
-                        })
+                        addLayerByName('sxdx',this.isShowDbsLayer)
+                        break
+                    case '白膜':
+                        this.isShowBmLayer = !this.isShowBmLayer
+                        addLayerByName('bm',this.isShowBmLayer)
                         break
                     default:
                 }