OpenLayers无偏移加载百度离线瓦片地图

本文使用OpenLayers最新版本V5.3.0演示：如何使用OpenLayer完美无偏移加载百度离线瓦片地图。OpenLayers 5.3.0下载地址为：https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip 。

百度地图离线瓦片下载使用“迈高图-地图数据下载器”（以下简称：迈高图），演示数据以湖南省长沙市芙蓉区12~18级瓦片数据为例。

 

下载、安装迈高图

如果已下载、安装迈高图，直接跳过本节内容。从官网下载迈高图安装包mgmAppSetup.exe。

 提示：推荐从官网下载安装包，确保您下载的安装包为最新版本。

双击mgmAppSetup.exe，进入安装界面：

• 在（）处单击可保持默认安装配置一键安装。必须已勾选“我已经阅读并同意《迈高图用户许可协议》”，否则不能进行安装。
• 在（）处单击可阅读《迈高图用户许可协议》。
• 在（）单击可展开自定义安装界面。

一般选择一键安装即可，安装完成，打开运行迈高图。

 

使用迈高图下载演示数据

迈高图选择百度地图为当前地图源，地图图层选择为卫星影像，并切换到下载工作模式，指定湖南省长沙市芙蓉区行政边界为下载区域，如下图：

单击【下载】按钮在弹出的【下载】对话框中选择下载影像图层为底图，勾选按边界裁剪，导出选择为瓦片-PNG-原始编号，选中级别12~18级。

最后单击【下载】按钮开始下载。下载完成后，Alt+W快捷键打开下载任务列表。选中下载任务单击文件夹图标打开下载演示数据所在目录，如下图：

打开目录下“影像”文件夹，即可看到12~18级瓦片数据，备用。

 

使用OpenLayer加载谷歌地球离线瓦片地图

任意新建空目录命名为geTileMap；解压v5.3.0-dist.zip并复制其中ol.js、ol.css文件至geTileMap目录；geTileMap目录下新建tiles空目录，并复制之前下载的12~18级演示瓦片至tiles目录；最后新建名为index.html文件。

完成上述操作后，目录结构如下：

打开index.html输入如下源码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

保存后浏览器中运行演示OpenLayer完美无偏移加载百度离线瓦片地图效果。下图为Chrome中运行实例截图和局部放大后截图：