增加mapbox插接件和功能

YANGDL

2021-01-15 48d575a147ecf5b5ea042dc38d99ed58df68ddfd

增加mapbox插接件和功能

 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",

 src/api/mapApi.js

@@ -2,13 +2,14 @@
// import * as Service from './services'
// const $HOST = 'http://10.238.221.113'
// 测试环境IP：http://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()

 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('该TILE方法未实现！')
    },
    swWmtsLayer() {
    swWmtsLayer () {
      console.log('该WMTS方法未实现！')
    },
    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">

 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">

 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;

 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]
        }
      }

 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,

 src/conf/mapbox/MCBaseMap.js

New file
@@ -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
        }
      }
    ]
  }

}

 src/conf/mapbox/MCVectorTile.js

New file
@@ -0,0 +1,89 @@
/** mapbox 地图配置文件 */
export default [
  {
    name: '南京石化管网',
    visibility: 'visible', // 图层显示隐藏 2 种状态 visible none
    isAddToMap: true,
    source: {
      type: 'vector', // 矢量类型
      scheme: 'tms',
      zoomOffset: -1, // 经纬度天地图 需要zoomOffset -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', // 查看 数据源的类型 参考mapbox 矢量数据可提供的参数类型
      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, // 必须要 经纬度天地图 其他图层需要zoomOffset -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
      }
    }
  }
]

 src/conf/mapbox/MCWMS.js

New file
@@ -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
    }
  }
]

 src/conf/mapbox/MCWMTS.js

New file
@@ -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
    }
  }
]

 src/conf/mapbox/MConfig.js

New file
@@ -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
  }
}

 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 }
]

// 所有上面定义的路由都要写在下面的routes里

 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">

 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">

 src/views/mapbox/MapBoxHome.vue

New file
@@ -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, // 必须要 经纬度天地图 其他图层需要zoomOffset -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服务请换成wmts
        scheme: 'tms',
        zoomOffset: -1, // 必须要 经纬度天地图 其他图层需要zoomOffset -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';
      // 实例化Map地图对象
      var map = new mapboxgl.Map({
        // 地图容器div的id
        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(
        {
          // 是否显示指南针，默认为true
          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>