vue中,应用mapbox地图(二)03-mapbox-gl 地图实例——标准步骤之3D立体效果-init方法
一、获取token
mapbox官网注册账号
个人中心account
页面,获取accessToken
二、安装并引入使用
npm install --save mapbox-gl
main.js
页面 引入mapboxgl
import mapBoxGl from 'mapbox-gl'
Vue.prototype.mbgl = mapBoxGl
页面
<!-- 组件页面 -->
<template>
<div id="map"></div>
</template>
//组件页面
<script>
export default {
name: "mapbox_test",
mounted(){
this.init()
},
methods: {
init(){
// this.mbgl.accessToken = 'your token';
this.mbgl.accessToken = 'pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg';
let map = new this.mbgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-87.61694, 41.86625],
zoom: 15.99,
pitch: 40,
bearing: 1
})
map.on('load', function() {
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
},
'paint': {
'fill-extrusion-color': ['get', 'color'],
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'base_height'],
'fill-extrusion-opacity': 0.6
}
})
})
}
}
}
</script>
/*样式*/
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#map {
position: absolute;
left: 0;
top: 0;
text-align: left;
width: 100%;
height: 100%;
}
注释:
init方法中的map案例相关数据信息来自官网example
效果-3D立体
官网html版——https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Extrude polygons for 3D indoor mapping</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
// mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-87.61694, 41.86625],
zoom: 15.99,
pitch: 40,
bearing: 20,
antialias: true
});
map.on('load', () => {
map.addSource('floorplan', {
'type': 'geojson',
/*
* Each feature in this GeoJSON file contains values for
* `properties.height`, `properties.base_height`,
* and `properties.color`.
* In `addLayer` you will use expressions to set the new
* layer's paint properties based on these values.
*/
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
});
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 'floorplan',
'paint': {
// Get the `fill-extrusion-color` from the source `color` property.
'fill-extrusion-color': ['get', 'color'],
// Get `fill-extrusion-height` from the source `height` property.
'fill-extrusion-height': ['get', 'height'],
// Get `fill-extrusion-base` from the source `base_height` property.
'fill-extrusion-base': ['get', 'base_height'],
// Make extrusions slightly opaque to see through indoor walls.
'fill-extrusion-opacity': 0.5
}
});
});
</script>
</body>
</html>
效果同上