元のリンク: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公式Webサイトにアクセスして、アカウントを登録し、新しいトークンを作成します
。2. npmを使用して、mapboxライブラリを紹介します。
npm install --save mapbox-gl
- 1
ページ構成
レイアウトの中央に新しいdivを作成し、IDを構成して、マップボックスを初期化するときにIDに対応させます
<div id="map"></div>
- 1
CSSでこのdivのスタイルと特定のサイズを構成します(基本的に、すべてのキャンバスベースの描画コンポーネントには、特定のサイズの「シェル」を割り当てる必要があります)それ以外の場合、マップはインターフェイスに表示できません
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
- 1
- 2
- 3
- 4
- 5
- 6
スクリプトのリファレンスマップボックス:
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关闭提升性能
});
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
これでマップを表示できるようになりました。マップでさらに操作を実行したい場合は、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 < 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
- 10
- 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
mapboxの公式ウェブサイトには他にも例があり、公式ウェブサイトの例で見ることができます。また、冒頭で紹介しなかったスタイルで導入されたmapboxのcssは正常でしたが、他の操作の多くの例で追加されました。
</div>