本文主要是介绍vue2.0中使用百度BMapGL的画面以及切换3d棱柱，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.使用百度地图首先得申请他的ak去 地址：登录百度帐号 记得选择浏览器端
2.下面咱们开始代码方面，首先在index.html中引入百度api
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>baidu-map</title><script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script><!-- 去掉百度地图logo --><style type="text/css">.BMap_cpyCtrl {display: none;}</style><style type="text/css">.anchorBL{display:none;}</style></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>
3.然后开始在页面中实例地图 具体代码中注释很详细 有问题评论区提问哈
<template><div class="bai-du-map"><div id="map" /><div class="item-city"><el-select v-model="value" filterable placeholder="请选择城市" @change="cityChange"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></div><div class="on-off"><el-switchv-model="switchVal"style="color:#fff;"inactive-text="开启3d画面"active-color="#13ce66"inactive-color="#CDCFD0"@change="switchChange"/><el-button type="danger" round size="mini" @click="removeDrawing">清空图层</el-button></div></div>
</template>
<script>
export default {name: 'Baidumap',data() {return {map: null, // 实例地图polygon: null, // 实例画面mapStyle: [], // 地图样式 这里的样式让我删了太长了 自行下载去吧https://lbsyun.baidu.com/customv2/help.htmloptions: [], // 城市列表value: '', // 选中的城市idswitchVal: false, // 是否开启3d画面cityName: '', // 选中城市名称marker: null// 打点实例}},mounted() {this.mapBox()this.cityList()},methods: {/*** @description:初始化百度地图* @param {*}* @return {*}*/mapBox() {// eslint-disable-next-line no-undefthis.map = new BMapGL.Map('map') // 创建Map实例// eslint-disable-next-line no-undefthis.map.centerAndZoom(new BMapGL.Point(116.28019, 40.049191), 8) // 初始化地图,设置中心点坐标和地图级别this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放this.map.setHeading(0) // 视觉方向this.map.setTilt(55) // 视觉角度this.map.setMapStyleV2({ styleJson: this.mapStyle }) // 地图样式},/*** @description: 清除图层按钮* @param {*}* @return {*}*/removeDrawing() {this.value = ''this.map.clearOverlays()// 清除图层},/*** @description:开关的回调函数 开关选择监听判断2d和3d* @param {*} d 布尔值* @return {*}*/switchChange(d) {if (d) {this.drawSurface3D(this.cityName)} else {this.drawSurface2D(this.cityName)}},/*** @description:选框选择城市地图变化* @param {*}* @return {*}*/cityChange(val) {if (val) {let obj = {}obj = this.options.find(item => {return item.value === val // 筛选出匹配数据})this.cityName = obj.labelif (this.switchVal) {this.drawSurface3D(obj.label)} else {this.drawSurface2D(obj.label)}} else {this.drawSurface2D('中国')}},/*** @description: 城市列表请求* @param {*}* @return {*}*/cityList() {this.$http.getFun('../../../static/config/json/cityname.json').then((res) => {if (res.status === 200) {this.options = res.data} else {this.$message({showClose: true,message: res.statusText,type: 'error'})}})},/*** @description: 2d画区图* @param {*} val 传入城市的名称 也可以是具体某个区* @return {*}*/drawSurface2D(val) {// 判断val是否有值 空不执行方法if (val === '') {return} else {this.map.clearOverlays()// 清除图层不然图层会叠加// eslint-disable-next-line no-undefvar bd = new BMapGL.Boundary()bd.get(val, (res) => {// eslint-disable-next-line no-undefvar hole = new BMapGL.Polygon(res.boundaries, {strokeColor: '#02b5ec',strokeWeight: 2,strokeOpacity: 0.5,fillColor: '#0058c6',fillOpacity: 0.7})this.map.addOverlay(hole)})// 下面是加载自己画的json// this.map.clearOverlays()// 清楚图层不然图层会叠加// // eslint-disable-next-line no-undef// this.$http.getFun(`../../../static/config/json/${val}.json`).then((res) => {// const features = res.features// features.forEach((feature) => {// var coords = feature.geometry.coordinates// for (let i = 0; i < coords.length; i++) {// for (let j = 0; j < coords[i].length; j++) {// var pointArr = []// for (let k = 0; k < coords[i][j].length; k++) {// var xy = coords[i][j][k]// // eslint-disable-next-line no-undef// pointArr.push(new BMapGL.Point(xy[0], xy[1]))// }// // eslint-disable-next-line no-undef// this.polygon = new BMapGL.Polygon(pointArr, {// strokeColor: '#02b5ec',// strokeWeight: 2,// strokeOpacity: 0.5,// fillColor: '#0058c6',// fillOpacity: 0.7// })// this.map.addOverlay(this.polygon)// }// }// })// })}},/*** @description: 3d画区图* @param {*} val 传入城市的名称* @return {*}*/drawSurface3D(val) {if (val === '') {return} else {this.map.clearOverlays()// 清除图层不然图层会叠加// eslint-disable-next-line no-undefvar dq = new BMapGL.Boundary()dq.get(val, (rs) => {var count = rs.boundaries.length // 行政区域的点有多少个for (var i = 0; i < count; i++) {var path = []const str = rs.boundaries[i].replace(' ', '')const points = str.split(';')for (var j = 0; j < points.length; j++) {var lng = points[j].split(',')[0]var lat = points[j].split(',')[1]// eslint-disable-next-line no-undefpath.push(new BMapGL.Point(lng, lat))}// eslint-disable-next-line no-undefvar prism = new BMapGL.Prism(path, 6000, {topFillColor: '#02b5ec',topFillOpacity: 0.5,sideFillColor: '#0058c6',sideFillOpacity: 0.9})this.map.addOverlay(prism)}})}}}
}
</script>
<style lang="scss" scoped>
.bai-du-map {position:relative;overflow: hidden;#map {@include computed_W(1920);@include computed_H(1080);}.item-city {z-index: 999;position:absolute;top:50px;left: 50px;}.on-off {z-index: 999;position:absolute;top:20px;left: 50px;/deep/ .el-switch__label--left{color: #fff;}}
}
</style>
具体也也可以自行去看百度的api文档也比较具体 jspopularGL | 百度地图API SDK，
这篇关于vue2.0中使用百度BMapGL的画面以及切换3d棱柱的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
