vue中使用mapboxgl 加載天地圖初始化并打點marker以及逆地理編碼

1.首先這個是中文檔案地址開發檔案 | Mapbox

2.先注冊一個token 具體檔案流程，這邊不過多介紹

3.下載npm install mapbox-gl --save

4.不多說 直接上代碼

//HTML中先創建一個盒子有寬高 id 還有記得引入下載的mapboxgl
data(){
   return {
    map:null, //實體地圖
    marker:null, //實體打點
    point:[0,0], //打點經緯度坐標
    address:'' //點擊后獲取的名稱
   }
},
mounted () {
   this.map_box()
},
methods：{
//實體地圖方法
  map_box () {
    mapboxgl.accessToken = '';//你申請的token
      //天地圖（各個區域的token可以在網上查到）
     var vecUrl = "http://t0.tianditu.com/vec_w/wmts?tk=43c28dc109e34f25445bfe9fef5124dc";
      var cvaUrl = "http://t0.tianditu.com/cva_w/wmts?tk=43c28dc109e34f25445bfe9fef5124dc";
      var tdtCva = {
        //型別為柵格瓦片
        "type": "raster",
         //請求瓦片地址
        'tiles': [
          cvaUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
        ],
        //解析度
        'tileSize': 256
      };
    this.map = new mapboxgl.Map({
        container: 'map', // container id
        style: {//地圖容器div的id
             container: 'map', 
             style: {
               //設定版本號，一定要設定
                "version": 8,
                 //添加來源
                 "sources": {
                  "raster-tiles": {
                     "type": "raster",
                     "tiles": [vecUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"],
                     "tileSize": 256
                    },
                    "tdtCva": tdtCva
                  },
                 "layers": [
                      {
                          //圖層id，要保證唯一性
                          "id": "tdtVec",
                          //圖層型別
                          "type": "raster",
                          //資料源
                          "source": "tdtVec",
                          //圖層最小縮放級數
                          "minzoom": 0,
                          //圖層最大縮放級數
                          "maxzoom": 17
                      },
                      {
                          "id": "tdtCva",
                          "type": "raster",
                          "source": "tdtCva",
                          "minzoom": 0,
                          "maxzoom": 17
                      }
                 ]},//相關樣式配置查看檔案
        crs: 'EPSG:4326',
        center: [116.3621, 39.9066], // starting position
        zoom: 12,//地圖等級
        maxZoom: 17,//最大等級
        attributionControl: false,
      });
        //添加導航控制元件，控制元件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四種，默認為'top-right'
      this.map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');

       //在所有必要資料源下載完畢、且首個可見的地圖渲染完畢后立即觸發，
     this.map.on('load',()=>{
        //這里注意this指向問題如果不使用箭頭函式 外邊申明this
         this.addPoint()
     })，
       //地圖點擊事件
      this.map.on('click',(e)=>{
         // 這樣點擊地圖也可以打點了 
         this.marker.remove()//清除上一次打點實體
         this.point[0] = e.lngLat.lng
         this.point[1] = e.lngLat.lat 
         this.addPoint()  
     })
  },
// 打點方法實體marker
  addPoint() {
    //想改變打點樣式 請參考http://www.mapbox.cn/mapbox-gl-js/api/#marker
   this.marker = new mapboxgl.Marker()
       .setLngLat(this.point)
       .addTo(this.map)
  },

 // 逆地理坐標查詢
   reverseGeocodFun () {
   // 點擊地圖拿到經緯度通過逆地理坐標介面查詢到點擊地點的名稱
   // lon	  坐標的x值	    string	是	
   // lat	  坐標的y值	    string	是	
   // appkey  網站的唯一編碼	string	是	
   // ver	  介面版本	    string	是
     this.$axios({
       method: 'get',
       url: `http://api.tianditu.gov.cn/geocoder?postStr={'lon':${this.point[0]},'lat':${this.point[1]},'ver':1}&type=geocode&tk=你的密鑰`,
      }).then((res) => {
        if (res.status === 200) {
          conselo.log(res.data)
           this.address= res.data.result.formatted_address
           //{列印結構
           //    "result": {
           //       "formatted_address": "北京市西城區西什庫大街31號院23東方開元資訊科技司",
           //        "location": {
           //            "lon": 116.37304,
           //             "lat": 39.92594
           //         },
           //      "addressComponent": {
           //         "address": "西什庫大街31號院23",
           //          "city": "北京市西城區",
           //          "road": "大紅羅廠街",
           //          "poi_position": "東北",
           //          "address_position": "東北",
           //          "road_distance": 49,
           //          "poi": "東方開元資訊科技公司",
           //          "poi_distance": "38",
           //          "address_distance": 38
           //       }
           //   },
           //   "msg": "ok",
           //   "status": "0"
           //}
        } else {
          console.log(res.statusText);
        }
      })
    },
}

代碼中都有相對應的注釋，本篇文字也是幫助新手快速簡單的使用地圖，如有其它問題請聯系我