【前端小技能】Vue集成百度离线地图
Vue项目集成百度离线地图
工作中遇到了一个需求,要在内网使用百度地图,那么肯定就是离线的地图了,查阅了一些博文,开发过程中也遇到了各种各样的问题,在此做下记录,希望带大家避坑,也给自己这两天的开发做一下总结。
需求:
内网中使用百度地图
仅展示郑州市地图,并将郑州市地图轮廓圈出
支持绘制点
支持绘制线
支持多点聚合
技术栈
- Vue2
- BMap
效果图
开始
1、项目搭建
vue脚手架搭建不再赘述,默认此刻你已经创建好一个vue-cli项目,此时,在public
文件夹下创建文件夹static
,将我们所需要的资源放到这个文件夹里,文件后续有给出。注意路径,一定注意路径,踩坑很久,文件中路径已经改好。
2、文件说明及避坑大法
- images:地图中图标,例如:树、建筑物等
- modules: 所需要的js模块
- bmap_offline_api_v3.0.min.js: 创建地图,包含各种地图上操作的api等
- m4.png: 聚合图标,上图中的紫色图(可根据项目风格进行替换)
- map_load.js: 初始化一些全局变量,包括文件路径,瓦片图加载路径,动态加载bmap_offline_api_v3.0.min.js文件等
- MarkerClusterer_min.js: 实现点聚合
- TextIconOverlay_min.js: 点聚合相关
修改直通车:
1、瓦片图路径处理
map_load.js
,在网上看博主写的配置有tiles_dir
,但是没有tiles_path
,就意味着只能将瓦片图放置到自己项目中,图片有很多很多,vue项目直接编译崩溃,所以为了开发方便,我们还是将瓦片图放置到服务器中,我们这边做引入即可。在tiles_path
中进行配置服务器地址。
踩坑1:注意:一定不要只对照map_laod.js
来配置自己的js,一定要看bmap_offline_api_v3.0.js
中瓦片地址的配置方法
let bmapcfg = {'imgext' : '.png', //瓦片图后缀'tiles_dir' : 'tiles', //瓦片图文件夹'tiles_path' : 'http://localhost:5000/', //如果在服务器上,需要配置服务器地址'tiles_hybrid': '','tiles_self' : ''
};
对应bmap_offline_api_v3.0.js
中模块加载代码,注意:你的可能跟我的不一样,一定要跟map_load.js
进行对应。
var tdir =bmapcfg.tiles_path ? (bmapcfg.tiles_path + bmapcfg.tiles_dir) : bmapcfg.tiles_dirreturn tdir + '/' + b + '/' + e + '/' + a + bmapcfg.imgext // 使用本地的瓦片
当然了,开发阶段我们可以先将瓦片图下载到本地,新建文件夹 dirName
,
然后在对应文件夹中使用:serve 你的文件夹名
开启本地服务,此刻,图片也可以用链接地址进行访问了
此刻配置我们的瓦片路径:
let bmapcfg = {'imgext' : '.png', //瓦片图后缀'tiles_dir' : 'tiles', //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目录'tiles_path' : 'http://localhost:5000/',...
};
2、模块加载路径配置
bmap_offline_api_v3.0.js
我们的模块地址放置在 modules
文件夹下,所以配置如下:
// 修改 加载本地模块文件,在 modules 目录下
console.log(a) //打印所需模块
if (a.length > 0) {for (i = 0; i < a.length; i++) {mf = bmapcfg.home + 'modules/' + a[i] + '.js'oa(mf)}
} else {f.kL()
}
3、地图加载不出来
注意:瓦片图路径出错会导致地图加载出错。一定要看配置路径,js加载不到也是路径问题,路径问题!!!!
3、地图搭建准备工作
1、容器
跟平时一样,准备一个地图容器,设置容器大小
<template><div class="home"><div id="container"></div></div>
</template><script>....
</script><style lang="scss">
#container {height: 100vh;width: 100vw;
}
</style>
2、初始化
data() {return {map: null,mapPoints: [],markerClusterer: [],}},
初始化地图
initMap() {let BMap = window.BMapthis.map = new BMap.Map('container')console.dir(this.map)let point = new BMap.Point(113.5001, 34.60468) // 创建点坐标this.map.centerAndZoom(point, 10) // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件this.map.setMinZoom(10)this.map.setMaxZoom(18)this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放// 添加点this.addMarker()// 添加线this.addLine()// 添加郑州市的轮廓线this.addBorderLine()
},
3、添加点、添加点聚合
addMarker() {let BMap = window.BMaplet BMapLib = window.BMapLib// 初始化要显示的点的坐标this.initPoints()let mapMarkers = []this.mapPoints.forEach((point) => {let marker = new BMap.Marker(point)mapMarkers.push(marker)this.map.addOverlay(marker)})let markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers: mapMarkers,styles: [{url: './static/m4.png',size: new BMap.Size(90, 90),},],})markerClusterer.setMinClusterSize(2)this.markerClusterer = markerClusterer},initPoints() {let BMap = window.BMapvar point = new BMap.Point(113.5001, 34.60468) // 创建点坐标var point1 = new BMap.Point(113.6001, 34.61468) // 创建点坐标var point2 = new BMap.Point(113.7001, 34.62468) // 创建点坐标var point3 = new BMap.Point(113.9001, 34.63468) // 创建点坐标this.mapPoints.push(point)this.mapPoints.push(point1)this.mapPoints.push(point2)this.mapPoints.push(point3)},
4、添加线
addLine() {let BMap = window.BMaplet point = new BMap.Point(113.5001, 34.60468) // 创建点坐标let point1 = new BMap.Point(113.7001, 34.62468) // 创建点坐标let polyline = new BMap.Polyline([point, point1], {strokeColor: 'red',strokeWeight: 1,strokeOpacity: 1,})this.map.addOverlay(polyline)},
5、绘制城市边缘
这个数据我们可以通过在线地图API进行获取,获取到以后将数据保存到文件line.js
中,将文件放置项目src/data
文件夹下,便于我们离线使用
let boundary = new BMap.Boundary()
boundary.get('郑州市', (rs) => {
// res: 郑州市边缘数据
})
添加边缘数据:
addBorderLine() {let BMap = window.BMaplet pointArr = []dataLine.forEach((pointDetail) => {var point = new BMap.Point(pointDetail.lng, pointDetail.lat) // 创建点坐标pointArr.push(point)})let polyline = new BMap.Polyline(pointArr, {strokeColor: 'red',strokeWeight: 3,strokeOpacity: 1,})this.map.addOverlay(polyline)
}
奉上项目地址:https://gitee.com/shanghaipingzi/offlinebmap
瓦片图下载
提取百度网盘中文件,然后运行exe文件,选择要下载的层级及地区即可
百度网盘链接:https://pan.baidu.com/s/16sOJ9ws7HCgNH3EMf7Ejyg?pwd=0q0e
提取码:0q0e
有问题欢迎评论区留言
文章借鉴了一个博主离线地图的开源代码,博主是在纯html中进行开发的,我这边在此基础之上集成到了vue中,并添加了我们的需求实现,查看的链接太多了,如果有幸入了博主的法眼,私聊挂链接哈!再次感谢博主!
【前端小技能】Vue集成百度离线地图相关推荐
- vue整合百度离线地图api3.0
文章目录 前言 一.场景 二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
- Vue集成Bmap离线地图-打dist包问题解决
继续我上一篇博客:https://blog.csdn.net/yc199505/article/details/88846596 在以npm run dev的形式运行时并不会有问题. 最近应客户要求, ...
- Vue集成Bmap离线地图
Vue项目的Bmap目录结构如下: 支持Vue该目录的Bmap的api,我取名为bmap.js如下位置下载: 从此处下载 main.js中引入api.js: import "../stati ...
- vue百度离线地图v3.0---初始化地图
1. 百度离线文件 百度网盘下载:https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码:rnij 2. 百度离线地图瓦片下载器 百度网盘下载:http ...
- 百度离线地图示例之三:矢量图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
- vue2+百度离线地图实现多车辆行驶动态轨迹
vue2+百度离线地图实现行驶多车辆动态轨迹 实现多多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加.(前端实现,如果数量庞大的车辆移动,很消耗性能) 百度离线地图引入方法查看: vue项目实 ...
- 【web百度离线地图开发】原生实现百度地图离线版速览
需求如下,在基于在线地图的基础上展现离线地图 //在线用以下插件展示"vue-baidu-map": "^0.21.22", vue中展示离线地图 第一步:把配 ...
- 百度离线地图示例之四:热力图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
- 百度离线地图示例之二:测距
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
- 百度离线地图示例之十三:动态运行轨迹实现(附源码)
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
最新文章
- ReentrantLock可以是公平锁,sync只能是非公平锁。
- iptables的nat表中 -j redirect 与-dnat --to-destnation的区别
- 【Java】探究自增运算符++的原理
- matlab从哪里学,从零开始学MATLAB(附光盘)/从零开始学系列
- 在Ubuntu和CentOS上搭建NodeJs的执行环境步骤
- 寒冬之下,被cai的那些人到底去哪了?
- ai怎么调界面大小_ai软件界面字体特别小 ai菜单栏字体大小怎么改
- 百度网站收录批量查询 介绍百度网站收录批量查询3种方式
- 欢迎西南大学人工智能学院加入RICAI !!
- oracle 判断条件不在某一时间范围内(not between)
- 关于我为什么跨考计算机研究生以及对未来的思考
- P5167 xtq的神笔
- 尤大都推荐的组件库是如何开发出来的?
- 出书最多--map值排序
- 上拉、下拉电阻的原理和作用
- 32位、64位操作系统系统差异对比
- 重贴:MFC类中获得其它类指针 (转)
- Linux查看系统温度
- 组件化开发——支付中心
- java发展前景选兄弟连_兄弟连:Java程序员未来应该如何发展