Vue中使用地图平台MapboxGL【转载】

原文链接：https://blog.csdn.net/Isaac_Play/article/details/103890231?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

在项目里要用到mapboxgl这个插件，所以就记录了一下使用的过程

准备工作

1.去mapboxgl官网中注册账号，并新建一个token
新建一个token是使用mapboxgl的条件
2.使用npm引入mapbox的库：

npm install --save mapbox-gl
1

页面中配置

在布局中空新建一个div，为其配置一个id，在初始化mapbox的时候将id对应即可

<div id="map"></div>                         
1

在css中给这个div配置样式，配置具体大小，（基本所有基于canvas的绘图组件都需要分配一个有具体大小的“壳”）否则无法在界面上出现地图

#map{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
}
1
2
3
4
5
6

在script中引用mapbox：

const mapboxgl = require('mapbox-gl');  //引入组件
1

定义地图的初始化函数，在挂载完成时调用：

mounted () {
        this.initmap();  
    },

methods: {
  initmap(){
    mapboxgl.accessToken = 'pk.******************************************************'; //这里请换成自己的token
    var map = new mapboxgl.Map({
    container: 'map', // container id 绑定的组件的id
    style: 'mapbox://styles/mapbox/streets-v11', //地图样式，可以使用官网预定义的样式,也可以自定义
    center: [118.726533,32.012005], // 初始坐标系，这个是南京建邺附近
    zoom: 15,     // starting zoom 地图初始的拉伸比例
    pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
    bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
    antialias: true, //抗锯齿，通过false关闭提升性能
    });  
   }
 }


methods: {
  initmap(){
    mapboxgl.accessToken = 'pk.******************************************************'; //这里请换成自己的token
    var map = new mapboxgl.Map({
    container: 'map', // container id 绑定的组件的id
    style: 'mapbox://styles/mapbox/streets-v11', //地图样式，可以使用官网预定义的样式,也可以自定义
    center: [118.726533,32.012005], // 初始坐标系，这个是南京建邺附近
    zoom: 15,     // starting zoom 地图初始的拉伸比例
    pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
    bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
    antialias: true, //抗锯齿，通过false关闭提升性能
    });  
   }
 }

现在地图已经可以显示出来了，如果要对地图进行更多的操作，在map的初始化中可以用on设置事件的监听与回调

 map.on('click', function(e) {   
            console.log('我的被点击了')           
        });
1
2
3

显示一个3D地图的完整例子如下：

<template>


<div id="map"></div>




</template>




<script type="text/ecmascript-6">

const mapboxgl = require('mapbox-gl');




export default {

name: 'mapboxgl',

mounted () {

this.initmap();

},



methods: {
  initmap(){
    mapboxgl.accessToken = 'pk.eyJ1IjoicGxheS1pc2FhYyIsImEiOiJjazU0cDkzbWowamd2M2dtemd4bW9mbzRhIn0.cxD4Fw3ZPB_taMkyUSFENA';
    var map = new mapboxgl.Map({
    container: 'map', // container id 绑定的组件的id
    style: 'mapbox://styles/mapbox/streets-v11', //地图样式，可以使用官网预定义的样式,也可以自定义
    center: [118.726533,32.012005], // 初始坐标系
    zoom: 15,     // starting zoom 地图初始的拉伸比例
    pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
    bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
    antialias: true, //抗锯齿，通过false关闭提升性能

    });

    // The 'building' layer in the mapbox-streets vector source contains building-height
    // data from OpenStreetMap.
    map.on('load', function() {  //on设置监听，以及触发时的回调，这是加载时的触发的生成3d地图的例子
        // Insert the layer beneath any symbol layer.
        var layers = map.getStyle().layers;
        
        var labelLayerId;
        for (var i = 0; i &lt; layers.length; i++) {
        if (layers[i].type === 'symbol' &amp;&amp; layers[i].layout['text-field']) {
        labelLayerId = layers[i].id;
        break;
        }
        }
        
    
        map.addLayer(         //在地图样式中添加一个Mapbox样式图层。(图层，layerid)
        {
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
        'fill-extrusion-color': '#aaa',
        
        // use an 'interpolate' expression to add a smooth transition effect to the
        // buildings as the user zooms in
        'fill-extrusion-height': [
        'interpolate',
        ['linear'],
        ['zoom'],
        15,
        0,
        15.05,
        ['get', 'height']
        ],
        'fill-extrusion-base': [
        'interpolate',
        ['linear'],
        ['zoom'],
        15,
        0,
        15.05,
        ['get', 'min_height']
        ],
        'fill-extrusion-opacity': 0.6
        }
        },
        labelLayerId
        );
    });
    //地图监听点击，触发回调
    map.on('click', function(e) {   
        console.log('123')
        
    });
                
  }
}




}

</script>




<style  scoped>

@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');



map{


position: absolute; 
top: 0; 
bottom: 0; 
width: 100%; 




}

</style>


methods: {
  initmap(){
    mapboxgl.accessToken = 'pk.eyJ1IjoicGxheS1pc2FhYyIsImEiOiJjazU0cDkzbWowamd2M2dtemd4bW9mbzRhIn0.cxD4Fw3ZPB_taMkyUSFENA';
    var map = new mapboxgl.Map({
    container: 'map', // container id 绑定的组件的id
    style: 'mapbox://styles/mapbox/streets-v11', //地图样式，可以使用官网预定义的样式,也可以自定义
    center: [118.726533,32.012005], // 初始坐标系
    zoom: 15,     // starting zoom 地图初始的拉伸比例
    pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
    bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
    antialias: true, //抗锯齿，通过false关闭提升性能

    });

    // The 'building' layer in the mapbox-streets vector source contains building-height
    // data from OpenStreetMap.
    map.on('load', function() {  //on设置监听，以及触发时的回调，这是加载时的触发的生成3d地图的例子
        // Insert the layer beneath any symbol layer.
        var layers = map.getStyle().layers;
        
        var labelLayerId;
        for (var i = 0; i &lt; layers.length; i++) {
        if (layers[i].type === 'symbol' &amp;&amp; layers[i].layout['text-field']) {
        labelLayerId = layers[i].id;
        break;
        }
        }
        
    
        map.addLayer(         //在地图样式中添加一个Mapbox样式图层。(图层，layerid)
        {
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
        'fill-extrusion-color': '#aaa',
        
        // use an 'interpolate' expression to add a smooth transition effect to the
        // buildings as the user zooms in
        'fill-extrusion-height': [
        'interpolate',
        ['linear'],
        ['zoom'],
        15,
        0,
        15.05,
        ['get', 'height']
        ],
        'fill-extrusion-base': [
        'interpolate',
        ['linear'],
        ['zoom'],
        15,
        0,
        15.05,
        ['get', 'min_height']
        ],
        'fill-extrusion-opacity': 0.6
        }
        },
        labelLayerId
        );
    });
    //地图监听点击，触发回调
    map.on('click', function(e) {   
        console.log('123')
        
    });
                
  }
}
position: absolute; 
top: 0; 
bottom: 0; 
width: 100%;