如題圖，mapbox是一個(gè)支持真3D地形展示的webGIS框架，與常用的Leaflet、Cesium和Openlayers并稱四大框架，本文將介紹mapbox-gl js 在 vue 中的用法。

為什么要用 mapbox ?

各位可以自行搜索上面提到的或者其他的webGIS框架或者集成服務(wù)商，可以很輕松的比較出mapbox的優(yōu)勢(shì)：

• 支持3D地形、3D模型
• 支持多種坐標(biāo)系投影
• mapbox studio 在線編輯地圖樣式，使用時(shí)只需一個(gè)鏈接，更新時(shí)鏈接也無需修改（無可替代）
• 漂亮（誰能反駁？）
• 簡(jiǎn)單易上手（對(duì)比Cesium、Openlayers）
• 地理數(shù)據(jù)全格式支持（Image、KML、WMS、 WMTS、 GeoJson）
• 功能齊全，mapbox再也不是那個(gè)花瓶了，它現(xiàn)在是一個(gè)強(qiáng)大的、完整的大型框架

注冊(cè)mapbox賬號(hào)

mapbox禁止中國(guó)地區(qū)的新用戶注冊(cè)，需要開啟全局的魔法，進(jìn)入 mapbox官網(wǎng)注冊(cè)

如果要求輸入 海外銀行卡號(hào)，參閱：知乎：mapbox的注冊(cè)怎么需要填卡號(hào)，有銀行要求嗎，之前看網(wǎng)上說不需要填，具體要怎么操作，求大神指點(diǎn)。？

完成注冊(cè)后會(huì)看到如下畫面

左上紅框可以在線創(chuàng)建、編輯地圖樣式。下方紅框是公鑰，可以用來訪問你創(chuàng)建的公開地圖。

創(chuàng)建你的個(gè)性化地圖

你可以自行探索各個(gè)圖層分別是什么，我這里只新增了一個(gè)衛(wèi)星圖，圖層越多，加載的時(shí)候就越慢，用起來就越卡。

點(diǎn)擊左上角3D按鈕，即可開啟3D視圖，mapbox會(huì)根據(jù)全球等高線信息模擬出地形

上圖為山東省泰安市。此外還支持：

• 自定義光源
• 自定義坐標(biāo)系
• 自定義地形夸張
• 霧氣（視野可見范圍，適當(dāng)設(shè)置有助于性能優(yōu)化）

在VUE項(xiàng)目中使用mapBox

本文使用vue3，選配如下：

• router
• vuex
• less

1. 安裝，通過NPM安裝

   1. npm i mapbox-gl
      

2. 引入

   1. import mapboxgl from 'mapbox-gl';
      import 'mapbox-gl/dist/mapbox-gl.css';
      import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以將標(biāo)簽改為中文
      

3. 初始化

   1. mapboxgl.accessToken='pk.eyJ1IjoiemJiZW4iLCJhIjoiACtpemtnOXRoMDRhcDMwbG43aGYxbXhqYyJ9.YOJzSXzubABBJeK7SXg60w'; //這是一個(gè)無效的公鑰，上面提到了公鑰在哪里可以獲取到
      this.map = new mapboxgl.Map({
              container: "basicMapbox",
              style: 'mapbox://styles/xxx/ckus1uok22m4117aif4pg9qa6', //這是個(gè)假鏈接，在上面有提到分享按鈕，那里有你自己的鏈接
              center: [118, 28],
              zoom: 3, //zoom你都不懂就別看了
              pitch: 0, // 相對(duì)于地面3D視角的角度
              bearing: 0, // 東西南北 方向，正北方為 0
              projection: 'globe', // 為 3D 地球
              antialias: false, //抗鋸齒，通過false關(guān)閉提升性能
              essential: true, //不知道什么意思，我看人家寫我就寫了
              renderWorldCopies: false, //可理解為loop，在projection: 'globe'時(shí)無效
              skipOnboarding: true,//可選擇不等待瓦片加載
            });
      // ### 標(biāo)簽漢化
      // this.map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
      // ### 添加導(dǎo)航控制條
      // this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
      

4. 監(jiān)聽事件

   1. this.map.on("eventName",()=>{})
      // 常用事件有：load、moveend、render等，自行探索
      

5. 常用方法

   1. this.map.setFog({}); //開啟宇宙、星空
      this.map.flyTo({
           center: [109.926476, 19.088415], //目標(biāo)中心點(diǎn) 海南省瓊中縣灣嶺鎮(zhèn)
           zoom: 11, //目標(biāo)縮放級(jí)別
           bearing: 56.50, //目標(biāo)方位角
           pitch: 47.50, //目標(biāo)傾斜角
      },duration: 7000,) //飛行
      let shape = await request.get("some_geoJosn")
      this.map.addSource('customSourceName'{
          type:"geojson" //可選： raster || image || 等
          // 每個(gè)類型所需的參數(shù)不一樣，自行探索，這里用geojson舉例。
          "data": shape
      }) //添加資源
      this.map.getSource('customSourceName') && this.map.removeSource('customSourceName') //獲取資源、刪除資源
      this.map.addLayer({
              id: 'measure-lines',
              type: 'line',
              source: 'customSourceName', //使用剛剛添加的資源
              layout: {
                'line-cap': 'round',
                'line-join': 'round'
              },
              paint: {
                'line-color': '#00FFF4',
                'line-width': 2.5,
                'line-opacity': 1,
                'line-gap-width': 0,
              },
      }); // 添加圖層，如上使用 名為 customSourceName 的資源 添加了一個(gè)用線勾勒輪廓的圖層。
      this.map.getLayer('measure-lines') && this.map.removeLayer('measure-lines') // 獲取圖層、刪除圖層
      

   2. 插點(diǎn)，以下是一個(gè)插點(diǎn)的簡(jiǎn)單示例，可以用vue組件渲染插點(diǎn)的響應(yīng)彈窗：

      import mapboxPopView from '../mapboxPopView/mapboxPopView.vue'; //彈窗組件需提前引入
        
      async setMaker(makerList) {
            if (!makerList) {
              return
            }
            // console.log('makerList::: ', makerList);
            for (let item of makerList) {
              let dom = document.createElement('img')
              dom.src = require(`../../../public/static/img/${item.deviceType}.png`) //這里使用了自定義圖片來替換默認(rèn)插點(diǎn)圖標(biāo)
              dom.style.width = '52.4px'
              dom.style.height = 'auto' //可以保持比例
              dom.id = `marker-${item.deviceId}`
              dom.classList.add("markerCustom")
              dom.addEventListener("click", () => {
                this.setPopContent(item)
              })
              let marker = new mapboxgl.Marker({
                element: dom,
                offset: [0, -50], //圖標(biāo)偏移量
              }).setLngLat([item.lon, item.lat]).addTo(this.map);
              // 添加標(biāo)記的彈窗事件
              var popup = new mapboxgl.Popup({
                offset: [0, -100], //彈窗偏移量
              }).setHTML(`<div id="popup-content-${item.deviceId}"></div>`)
              // this.setPopContent(item)
              marker.setPopup(popup);
              this.markerList.push(marker)
              // 點(diǎn)擊標(biāo)記時(shí)顯示彈窗
            }
            this.$store.dispatch('addLayer')
          },
         setPopContent(item) {
            const MyNewPopup = defineComponent({
              extends: mapboxPopView,
              setup() {
                const deviceItem = item
                return { deviceItem } //這里的常量可以直接在組件的this對(duì)象中獲取
              },
            })
            setTimeout(() => {
              createApp(MyNewPopup).mount(`#popup-content-${item.deviceId}`) //掛載到剛剛定義的擁有唯一ID的DOM節(jié)點(diǎn)上
            }, 10);
          },
      

      插點(diǎn)效果如圖：

至此，mapbox的基本功能介紹完畢，另外，mapbox支持自定義圖源，下面是一個(gè)使用天地圖瓦片的例子：

setTiandituLaryer() {
      this.map.addSource('tianditu', {
        type: 'raster',
        tiles: [
          '你的天地圖鏈接',
        ],
        tileSize: 256,
      });
      this.map.addLayer({
        id: 'tianditu',
        type: 'raster',
        source: 'tianditu',
      });
},

如果使用其他的圖源，記得在mapbox studio里關(guān)閉或刪除無用的圖層。

碼云：mapbox_demo

旗鼓相當(dāng)?shù)膶?duì)手，就是我們磨礪爪子的堅(jiān)石。文章來源地址http://www.zghlxwxcb.cn/news/detail-423794.html

到了這里，關(guān)于可視化大屏：mapbox+vue全攻略的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！