android端实践openlayers离线地图

笔者最近实践了利用openlayers在android app中实现离线地图应用,本文记录了笔者实践的思路。

android端移动地图功能设计:

1、加载本地的地图瓦片;
2、GPS定位;
3、叠加部件(矢量)图层;

准备工作

android端用webview加载在线页面或离线的html页面都是没问题的,同时,android原生与JS之间可以互相调用。这一部分不是本文的重点,参考资料如下:

  1. Android与HTML+JS交互入门 android原生与JS之间互相调用的例子
  2. android 与JS之间的交互 WebView加载本地资源的小结
  3. Android WebView 与JS的数据交互 如何将css js 图片等静态资源部署在APP中
ol如何加载手机端本地地图瓦片

笔者想到ol加载地瓦片地图时,可以用tileUrlFunction返回一个瓦片的链接,例如:

        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                        var z = tileCoord[0] + 11;
                        var x = tileCoord[1];
                        var y = -tileCoord[2] - 1;
                        return "http://www.dzmap.cn/OneMapServer/rest/services/vector_service/MapServer/tile/" + z + "/" + y + "/" + x;
                    }
  • tileUrlFunction返回一个地图瓦片的路径,ol请求瓦片并渲染。如果在此步骤将请求服务端的瓦片改为请求Android本地的资源,是否可行?
  • android端本地无法提供一个http路径,我想到了用base64将图片编码的方式返回给ol,测试证明这是可行的。
  • 那么加载本地瓦片就简单了,下载地图瓦片并组织好存储路径,tileUrlFunction中调用android原生的方法获取对应xyz的瓦片,然后用base64编码后,返回给ol。
  • 进一步改进,用文件方式存储地图瓦片比较浪费,就想到了用sqlite mbtile方式存储瓦片。笔者在之前的地图瓦片下载工具基础上,增加了输出sqlite mbtile的功能,点击下载。
  • MBTile相关介绍:
    官方介绍
    MBTiles移动存储简介
  • 通过测试,发现用base64编码后的瓦片,ol的缓存功能貌似不好使了,查了一些资料,提到用base64编码后,就无法用到浏览器缓存了。没关系,在android端用Lrucache做缓存,也能很好的解决此问题。

实现GPS定位功能

  • JS调用android原生获取GPS定位坐标,android端可以用原生的GPS定位,或使用baidu sdk,返回当前位置坐标。
  • 为防止获取GPS位置时有较长的等待,笔者推荐用异步的方式。即,由JS调用Android端获取GPS位置,android启用异步方式获取当前位置,并立即返回;当Android端获取到位置后,回调JS端,传递当前位置给OL,ol标注当前位置。

叠加部件(矢量)图层

  • 与上述加载本地瓦片类似,事先预处理好矢量图层,用spatialite(基于sqlite的空间数据库)存储矢量部件图层,建好空间索引;
  • ol注册map.moveend事件,请求当前可视范围的矢量数据;
  • 这里应该还可以用矢量瓦片来替代,还没来及实践。

本文献给大连机场,感谢您延误航班,使我有时间有耐心写完本文,谢谢。

你可能感兴趣的:(android端实践openlayers离线地图)