美文网首页
uni使用openlayer加载本机离线地图

uni使用openlayer加载本机离线地图

作者: 扶不起的蝌蚪 | 来源:发表于2020-09-18 11:00 被阅读0次

    最近做了一个需求,需要将地图图层下载到手机作为离线地图,方便在没有网络的情况使用。
    首先我们看下代码怎么实现

    文件位置:/hybird/html/offlineMap.html
    /**
     * @param {string} zip   瓦片文件压缩包下载目录  
     * @param {string} unzip 瓦片文件压缩包解压后目录 
     */
    var zip = "_doc/MapExt/" + name + "_map.zip";
    var unzip = "_doc/offlineMap/";
    plus.zip.decompress(zip, unzip, ()=>{
        //mui.toast("解压成功");
    }, function(e) {
        //mui.toast("解压失败,请重试或者重新下载离线包");
    });
    

    这里下载图层后,通过plus的解压API把瓦片文件解压到指定目录

    注意:
    这里我是运行在HBuilder基座上的!
    这里我是运行在HBuilder基座上的!
    这里我是运行在HBuilder基座上的!

    首先我们来看下地图文件夹在手机文件管理器的位置
    打开安卓的文件管理器
    位置:Android/data/包名/apps/APPID/

    APPID路径
    可以看到docwww两个目录(以上这些文件在安装完毕,点击第一次启动的时候生成,如果你只是安装不点击打开目录是没有这些文件的)
    点开doc
    doc
    MapExt就是瓦片压缩包的文件
    offlineMap就是瓦片压缩包解压后的图片
    我们再来看下openlayer怎么加载离线的地图
    new ol.layer.Tile({
        title: "离线地图",
        baseLayer: true,
        visible: false,
        source: new ol.source.XYZ({
            url: '../../../doc/offlineMap/{z}/{x}/{y}.jpg',
        }),
    })
    
    代码文件位置
    可以看到openlayer
    其中../../../就相当于到了APPID目录,然后通过访问doc/offlineMap拿到离线地图数据。
    在官方基座,我试过效果是没问题的,可以加载
    但是每次到了自己打包的APP就无法加载离线地图了。
    经过一番寻找
    我在正式包的文件路径发现了端倪
    正式包的APPID文件目录
    看到没,WWW文件目录没有了,这样就会导致openlayer的相对路径失效,从而无法加载离线地图
    那么解决的办法就是让WWW目录出来
    我在dcloud问答看到了对应的解决的办法
    通过设置来释放资源
    "runmode": "liberate"(默认为normal)
    

    释放的应用资源(html、js、css等web资源文件),在Android平台上释放资源后会加快页面加载速度。
    同时也能解决以下问题:

    • 5+ API中的plus.io.*能访问_www目录;
    • 能解决某些Android版本无法通过href后带?传递参数;
    • 能解决某些Android版本无法通过video标签直接引用视频文件

    UNIAPP设置runmode请参考5+API文档

    设置完成后我们再看看APP的目录


    WWW目录出现了

    然后测试离线地图的下载就发现没问题了。

    相关文章

      网友评论

          本文标题:uni使用openlayer加载本机离线地图

          本文链接:https://www.haomeiwen.com/subject/vfgdyktx.html