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、注销事件

WEB实现百度离线地图展示相关推荐

web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
Vue-cli3实现web百度离线地图(v3.0)开发
需求实现基于Vue-cli3的web百度离线地图(v3.0)开发 Vue-cli3,目录如下,注意:需要把地图相关的文件放在public下,vue-cli2需要放在static下!!! 参考主要参 ...
QT实现加载百度离线地图
在Qt中加载百度地图需要用到网络浏览器,在此采用webEngine模块,然后用webchannel进行qt与HTML/JavaScript的交互. 需求描述:软件加载百度地图,用鼠标在地图上选点,并进 ...
百度离线地图开发，node实现地图瓦片下载
最近有个Web项目要用离线地图,项目是在内网环境,找了很多资料,踩了很多坑,好在已经实现了,下面把资料整理一下. 首先是百度离线地图开发包,原文地址是http://www.xiaoguo123.com ...
百度离线地图示例之三：矢量图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
vue2+百度离线地图实现多车辆行驶动态轨迹
vue2+百度离线地图实现行驶多车辆动态轨迹实现多多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加.(前端实现,如果数量庞大的车辆移动,很消耗性能) 百度离线地图引入方法查看: vue项目实 ...
百度离线地图示例之四：热力图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
百度离线地图示例之二：测距
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
百度离线地图WMS/WMTS服务
百度离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apac ...
百度离线地图API2.0 百度离线地图api,已经修改源码
百度离线地图API2.0 百度离线地图api,已经修改源码,绕过服务端验证,除了路书等需要服务端数据支持的功能外,其余功能已经全部实现,包括常用的:地图示例.地图控件添加.覆盖物添加.信息窗口展示等等 ...

WEB实现百度离线地图展示

WEB实现百度离线地图展示相关推荐

最新文章

热门文章