Le plug-in Mapboxgl est utilisé dans le projet, donc le processus d'utilisation est enregistré
La préparation
1. Allez sur le site officiel de mapboxgl pour enregistrer un compte et créer un nouveau token
2. Utilisez npm pour introduire la bibliothèque de mapbox:
npm install --save mapbox-gl
- 1
Configuration de la page
Créez un nouveau div au milieu de la mise en page, configurez un identifiant pour celui-ci et correspondez à l'identifiant lors de l'initialisation de la mapbox
<div id="map"></div>
- 1
Configurez les styles et les tailles spécifiques pour ce div en CSS (en gros, tous les composants de dessin basés sur le canevas doivent se voir attribuer un "shell" avec une taille spécifique)Sinon, la carte ne peut pas apparaître sur l'interface
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
- 1
- 2
- 3
- 4
- 5
- 6
Mapbox de référence dans le script:
const mapboxgl = require('mapbox-gl'); //引入组件
- 1
Définissez la fonction d'initialisation de la carte et appelez-la lorsque le montage est terminé:
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
- 5
- 6
- 7
- 8
- 9
- dix
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
Maintenant que la carte peut être affichée, si vous souhaitez effectuer plus d'opérations sur la carte, vous pouvez utiliser on pour définir la surveillance des événements et le rappel lors de l'initialisation de la carte
map.on('click', function(e) {
console.log('我的被点击了')
});
- 1
- 2
- 3
L'exemple complet d'affichage d'une carte 3D est le suivant:
<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
- 5
- 6
- 7
- 8
- 9
- dix
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 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
- 61
- 62
- 63
- 64
- 65
- 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
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
Il y a plus d'exemples sur le site officiel de mapbox, qui peuvent être consultés dans Exemples sur le site officiel ,De plus, le CSS de mapbox introduit avec style était normal lorsque je ne l'ai pas présenté au début, mais il a été ajouté dans de nombreux exemples d'autres opérations.
</div>