地图（二）03"/>
vue中，应用mapbox地图（二）03
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': '.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版——/
<!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=".7.0/mapbox-gl.css" rel="stylesheet"><script src=".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// // 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': '.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>
效果同上
更多推荐
vue中,应用mapbox地图（二）03
发布评论