WEB实现百度离线地图展示

相关资源百度云连接
太乐地图下载器链接:https://pan.baidu.com/s/1SyUM3YU6Ey5OZvZxCHMfsg
提取码:1yjf

全能电子地图下载器链接:https://pan.baidu.com/s/1g9G2zLTVNP4-PedsqOrWkw
提取码:noqy

百度离线地图实现源码链接:https://pan.baidu.com/s/1Xjvbq9ZCatzG9j7tsxfEjQ
提取码:f9zq

1.加载本地资源(该部分已封装完成)
1.1.资源文件说明

在这里插入图片描述

1.1.1.Images
“Images”文件夹中存放离线资源,如地图覆盖物标注等图片
1.1.2.modules
“modules”文件夹中存放通过百度地图api获取的各功能模块离线js资源
1.1.3.tiles
“tiles”文件夹中存放通过瓦片下载器获取的百度地图的离线瓦片资源(.png图片)
在这里插入图片描述

瓦片文件说明:瓦片分为1-19级别,19级为最大放大等级,需要下载的瓦片资源也最多。该文件夹图片较多,仅广西省地图等级为19的瓦片资源就达到1T。瓦片资源为一个个单独的png或jpg文件,将瓦片通过百度的算法拼接后便为一个完整的可视化地图资源。且各个瓦片地图的文件名、存放路径固定,因此在放大等级较高时,应当有针对性的选择瓦片下载。(如:需要北京市天安门附近的地图展示,只需获取该范围的瓦片资源便可在地图中展示)
1.1.4.百度地图API主文件
“bmap_offline_api_v3.0_min.js”百度地图API主文件,已对该js进行修改。见1.3。(后期需要其他功能可能需要再根据需求调整该js)
1.1.5.map_load.js
“map_load.js”中主要设置各种类型瓦片资源的格式(.png,.jpg),以及加载API主文件等,内容如下图:
在这里插入图片描述

1.2.JS API文件下载
访问这个地址http://api.map.baidu.com/api?v=3.0 ,这个是引入在线js文件时的地址,打开之后是一段代码,在代码中找到 src = “http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20200109192240” ,打开这个地址,就可以看到压缩后的js代码,把这些代码粘下来,保存到本地上,就先保存在bmap_offline_api_v3.0_min.js文件里。在粘代码之前可以先格式化一下,以便下面查看与修改。该js为调用离线地图的主要js。
1.3.修改保存到本地的js文件
1.3.1.屏蔽ak验证

在这里插入图片描述

1.3.2.引用本地工具资源
1.3.2.1.依赖的所有模块

在这里插入图片描述

1.3.2.2.修改,本地工具资源引用(离线路径)
在这里插入图片描述

1.3.2.3.引用本地模块资源
在这里插入图片描述

1.3.2.4.获取在线资源并保存至本地
1、在modules文件夹,添加所需模块的js文件,注意命名格式,js代码获取方式:http://api0.map.bdimg.com/getmodules?v=3.0&mod=map_dbwcej
2、mod=后添加模块名,1.3.2.3中修改的代码中,已将依赖的模块名在控制台打印。

3、保存js文件时文件名命名必须为map_dbwcej.js

2.使用说明
2.1.百度地图API

在线api:http://lbsyun.baidu.com/jsdemo.htm#c1_20

2.2.本地依赖
将bmap_offline_demo文件夹下的所有文件复制到本地项目,如图:

在这里插入图片描述

2.3.代码中引用map_load.js资源
在这里插入图片描述

2.4.瓦片下载
采用太乐地图下载器和全能电子地图下载器结合的方式。太乐地图下载器下载的瓦片有水印,全能电子地图下载器下载的瓦片无水印。
通过太乐地图下载器查看对应区域瓦片的数量及文件大小,通过全能电子地图下载器选择对应的区域下载无水印瓦片。
注意:瓦片资源存放在tomcat部署的项目文件夹下,需控制瓦片文件所占用的空间
1、断网后,打开太乐地图下载器。启动成功后重新连接网络。(否则会需要更新,无法正常打开)
2、点击左上方“地图”栏,选择百度地图–>街道,如图:
在这里插入图片描述

3、点击左上方“下载”栏,选择需要下载的瓦片区域,如图:
在这里插入图片描述

4、右键–>下载地图,查看各个放大等级对应瓦片的文件大小,如图:
在这里插入图片描述

5、打开全能电子地图下载器,在右侧地图中选择具体的瓦片区域,在“坐标范围”栏下方点击“当前视野”按钮,获取对应的经纬度。根据步骤5中获取的各放大等级对应的瓦片文件大小,根据具体情况下载瓦片即可。
在这里插入图片描述

2.5.瓦片资源加载
将所需的瓦片资源,存放到项目的“tiles”文件夹下,如下图:
在这里插入图片描述

“8”文件夹内为放大等级为8的所有瓦片资源,如下图:
在这里插入图片描述

3.百度离线地图支持的功能
具体实现代码实例可参考百度地图在线API:
http://lbsyun.baidu.com/jsdemo.htm#a1_2

注意:百度离线地图只支持上方百度地图在线API中的部分功能。支持的功能如下(仅列出基础部分,详细功能参照百度地图API):

3.1.地图
1、地图展示
2、异步加载地图
3、同时加载两个地图
4、通过城市名设置地图中心点
5、设置地图最大、最小级别
6、移动地图
7、缩放地图
8、拖拽地图
9、设置地图显示范围
10、获取地图显示范围
11、获取两点间距离
12、关闭地图默认POI事件
3.2.地图控件
1、缩放平移控件、比例尺控件等

3.3.覆盖物
1、添加、删除覆盖物
2、折线上添加方向箭头
3、设置点的弹跳动画
4、设置点的新图标
5、设置点是否可拖拽
6、设置线、面可编辑
7、设置覆盖物显示/隐藏
8、添加文字标签
9、设置覆盖物的文字标签
10、获取覆盖物信息
11、添加多个点
12、从多个点里删除特定点
13、加载闪烁点
14、加载海量点
15、添加弧线
16、添加椭圆
17、添加行政区划
18、添加自定义覆盖物
19、添加、删除地面叠加层
20、点聚合
21、添加热力图
22、矢量图标
3.4.信息窗口
1、添加纯文字的信息窗口
2、添加图文结合的信息窗口
3、给多个点添加信息窗口
4、获取信息窗口的内容
3.5.右键菜单
1、给地图添加右键菜单
2、给覆盖物添加右键菜单
3.6.鼠标事件
1、设置鼠标样式
2、鼠标滚动缩放地图
3、鼠标拉框缩放地图
4、鼠标测距
5、鼠标点击拾取坐标
6、鼠标绘制点线面
3.7.叠加层
1、添加、删除自定义网格
3.8.事件
1、图块加载完成事件
2、地图点击事件
3、给覆盖物注册事件
4、传递事件参数
5、为多个点注册点击事件
6、注销事件

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页