El complemento Mapboxgl se usa en el proyecto, por lo que se registra el proceso de uso
Preparación
1. Vaya al sitio web oficial de mapboxgl para registrar una cuenta y crear un nuevo token
2. Use npm para presentar la biblioteca de mapbox:
npm install --save mapbox-gl
- 1
Configuración de la página
Cree un nuevo div en el medio del diseño, configure una identificación para él y corresponda a la identificación al inicializar el mapbox
<div id="map"></div>
- 1
Configure estilos y tamaños específicos para este div en CSS. (Básicamente, a todos los componentes de dibujo basados en lienzo se les debe asignar un "shell" con un tamaño específico)De lo contrario, el mapa no puede aparecer en la interfaz
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
- 1
- 2
- 3
- 4 4
- 5 5
- 6 6
Mapbox de referencia en el script:
const mapboxgl = require('mapbox-gl'); //引入组件
- 1
Defina la función de inicialización del mapa y llámelo cuando se complete el montaje:
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关闭提升性能
});
}
}
- 1
- 2
- 3
- 4 4
- 5 5
- 6 6
- 7 7
- 8
- 9 9
- 10
- 11
- 12
- 13
- 14
- 15
- dieciséis
- 17
- 18 años
Ahora que se puede mostrar el mapa, si desea realizar más operaciones en el mapa, puede usarlo para configurar la supervisión de eventos y la devolución de llamada en la inicialización del mapa
map.on('click', function(e) {
console.log('我的被点击了')
});
- 1
- 2
- 3
El ejemplo completo de visualización de un mapa 3D es el siguiente:
<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 < layers.length; i++) {
if (layers[i].type === 'symbol' && 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>
- 1
- 2
- 3
- 4 4
- 5 5
- 6 6
- 7 7
- 8
- 9 9
- 10
- 11
- 12
- 13
- 14
- 15
- dieciséis
- 17
- 18 años
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60 60
- 61
- 62
- 63
- 64
- sesenta y cinco
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
Hay más ejemplos en el sitio web oficial de mapbox, que se pueden ver en Ejemplos en el sitio web oficial ,Además, el CSS de mapbox introducido en el estilo era normal cuando no lo introduje al principio, pero se agregó en muchos ejemplos de otras operaciones. Dudo que sea necesario introducirlo en vuespa.
</div>