vue項目中使用mapbox地圖切換底圖的詳細(xì)教程

更新時間：2023年04月27日 10:48:19 作者：哪有人敲代碼不戴頭盔的

最近開始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項目中使用mapbox地圖切換底圖的詳細(xì)教程,文中給出了詳細(xì)的實例代碼,需要的朋友可以參考下

如何在vue項目中加載并使用mapbox

mapbox用了感覺確實不錯，操作很順滑，矢量切片體驗流暢，地圖主題定制化地圖漂亮，二三維一體化，二三維切換很是簡單，一行代碼搞定。

基本使用

這是mapbox官方文檔地址：mapbox文檔

里面有很多官方例子，基本就是copy下來就能用。

開始使用

首先安裝mapbox依賴

npm install --save mapbox-gl

然后引入css文件，css引入方法很多，可以在style中import，也可以在入口文件public的index.html中引入，下面是index.html引入

<!--mapbox  -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'></script>
<link  rel='stylesheet' />

手動導(dǎo)入mapboxgl對象

import mapboxgl from 'mapbox-gl'

初始化

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  	const map = new mapboxgl.Map({
	container: 'map', // 地圖容器
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
	style: 'mapbox://styles/mapbox/streets-v12', // style URL
	center: [-74.5, 40], // starting position [lng, lat]
	zoom: 9 // starting zoom
});

一個基本maobox地圖就出來了

底圖切換

mapbox地圖默認(rèn)國外，可以使用天地圖的地圖來換底圖

另外可以實現(xiàn)地圖切換功能

實現(xiàn)思路就是把所有的圖層先加上，通過mapbox方法控制顯隱，比較方便，可以控制圖層的顯示層級

data() {
    return {
      tk: '自己的天地圖token',
      tk2: '自己的天地圖token',
      // 影像
      yxBaseUrl:
        'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=',
      yxBaseCav:
        'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=',
      // 電子
      dzBaseUrl:
        'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=',
      dzBaseCav:
        'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=',
      // 地形
      dxBaseUrl:
        'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk=',
      dxBaseCav:
        'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk=',
    }
  },

這是三種底圖。

地圖初始化加載，并把三種底圖加上

createViewer(callback) {
      var yxBaseUrl = {
        //類型為柵格瓦片
        type: 'raster',
        tiles: [this.yxBaseUrl + this.tk],
        tileSize: 256,
      }
      var yxBaseCav = {
        type: 'raster',
        tiles: [this.yxBaseCav + this.tk2],
        tileSize: 256,
      }
      // 電子底圖
      var dzBaseUrl = {
        //類型為柵格瓦片
        type: 'raster',
        tiles: [this.dzBaseUrl + this.tk],
        tileSize: 256,
      }
      var dzBaseCav = {
        type: 'raster',
        tiles: [this.dzBaseCav + this.tk2],
        tileSize: 256,
      }
      // 地形底圖
      var dxBaseUrl = {
        //類型為柵格瓦片
        type: 'raster',
        tiles: [this.dxBaseUrl + this.tk],
        tileSize: 256,
      }
      var dxBaseCav = {
        type: 'raster',
        tiles: [this.dxBaseCav + this.tk2],
        tileSize: 256,
      }
      mapboxgl.accessToken = '自己的mapboxToken'
      let viewer = new mapboxgl.Map({
        container: this.mapId, // container ID
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [108.06590205, 41.17608996], // starting position [lng, lat]
        zoom: 4, // starting zoom
        style: {
          //地圖霧效果，主要在三維展示
          fog: {
            range: [2, 20],
            color: 'hsl(0, 0%, 100%)',
            'high-color': 'hsl(210, 100%, 80%)',
            'space-color': [
              'interpolate',
              ['exponential', 1.2],
              ['zoom'],
              5,
              'hsl(210, 40%, 30%)',
              7,
              'hsl(210, 100%, 80%)',
            ],
            'horizon-blend': ['interpolate', ['exponential', 1.2], ['zoom'], 5, 0.02, 7, 0.08],
            'star-intensity': ['interpolate', ['exponential', 1.2], ['zoom'], 5, 0.1, 7, 0],
          },
          //設(shè)置版本號，一定要設(shè)置
          version: 8,
          projection: {
            name: 'globe',
          },
          //添加來源
          sources: {
            yxBaseUrl: yxBaseUrl,
            yxBaseCav: yxBaseCav,
            dzBaseUrl: dzBaseUrl,
            dzBaseCav: dzBaseCav,
            dxBaseUrl: dxBaseUrl,
            dxBaseCav: dxBaseCav,
          },
          layers: [
            {
              //圖層id，要保證唯一性
              id: 'yxBaseUrl',
              //圖層類型
              type: 'raster',
              //數(shù)據(jù)源
              source: 'yxBaseUrl',
              layout: {
                visibility: 'visible',
              },
              //圖層最小縮放級數(shù)
              minzoom: 0,
              //圖層最大縮放級數(shù)
              maxzoom: 17,
            },
            {
              id: 'yxBaseCav',
              type: 'raster',
              source: 'yxBaseCav',
              layout: {
                visibility: 'visible',
              },
              minzoom: 0,
              maxzoom: 17,
            },
            {
              //圖層id，要保證唯一性
              id: 'dzBaseUrl',
              //圖層類型
              type: 'raster',
              //數(shù)據(jù)源
              source: 'dzBaseUrl',
              layout: {
                visibility: 'none',
              },
              //圖層最小縮放級數(shù)
              minzoom: 0,
              //圖層最大縮放級數(shù)
              maxzoom: 17,
            },
            {
              id: 'dzBaseCav',
              type: 'raster',
              layout: {
                visibility: 'none',
              },
              source: 'dzBaseCav',
              minzoom: 0,
              maxzoom: 17,
            },
            {
              //圖層id，要保證唯一性
              id: 'dxBaseUrl',
              //圖層類型
              type: 'raster',
              layout: {
                visibility: 'none',
              },
              //數(shù)據(jù)源
              source: 'dxBaseUrl',
              //圖層最小縮放級數(shù)
              minzoom: 0,
              //圖層最大縮放級數(shù)
              maxzoom: 17,
            },
            {
              id: 'dxBaseCav',
              type: 'raster',
              layout: {
                visibility: 'none',
              },
              source: 'dxBaseCav',
              minzoom: 0,
              maxzoom: 17,
            },
          ],
        },
      })
      callback(viewer)
    },

這是底圖切換的方法

<template>
  <div class="toolsbar-mappic">
    <ul id="basemaps" v-for="(item, i) in baseMapList" :key="i">
      <li :class="item.visible ? 'hover' : ''" @click="changeBaseMaps(item, i)">
        <a>
          <div><img :src="item.iconUrl" /></div>
          <div>{{ item.name }}</div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
import global from '@comp/Global.vue'
export default {
  data() {
    return {
      baseMapList: [
        {
          visible: true,
          name: '影像',
          id:'yxBaseUrl',
          iconUrl: 'img/basemap/img.png',
        },
        {
          visible: false,
          name: '電子',
          id:'dzBaseUrl',
          iconUrl: 'img/basemap/elec.png',
        },
        {
          name: '地形',
          visible: false,
          id:'dxBaseUrl',
          iconUrl: 'img/basemap/ter.png',
        },
      ],
    }
  },
  mounted() {
  },
  methods: {
    changeBaseMaps(item, index) {
    //global.map3d是mapbox地圖的全局對象
      let styleJson = global.map3d.getStyle();
      styleJson.layers.forEach((item)=>{
        if(item.layout&&item.layout.visibility){
          global.map3d.setLayoutProperty(item.id, 'visibility', 'none')
        }
      })
      global.map3d.setLayoutProperty(item.id, 'visibility', 'visible')
      this.baseMapList.forEach((val, index, arr) => {
        val['visible'] = false
      })
      item['visible'] = true
    },
  },
}
</script>