vue2.0中使用百度BMapGL的画面以及切换3d棱柱

本文主要是介绍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棱柱的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/663924

相关文章

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Ubuntu如何分配​​未使用的空间

《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构