From 48d575a147ecf5b5ea042dc38d99ed58df68ddfd Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期五, 15 一月 2021 18:02:53 +0800
Subject: [PATCH] 增加mapbox插接件和功能

---
 src/components/plugin/wmts_plugins.js                           |    2 
 src/router/map.js                                               |    5 
 src/views/baseInfoMgr/pipeline/PipeLineList.vue                 |   22 
 src/components/LayerController/modules/LcServiceLayerFilter.vue |   66 ++--
 src/conf/mapbox/MCWMS.js                                        |   25 +
 src/conf/mapbox/MCWMTS.js                                       |   22 +
 src/api/mapApi.js                                               |    9 
 src/components/LayerController/modules/LcServiceLayer.vue       |   49 +-
 src/components/panel/TopEnterprisePanel.vue                     |    6 
 src/views/baseInfoMgr/pipeline/PipeLineIndex.vue                |   56 ++--
 src/conf/mapbox/MConfig.js                                      |   20 +
 src/conf/MapConfig.js                                           |    5 
 package.json                                                    |    1 
 src/conf/mapbox/MCVectorTile.js                                 |   89 ++++++
 src/views/mapbox/MapBoxHome.vue                                 |  272 +++++++++++++++++++
 src/conf/mapbox/MCBaseMap.js                                    |  184 +++++++++++++
 16 files changed, 724 insertions(+), 109 deletions(-)

diff --git a/package.json b/package.json
index a9d5e32..0e5e344 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@cgcs2000/mapbox-gl": "^1.13.0",
     "@jiaminghi/data-view": "^2.10.0",
     "axios": "^0.18.0",
     "core-js": "^3.6.5",
diff --git a/src/api/mapApi.js b/src/api/mapApi.js
index e7ebbc3..3cde8cb 100644
--- a/src/api/mapApi.js
+++ b/src/api/mapApi.js
@@ -2,13 +2,14 @@
 // import * as Service from './services'
 // const $HOST = 'http://10.238.221.113'
 // 娴嬭瘯鐜IP锛歨ttp://10.238.221.113
-
-
+import axios from '@utils/axios'
 /**
  * 璇ユ柟娉曢厤缃�
  */
-class MapAPI{
-    
+class MapAPI {
+  getToken (param) {
+    axios.get(param.url, param.option)
+  }
 }
 
 export default new MapAPI()
diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue
index e7674d5..dcf9fcd 100644
--- a/src/components/LayerController/modules/LcServiceLayer.vue
+++ b/src/components/LayerController/modules/LcServiceLayer.vue
@@ -28,34 +28,33 @@
 </template>
 
 <script>
-import WmsHelper from "../../helpers/WmsHelper";
-
+import WmsHelper from '../../helpers/WmsHelper'
 
 export default {
-  name: "LcServiceLayer",
+  name: 'LcServiceLayer',
   components: {},
-  data() {
+  data () {
     return {
       selectedLineLayer: [], // 閫変腑鐨勭绾垮浘灞�
       selectedSubsidiaryLayer: [], // 閫変腑鐨勯檮灞炶绱�
       serviceTileLayerList: [], // Tile鍥惧眰鍒楄〃
       serviceWmtsLayerList: [], // Wmts鍥惧眰鍒楄〃
       serviceWmsLayerList: [] // 鍥惧眰鍒楄〃
-    };
+    }
   },
   computed: {
-    serviceLayerHelper() {
+    serviceLayerHelper () {
       return this.$store.state.map.serviceLayerHelper
     },
-    mapConfig() {
+    mapConfig () {
       return this.$store.state.map.mapConfig
     }
   },
-  mounted() {
+  mounted () {
     // console.log('03姝ラ锛�', this.helper)
   },
   methods: {
-    swAllLayers(item) {
+    swAllLayers (item) {
       // eslint-disable-next-line no-debugger
       item.checked = !item.checked
       for (let i = 0, len = item.layers.length; i < len; ++i) {
@@ -65,39 +64,39 @@
 
       console.log(this.mapConfig)
     },
-    swTileLayer() {
+    swTileLayer () {
       console.log('璇ILE鏂规硶鏈疄鐜帮紒')
     },
-    swWmtsLayer() {
+    swWmtsLayer () {
       console.log('璇MTS鏂规硶鏈疄鐜帮紒')
     },
-    swWmsLayer(itm) {
+    swWmsLayer (itm) {
       console.log('22222222')
       itm.checked = !itm.checked
       this.updateWms()
     },
-    swFilter(item) {
+    swFilter (item) {
       this.$store.commit('setSelectedServiceLayer', item.code)
       this.$store.commit('toggleServiceLayerFilter')
     },
-    updateServiceLayerList() {
+    updateServiceLayerList () {
       // eslint-disable-next-line no-debugger
       // debugger
-      let tileCfg = this.serviceLayerHelper.getTileLayers()
+      const tileCfg = this.serviceLayerHelper.getTileLayers()
       this.serviceTileLayerList = []
       for (let i = 0, len = tileCfg.length; i < len; ++i) {
         if (tileCfg[i].config.inLegend) {
           console.log(tileCfg[i])
         }
       }
-      let wmtsCfg = this.serviceLayerHelper.getWmtsLayers()
+      const wmtsCfg = this.serviceLayerHelper.getWmtsLayers()
       this.serviceWmtsLayerList = []
       for (let i = 0, len = wmtsCfg.length; i < len; ++i) {
         if (wmtsCfg[i].config.inLegend) {
           console.log(wmtsCfg[i])
         }
       }
-      let wmsCfg = this.serviceLayerHelper.getWmsLayers()
+      const wmsCfg = this.serviceLayerHelper.getWmsLayers()
       this.serviceWmsLayerList = []
       for (let i = 0, len = wmsCfg.length; i < len; ++i) {
         if (wmsCfg[i].config.inLegend) {
@@ -105,32 +104,32 @@
         }
       }
     },
-    updateWms() {
+    updateWms () {
       console.log('------')
       var mapConfig = this.mapConfig
       var wmsHelper = new WmsHelper()
       wmsHelper.initMapConfig(mapConfig)
       var wmsLayersMap = wmsHelper.getWmsLayersMap()
-      //var filterURL = wmsHelper.getFilterURL()
+      // var filterURL = wmsHelper.getFilterURL()
       console.log(wmsLayersMap)
       for (var k in wmsLayersMap) {
         var layers = wmsLayersMap[k]
         var tileLayer = this.serviceLayerHelper.getTileLayer(k)
         if (tileLayer) {
-          tileLayer.setParams({layers: layers.join(',')}, false)
+          tileLayer.setParams({ layers: layers.join(',') }, false)
           tileLayer.setUrl(tileLayer.config.url, false)
         }
       }
     }
   },
   watch: {
-    serviceLayerHelper(newVal) {
+    serviceLayerHelper (newVal) {
       if (newVal != null) {
-        this.updateServiceLayerList();
+        this.updateServiceLayerList()
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">
diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue
index 4fe2af2..a185123 100644
--- a/src/components/LayerController/modules/LcServiceLayerFilter.vue
+++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue
@@ -14,16 +14,16 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
-import WmsHelper from "../../helpers/WmsHelper";
+import { mapState, mapMutations } from 'vuex'
+import WmsHelper from '../../helpers/WmsHelper'
 
 export default {
-  name: "LcServiceLayerFilter",
+  name: 'LcServiceLayerFilter',
   components: {},
-  data() {
+  data () {
     return {
-      filterConfig: [], // 闄勫睘瑕佺礌
-    };
+      filterConfig: [] // 闄勫睘瑕佺礌
+    }
   },
   computed: {
     ...mapState({
@@ -39,45 +39,45 @@
       mapConfig: (state) => {
         return state.mapConfig
       }
-    }),
+    })
   },
-  mounted() {
+  mounted () {
 
   },
   methods: {
     ...mapMutations([]),
-    getFilterConfig(){
-        return this.filterConfig
+    getFilterConfig () {
+      return this.filterConfig
     },
-    swAllSubFilter(item){
-        item.checked = !item.checked
-        for(let i = 0, len = item.filters.length; i < len; ++i){
-            item.filters[i].checked = item.checked
-        }
+    swAllSubFilter (item) {
+      item.checked = !item.checked
+      for (let i = 0, len = item.filters.length; i < len; ++i) {
+        item.filters[i].checked = item.checked
+      }
 
-        console.log('------')
-        var mapConfig = this.mapConfig
-        var wmsHelper = new WmsHelper()
-        wmsHelper.initMapConfig(mapConfig)
-        var wmsLayersMap = wmsHelper.getWmsLayersMap()
-        //var filterURL = wmsHelper.getFilterURL()
-        console.log(wmsLayersMap)
-        for (var k in wmsLayersMap) {
-            var layers = wmsLayersMap[k]
-            var tileLayer = this.serviceLayerHelper.getTileLayer(k)
-            if (tileLayer) {
-                tileLayer.setParams({layers: layers.join(',')}, true)
-                tileLayer.setUrl(tileLayer.config.url,false)
-            }
+      console.log('------')
+      var mapConfig = this.mapConfig
+      var wmsHelper = new WmsHelper()
+      wmsHelper.initMapConfig(mapConfig)
+      var wmsLayersMap = wmsHelper.getWmsLayersMap()
+      // var filterURL = wmsHelper.getFilterURL()
+      console.log(wmsLayersMap)
+      for (var k in wmsLayersMap) {
+        var layers = wmsLayersMap[k]
+        var tileLayer = this.serviceLayerHelper.getTileLayer(k)
+        if (tileLayer) {
+          tileLayer.setParams({ layers: layers.join(',') }, true)
+          tileLayer.setUrl(tileLayer.config.url, false)
         }
+      }
     }
   },
   watch: {
-      selectedServiceLayer(newVal){
-          this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
-      }
+    selectedServiceLayer (newVal) {
+      this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
+    }
   }
-};
+}
 </script>
 
 <style scoped lang="less">
diff --git a/src/components/panel/TopEnterprisePanel.vue b/src/components/panel/TopEnterprisePanel.vue
index 1185c8c..d9c43db 100644
--- a/src/components/panel/TopEnterprisePanel.vue
+++ b/src/components/panel/TopEnterprisePanel.vue
@@ -107,7 +107,7 @@
   }
 
   .search-form .el-form-item {
-    margin: 0px;
+    margin: 0;
   }
 
   .search-form .el-icon-search {
@@ -122,8 +122,8 @@
   }
 
   .search-result {
-    margin: 5px 0px 0px 0px;
-    padding: 0px;
+    margin: 5px 0 0 0;
+    padding: 0;
     border: #051842;
     overflow-y: scroll;
     background-color: #051842;
diff --git a/src/components/plugin/wmts_plugins.js b/src/components/plugin/wmts_plugins.js
index 55fe18a..78ceee7 100644
--- a/src/components/plugin/wmts_plugins.js
+++ b/src/components/plugin/wmts_plugins.js
@@ -28,7 +28,7 @@
       }
       for (var i in lOptions) {
         // all keys that are in defaultWmtsParams options go to WMTS params
-        if (wmtsParams.hasOwnProperty(i) && i != 'matrixIds') {
+        if (wmtsParams.hasOwnProperty(i) && i !== 'matrixIds') {
           wmtsParams[i] = lOptions[i]
         }
       }
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 03014dd..8cd7617 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -26,8 +26,9 @@
   crs: L.CRS.EPSG4326,
   minZoom: 3,
   maxZoom: 18,
-  center: [26, 104],
-  zoom: 3,
+  // center: [26, 104],
+  center: [32.224016189575195, 118.77070426940918],
+  zoom: 14,
   worldCopyJump: true,
   inertia: true,
   zoomControl: false,
diff --git a/src/conf/mapbox/MCBaseMap.js b/src/conf/mapbox/MCBaseMap.js
new file mode 100644
index 0000000..de82710
--- /dev/null
+++ b/src/conf/mapbox/MCBaseMap.js
@@ -0,0 +1,184 @@
+/** mapbox 鍦板浘basemap閰嶇疆鏂囦欢 */
+// 鑾峰彇褰撳墠椤甸潰ip鍦板潃鍜岀鍙�
+const curWwwPath = window.document.location.href
+const pathname = window.document.location.pathname
+const pos = curWwwPath.indexOf(pathname)
+const HOST_URL = curWwwPath.substring(0, pos)
+const SINOPEC_GIS_HOST = 'http://10.246.132.249:8080' // 鍐呯綉澶╁湴鍥句富鏈哄湴鍧�
+const TDT_GIS_HOST = 'http://t0.tianditu.gov.cn' // 鍏綉澶╁湴鍥句富鏈哄湴鍧�
+const TDT_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 澶囩敤tk: f1b72b5e7cb1175acddfa485f1bc9770
+export default {
+  TokenConfig: {
+    IsLoadTDTByToken: true, // 鏄惁浣跨敤鍐呯綉鍦板浘
+    TokenOption: {
+      url: SINOPEC_GIS_HOST + '/RemoteTokenServer', // 鑾峰彇token鐨勬湇鍔℃帴鍙�
+      option: {
+        request: 'getToken',
+        username: 'sipms', // 鑾峰彇token鐨勭敤鎴峰悕
+        password: 'sinopecipms', // 鑾峰彇token鐨勫瘑鐮�
+        expiration: 1440,
+        clientid: 'ref.' + HOST_URL// 鑾峰彇token鐨勫簲鐢ㄦ湇鍔″櫒鍦板潃
+      }
+    }
+  },
+  BaseMap: {
+    IntranetTDT: [
+      {
+        name: '褰卞儚鍦板浘',
+        visibility: 'visible', // 鍥惧眰鏄剧ず闅愯棌 2 绉嶇姸鎬� visible none
+        isAddToMap: true,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [
+            SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-image-globe/WMTS?' +
+              'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'
+          ]
+        },
+        layer: {
+          id: 'img_c', // 鍥惧眰id锛岃淇濊瘉鍞竴鎬�
+          type: 'raster', // 鍥惧眰绫诲瀷
+          source: 'img_c', // 鏁版嵁婧� 鍜� source 瀹炰緥鍖栧悗鐨勭殑璇锋眰鍚嶇О淇濇寔涓�鑷撮渶瑕佹敞鎰�
+          minzoom: 0, // 鍥惧眰鏈�灏忕缉鏀剧骇鏁�
+          maxzoom: 17 // 鍥惧眰鏈�澶х缉鏀剧骇鏁�
+        }
+      },
+      {
+        name: '褰卞儚鏍囨敞',
+        visibility: 'visible', // visible non
+        isAddToMap: true,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-image/WMTS?' +
+                'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}']
+        },
+        layer: {
+          id: 'cia_c',
+          type: 'raster',
+          source: 'cia_c',
+          minzoom: 0,
+          maxzoom: 17
+        }
+      },
+      {
+        name: '鐭㈤噺鍦板浘',
+        visibility: 'visible', // visible non
+        isAddToMap: false,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-vector-globe/WMTS?' +
+                'layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}']
+        },
+        layer: {
+          id: 'vec_c',
+          type: 'raster',
+          source: 'vec_c',
+          minzoom: 0,
+          maxzoom: 17
+        }
+      },
+      {
+        name: '鐭㈤噺鏍囨敞',
+        visibility: 'visible', // visible non
+        isAddToMap: false,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-vector/WMTS?' +
+                'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}']
+        },
+        layer: {
+          id: 'cva_c',
+          type: 'cva_c',
+          source: 'cva_c',
+          minzoom: 0,
+          maxzoom: 17
+        }
+      }
+    ],
+
+    InternetTDT: [
+      {
+        name: '褰卞儚鍦板浘',
+        visibility: 'visible', // 鍥惧眰鏄剧ず闅愯棌 2 绉嶇姸鎬� visible none
+        isAddToMap: true,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [
+            TDT_GIS_HOST + '/img_c/wmts?layer=img&style=default&tilematrixset=c' +
+            '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
+            '&tk=' + TDT_GIS_TOKEN
+          ]
+        },
+        layer: {
+          id: 'img_c', // 鍥惧眰id锛岃淇濊瘉鍞竴鎬�
+          type: 'raster', // 鍥惧眰绫诲瀷
+          source: 'img_c', // 鏁版嵁婧� 鍜� source 瀹炰緥鍖栧悗鐨勭殑璇锋眰鍚嶇О淇濇寔涓�鑷撮渶瑕佹敞鎰�
+          minzoom: 0, // 鍥惧眰鏈�灏忕缉鏀剧骇鏁�
+          maxzoom: 17 // 鍥惧眰鏈�澶х缉鏀剧骇鏁�
+        }
+      },
+      {
+        name: '褰卞儚鏍囨敞',
+        visibility: 'visible', // visible non
+        isAddToMap: true,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [TDT_GIS_HOST + '/cia_c/wmts?layer=cia&style=default&tilematrixset=c' +
+          '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
+          '&tk=' + TDT_GIS_TOKEN]
+        },
+        layer: {
+          id: 'cia_c',
+          type: 'raster',
+          source: 'cia_c',
+          minzoom: 0,
+          maxzoom: 17
+        }
+      },
+      {
+        name: '鐭㈤噺鍦板浘',
+        visibility: 'visible', // visible non
+        isAddToMap: false,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [TDT_GIS_HOST + '/vec_c/wmts?layer=vec&style=default&tilematrixset=c' +
+          '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
+          '&tk=' + TDT_GIS_TOKEN]
+        },
+        layer: {
+          id: 'vec_c',
+          type: 'raster',
+          source: 'vec_c',
+          minzoom: 0,
+          maxzoom: 17
+        }
+      },
+      {
+        name: '鐭㈤噺鏍囨敞',
+        visibility: 'visible', // visible non
+        isAddToMap: false,
+        source: {
+          type: 'raster',
+          tileSize: 256,
+          tiles: [TDT_GIS_HOST + '/cva_c/wmts?layer=cva&style=default&tilematrixset=c' +
+          '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
+          '&tk=' + TDT_GIS_TOKEN]
+        },
+        layer: {
+          id: 'cva_c',
+          type: 'cva_c',
+          source: 'cva_c',
+          minzoom: 0,
+          maxzoom: 17
+        }
+      }
+    ]
+  }
+
+}
diff --git a/src/conf/mapbox/MCVectorTile.js b/src/conf/mapbox/MCVectorTile.js
new file mode 100644
index 0000000..dd163b2
--- /dev/null
+++ b/src/conf/mapbox/MCVectorTile.js
@@ -0,0 +1,89 @@
+/** mapbox 鍦板浘閰嶇疆鏂囦欢 */
+export default [
+  {
+    name: '鍗椾含鐭冲寲绠＄綉',
+    visibility: 'visible', // 鍥惧眰鏄剧ず闅愯棌 2 绉嶇姸鎬� visible none
+    isAddToMap: true,
+    source: {
+      type: 'vector', // 鐭㈤噺绫诲瀷
+      scheme: 'tms',
+      zoomOffset: -1, // 缁忕含搴﹀ぉ鍦板浘 闇�瑕亃oomOffset -1
+      tiles: [
+        // 鑾峰彇GeoServer 鐭㈤噺鍒囩墖鏈嶅姟,鍙互鏄竴涓嬪嚑绉嶆柟寮�
+        'http://localhost:8080/vector/tile/{z}/{x}/{y}' // postgis 鏁版嵁搴�
+        // "http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Acontrolpoint@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf" //geoserver
+      ]
+    },
+    layer: {
+      id: 'vectorTilePoint',
+      type: 'circle', // 鏌ョ湅 鏁版嵁婧愮殑绫诲瀷 鍙傝�僲apbox 鐭㈤噺鏁版嵁鍙彁渚涚殑鍙傛暟绫诲瀷
+      source: 'vectorTilePoint',
+      'source-layer': 'points', // 鐭㈤噺鏁版嵁 濡傛灉鍖呭惈 澶氱鍥惧眰鏁版嵁 閫氳繃 杩欎釜鎸囧畾 鏁版嵁鍚嶇О
+      // "source-layer": "controlpoint",
+      minzoom: 0,
+      maxzoom: 18,
+      // "paint": {
+      //      "circle-radius": 10,
+      //      "circle-color": "#3887be"
+      //
+      // }
+      paint: {
+        'circle-radius': {
+          stops: [
+            [8, 0.1],
+            [11, 0.5],
+            [15, 3],
+            [20, 30]
+          ]
+        },
+        'circle-color': {
+        // property: 'v',
+          stops: [
+            [1, '#990055'],
+            [2, '#cdb640']
+          ]
+
+        },
+        'circle-opacity': 1
+      }
+    }
+  },
+  {
+    name: '鍗椾含寤虹瓚',
+    visibility: 'visible', // 鍥惧眰鏄剧ず闅愯棌 2 绉嶇姸鎬� visible none
+    isAddToMap: true,
+    source: {
+      type: 'vector',
+      scheme: 'tms',
+      zoomOffset: -1, // 蹇呴』瑕� 缁忕含搴﹀ぉ鍦板浘 鍏朵粬鍥惧眰闇�瑕亃oomOffset -1
+      tiles: ['http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Abuildings@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf']
+    },
+    layer: {
+      id: 'builds',
+      source: 'buildings',
+      'source-layer': 'buildings',
+      filter: ['==', 'extrude', 'true'],
+      type: 'fill-extrusion',
+      minzoom: 15,
+      paint: {
+
+        'fill-extrusion-color':
+            [
+              'interpolate',
+              ['linear'],
+              ['get', 'height'], // 灞炴�у瓧娈�
+              0, 'rgb(255, 255, 191)',
+              75, 'rgb(253, 174, 97)',
+              150, 'rgb(215,25,28)'
+            ],
+        'fill-extrusion-height': [
+          'interpolate', ['linear'], ['zoom'],
+          15, 0,
+          15.05, ['get', 'height']
+        ], // 灞炴�у瓧娈�
+        'fill-extrusion-opacity':
+            0.8
+      }
+    }
+  }
+]
diff --git a/src/conf/mapbox/MCWMS.js b/src/conf/mapbox/MCWMS.js
new file mode 100644
index 0000000..1defbd8
--- /dev/null
+++ b/src/conf/mapbox/MCWMS.js
@@ -0,0 +1,25 @@
+/** mapbox 鍦板浘閰嶇疆鏂囦欢 */
+export default [
+  {
+    name: 'wms鍥惧眰1',
+    visibility: 'visible', // 鍥惧眰鏄剧ず闅愯棌 2 绉嶇姸鎬� visible none
+    isAddToMap: true,
+    source: {
+      type: 'raster',
+      tiles: [
+        'http://xearth.cn:6289/server/ogcserver/PipeLine/wms?' +
+               'version=1.1.1&service=WMS&request=GetMap&layers=all&styles=&format=image%2Fpng&transparent=true&version=1.1.1&' +
+               'width=256&height=256&srs=EPSG%3A4326&bbox={bbox-epsg-4490}'
+      ],
+      tileSize: 256,
+      zoomOffset: -1
+    },
+    layer: {
+      id: 'wms',
+      type: 'raster',
+      source: 'wms',
+      minzoom: 0,
+      maxzoom: 17
+    }
+  }
+]
diff --git a/src/conf/mapbox/MCWMTS.js b/src/conf/mapbox/MCWMTS.js
new file mode 100644
index 0000000..cb10288
--- /dev/null
+++ b/src/conf/mapbox/MCWMTS.js
@@ -0,0 +1,22 @@
+/** mapbox 鍦板浘閰嶇疆鏂囦欢 */
+export default [
+  {
+    name: '鍥界晫',
+    visibility: 'visible', // 鍥惧眰鏄剧ず闅愯棌 2 绉嶇姸鎬� visible none
+    isAddToMap: true,
+    source: {
+      type: 'raster',
+      tiles: [
+        'http://xearth.cn:6299/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}'
+      ],
+      tileSize: 256
+    },
+    layer: {
+      id: 'guojie',
+      type: 'raster',
+      source: 'guojie',
+      minzoom: 0,
+      maxzoom: 17
+    }
+  }
+]
diff --git a/src/conf/mapbox/MConfig.js b/src/conf/mapbox/MConfig.js
new file mode 100644
index 0000000..481a4a4
--- /dev/null
+++ b/src/conf/mapbox/MConfig.js
@@ -0,0 +1,20 @@
+/** mapbox 鍦板浘閰嶇疆鏂囦欢 */
+import MCBaseMap from '@/conf/mapbox/MCBaseMap'
+import MCWMTS from '@/conf/mapbox/MCWMTS'
+import MCVectorTile from '@/conf/mapbox/MCVectorTile'
+import MCWMS from '@/conf/mapbox/MCWMS'
+const mapOptions = {
+  center: [118.7843, 32.2221], // 鍦板浘涓績鐐�
+  zoom: 13, // 鍦板浘褰撳墠缂╂斁绾ф暟
+  maxZoom: 16
+}
+export default {
+  mapOptions: mapOptions,
+  TokenConfig: MCBaseMap.TokenConfig, // 鏄惁閫氳繃token鍔犺浇鍦板浘
+  layers: {
+    BaseMap: MCBaseMap.BaseMap,
+    WMTS: MCWMTS,
+    VectorTile: MCVectorTile,
+    wms: MCWMS
+  }
+}
diff --git a/src/router/map.js b/src/router/map.js
index 7847ce1..323d3a3 100644
--- a/src/router/map.js
+++ b/src/router/map.js
@@ -9,9 +9,10 @@
  * }
  */
 const MapTemplate = (r) => require.ensure([], () => r(require('../views/MapTemplate')), 'frame')
-// const MapHomeMapTalks = r => require.ensure([], () => r(require('../views/map/MapHome-maptalks')), 'web')
+const MapBoxHome = r => require.ensure([], () => r(require('../views/mapbox/MapBoxHome')), 'frame')
 const routes = [
-  { path: '/mapTemplate', name: 'MapTemplate', meta: { statusBgc: 0 }, component: MapTemplate }
+  { path: '/mapTemplate', name: 'MapTemplate', meta: { statusBgc: 0 }, component: MapTemplate },
+  { path: '/mapboxHome', name: 'MapBoxHome', meta: { statusBgc: 0 }, component: MapBoxHome }
 ]
 
 // 鎵�鏈変笂闈㈠畾涔夌殑璺敱閮借鍐欏湪涓嬮潰鐨剅outes閲�
diff --git a/src/views/baseInfoMgr/pipeline/PipeLineIndex.vue b/src/views/baseInfoMgr/pipeline/PipeLineIndex.vue
index 6e8d732..7118d09 100644
--- a/src/views/baseInfoMgr/pipeline/PipeLineIndex.vue
+++ b/src/views/baseInfoMgr/pipeline/PipeLineIndex.vue
@@ -6,37 +6,37 @@
 </template>
 
 <script>
-    import 'leaflet/dist/leaflet.css'
-    import Sgis from '@src/Sgis'
-    import PipeLineList from "./PipeLineList";
-    import {mapMutations} from 'vuex'
+import 'leaflet/dist/leaflet.css'
+import Sgis from '@src/Sgis'
+import PipeLineList from './PipeLineList'
+import { mapMutations } from 'vuex'
 
-    export default {
-        name: 'PipeLineIndex',
-        components: {PipeLineList},
-        mounted() {
-            this.$nextTick(() => {
-                this.init()
-            })
-        },
-        methods: {
-            ...mapMutations({
-                setMapObj: 'setMapObj',
-                setLayerHelper: 'setLayerHelper'
-            }),
-            init() {
-                const mapcontainer = this.$refs.rootmap
-                this.mapObj = Sgis.initMap(mapcontainer)
-                this.basemapHelper = Sgis.initBasemaps(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧簳鍥�
-                this.vectorLayerHelper = Sgis.initLayers(this.mapObj.map, this.mapObj.L, {}, this.$nodeEnv) // 鍒濆鍖栦笟鍔″浘灞�
-                this.setLayerHelper(this.vectorLayerHelper)
-                return this.map
-            },
-            setLayerHelper() {
+export default {
+  name: 'PipeLineIndex',
+  components: { PipeLineList },
+  mounted () {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    ...mapMutations({
+      setMapObj: 'setMapObj',
+      setLayerHelper: 'setLayerHelper'
+    }),
+    init () {
+      const mapcontainer = this.$refs.rootmap
+      this.mapObj = Sgis.initMap(mapcontainer)
+      this.basemapHelper = Sgis.initBasemaps(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧簳鍥�
+      this.vectorLayerHelper = Sgis.initLayers(this.mapObj.map, this.mapObj.L, {}, this.$nodeEnv) // 鍒濆鍖栦笟鍔″浘灞�
+      this.setLayerHelper(this.vectorLayerHelper)
+      return this.map
+    },
+    setLayerHelper () {
 
-            }
-        }
     }
+  }
+}
 </script>
 
 <style lang="less">
diff --git a/src/views/baseInfoMgr/pipeline/PipeLineList.vue b/src/views/baseInfoMgr/pipeline/PipeLineList.vue
index 59606ce..5df1afb 100644
--- a/src/views/baseInfoMgr/pipeline/PipeLineList.vue
+++ b/src/views/baseInfoMgr/pipeline/PipeLineList.vue
@@ -87,18 +87,18 @@
 </template>
 
 <script>
-    import 'leaflet/dist/leaflet.css'
+import 'leaflet/dist/leaflet.css'
 
-    export default {
-        name: 'PipeLineList',
-        datas: {},
-        mounted() {
-            this.$nextTick(() => {
-                this.init()
-            })
-        },
-        methods: {}
-    }
+export default {
+  name: 'PipeLineList',
+  datas: {},
+  mounted () {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {}
+}
 </script>
 
 <style lang="less">
diff --git a/src/views/mapbox/MapBoxHome.vue b/src/views/mapbox/MapBoxHome.vue
new file mode 100644
index 0000000..02dff1c
--- /dev/null
+++ b/src/views/mapbox/MapBoxHome.vue
@@ -0,0 +1,272 @@
+<template>
+  <div id="map"></div>
+</template>
+
+<script>
+// 寮曞叆缁勪欢
+import MConfig from '@/conf/mapbox/MConfig'
+const mapboxgl = require('@cgcs2000/mapbox-gl')
+export default {
+  name: 'MapBoxHome',
+  data () {
+    return {
+      IsLoadTDTByToken: MConfig.TokenConfig.IsLoadTDTByToken
+    }
+  },
+  mounted () {
+    // if (this.IsLoadTDTByToken) {
+    //   this.requireToken()
+    //   return
+    // }
+    this.initmap()
+  },
+  methods: {
+    async requireToken () {
+      // const param = MConfig.TokenConfig.TokenOption
+      // let token = await
+    },
+    initmap () {
+      // const layers = MConfig.layers
+      // for (const item in layers) {
+      //   const groupLayer = layers[item]
+      //   for (const itm in groupLayer) {
+      //     console.log(groupLayer[itm])
+      //   }
+      // }
+      // layers.forEach((item) => {
+      //        item.forEach((itm) => {
+      // console.log(itm)
+      // })
+      // })
+      var vecUrl = 'http://t0.tianditu.com/img_c/wmts?tk=5d76218063082952d18b76da5005f490'
+      var cvaUrl = 'http://t0.tianditu.com/cia_c/wmts?tk=5d76218063082952d18b76da5005f490'
+      var tdtVec = {
+        // 绫诲瀷涓烘爡鏍肩摝鐗�
+        type: 'raster',
+        tiles: [
+          // 璇锋眰鍦板潃
+          // vecUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
+          vecUrl + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
+        ],
+        // 鍒嗚鲸鐜�
+        tileSize: 256
+      }
+      var tdtCva = {
+        type: 'raster',
+        tiles: [
+          // cvaUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
+          cvaUrl + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
+        ],
+        tileSize: 256
+      }
+      // wmts妯″潡
+      var wmts = {
+        type: 'raster',
+        tiles: [
+          'http://xearth.cn:6299/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}'
+        ],
+        tileSize: 256
+        // ,
+        // zoomOffset: -1
+      }
+
+      const buildings = {
+        type: 'vector',
+        scheme: 'tms',
+        zoomOffset: -1, // 蹇呴』瑕� 缁忕含搴﹀ぉ鍦板浘 鍏朵粬鍥惧眰闇�瑕亃oomOffset -1
+        tiles: ['http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Abuildings@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf']
+      }
+      // var wms ={
+      //      "type": "raster",
+      //      'tiles': [
+      //          'http://xearth.cn:6289/server/ogcserver/PipeLine/wms?' +
+      //          'version=1.1.1&service=WMS&request=GetMap&layers=all&styles=&format=image%2Fpng&transparent=true&version=1.1.1&' +
+      //          'width=256&height=256&srs=EPSG%3A4326&bbox={bbox-epsg-4490}'
+      //      ],
+      //      'tileSize': 256,
+      //      'zoomOffset': -1
+      //
+      // }
+      // 鐭㈤噺鐡︾墖妯″潡
+      var test = {
+        // 鐭㈤噺绫诲瀷
+        type: 'vector',
+        // 鏈嶅姟绫诲瀷 tms锛岃浣跨敤wmts鏈嶅姟璇锋崲鎴恮mts
+        scheme: 'tms',
+        zoomOffset: -1, // 蹇呴』瑕� 缁忕含搴﹀ぉ鍦板浘 鍏朵粬鍥惧眰闇�瑕亃oomOffset -1
+        tiles: [
+          // 鑾峰彇GeoServer 鐭㈤噺鍒囩墖鏈嶅姟,鍙互鏄竴涓嬪嚑绉嶆柟寮�
+          'http://localhost:8080/vector/tile/{z}/{x}/{y}' // postgis 鏁版嵁搴�
+          // "http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Acontrolpoint@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf" //geoserver
+        ]
+      }
+      var geojson = {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [118.759, 32.214]
+          },
+          properties: {
+            title: '鐐�1',
+            description: '鐐�1娴嬭瘯'
+          }
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [118.775, 32.214]
+          },
+          properties: {
+            title: '鐐�2',
+            description: '鐐�2娴嬭瘯'
+          }
+        }]
+      }
+      // mapboxgl.accessToken = 'pk.eyJ1IjoiYXR0dWluZyIsImEiOiJjamNham4ycTgwZzVkMndzM2lzYTJtN2VjIn0.kB9yWdGNuo7_oi3brXX4-A';
+      // 瀹炰緥鍖朚ap鍦板浘瀵硅薄
+      var map = new mapboxgl.Map({
+        // 鍦板浘瀹瑰櫒div鐨刬d
+        container: 'map',
+        style: {
+          // 璁剧疆鐗堟湰鍙凤紝涓�瀹氳璁剧疆
+          version: 8,
+          // 娣诲姞鏉ユ簮
+          sources: {
+            tdtVec: tdtVec,
+            tdtCva: tdtCva,
+            wmts: wmts,
+            buildings: buildings,
+            // "wms":wms,
+            test: test
+          },
+          layers: [
+            {
+              // 鍥惧眰id锛岃淇濊瘉鍞竴鎬�
+              id: 'tdtVec',
+              // 鍥惧眰绫诲瀷
+              type: 'raster',
+              // 鏁版嵁婧�
+              source: 'tdtVec',
+              // 鍥惧眰鏈�灏忕缉鏀剧骇鏁�
+              minzoom: 0,
+              // 鍥惧眰鏈�澶х缉鏀剧骇鏁�
+              maxzoom: 17
+            },
+            {
+              id: 'tdtCva',
+              type: 'raster',
+              source: 'tdtCva',
+              minzoom: 0,
+              maxzoom: 17
+            },
+            {
+              id: 'wmts',
+              type: 'raster',
+              source: 'wmts',
+              minzoom: 0,
+              maxzoom: 17
+            },
+            {
+              id: 'builds',
+              source: 'buildings',
+              'source-layer': 'buildings',
+              type: 'fill-extrusion',
+              minzoom: 15,
+              paint: {
+                'fill-extrusion-color':
+                    [
+                      'interpolate',
+                      ['linear'],
+                      ['get', 'height'], // 灞炴�у瓧娈�
+                      0, 'rgb(255, 255, 191)',
+                      75, 'rgb(253, 174, 97)',
+                      150, 'rgb(215,25,28)'
+                    ],
+                'fill-extrusion-height': [
+                  'interpolate', ['linear'], ['zoom'],
+                  15, 0,
+                  15.05, ['get', 'height']
+                ], // 灞炴�у瓧娈�
+                'fill-extrusion-opacity':
+                    0.7
+              }
+            },
+            // {
+            //      "id": "wms",
+            //      "type": "raster",
+            //      "source": "wms",
+            //      "minzoom": 0,
+            //      "maxzoom": 17
+            // },
+            {
+              id: 'test',
+              type: 'circle',
+              source: 'test',
+              'source-layer': 'points',
+              // "source-layer": "controlpoint",
+              minzoom: 0,
+              maxzoom: 18,
+              // "paint": {
+              //      "circle-radius": 10,
+              //      "circle-color": "#3887be"
+              //
+              // }
+              paint: {
+                'circle-radius': {
+                  stops: [
+                    [8, 0.1],
+                    [11, 0.5],
+                    [15, 3],
+                    [20, 30]
+                  ]
+                },
+                'circle-color': {
+                  // property: 'v',
+                  stops: [
+                    [1, '#990055'],
+                    [2, '#cdb640']
+                  ]
+
+                },
+                'circle-opacity': 1
+              }
+            }
+          ]
+        },
+        // 鍦板浘涓績鐐�
+        center: [118.7843, 32.2221],
+        // 鍦板浘褰撳墠缂╂斁绾ф暟
+        zoom: 13,
+        maxZoom: 16
+      })
+      // 瀹炰緥鍖栧鑸帶浠�
+      var nav = new mapboxgl.NavigationControl(
+        {
+          // 鏄惁鏄剧ず鎸囧崡閽堬紝榛樿涓簍rue
+          showCompass: true,
+          // 鏄惁鏄剧ず缂╂斁鎸夐挳锛岄粯璁や负true
+          showZoom: true
+        }
+      )
+      // 娣诲姞瀵艰埅鎺т欢锛屾帶浠剁殑浣嶇疆鍖呮嫭'top-left', 'top-right','bottom-left' ,'bottom-right'鍥涚锛岄粯璁や负'top-right'
+      map.addControl(nav, 'top-left')
+      map.on('click', function (e) {
+        console.log(e)
+      })
+      console.log(geojson)
+    }
+  }
+}
+</script>
+
+<style scoped>
+#map{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+</style>

--
Gitblit v1.8.0