vue中使用mapboxgl 加载天地图初始化并打点marker以及逆地理编码

Posted 2021-12-09 苦涩！

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',//容器id 
             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);
        }
      })
    },
}

代码中都有相对应的注释，本篇文字也是帮助新手快速简单的使用地图，如有其它问题请联系我