显示和使用PhoneGap的大型自定义地图离线导航(Displaying and navigatin

2019-07-04 12:23发布

我的问题是如何有效地在脱机的PhoneGap应用程序中显示大型自定义映射,允许它们被摇镜和变焦流畅,同时还支持较老的移动设备?

我开发涉及使用地理定位导航在很可能用户将不会有信号,因此互联网连接偏远地区的徒步路线的移动应用程序。 重要的是,应用程序与Android效果很好2.2+(SVG所以不是一个选项),以及iOS4的+。

我使用Adobe Illustrator在适当的每条路线的决议,平均为约2000x2000像素和最大的自定义绘制矢量地图,其中到目前为止结果中的图片4000x2400像素英寸

我选择用的PhoneGap / JQM去,而不是原生,只是因为我来自一个网络编程背景,它似乎得到了用户界面并无需钻研本地代码太多运行最快的方式,但我写了一对夫妇使用本地代码为电源和屏幕管理的目的PhoneGap的插件。

应用程序需要允许用户之间约25%的周围的地图平移(通过拖动)和放大/缩小(按捏)到原始图像尺寸的200%。

大多数测试中,我所做的一直在运行Android 2.3.3的的HTC Desire和HTC野火运行的是Android 2.2,因为这些可能是一些应用程序将不得不在其上运行的最低规格的设备。

我已经尝试了各种方法来显示地图(详见下文),但到目前为止,每个已被证明不适合的目的要么是因为应用程序的内存占用过大,所需的存储空间可让应用程序过大而无法下载或CPU使用率过于密集平移/缩放时造成滞后。

任何建议非常赞赏。 提前致谢。


方法我试过:

1.显示使用标记图作为栅格PNG

这是第一种方法我试过了。 出口从Illustrator的4000x2400像素图像作为彩色128 PNG-8产生了746KB的文件。 我通过绝对定位它相对于视摇摄图像和通过缩放的宽度/高度的标签的属性放大图像。 这种方法的问题是,即使以1:1的变焦水平,Android应用程序中使用的RAM用于图像和缩放在60MB〜200%,导致此增加120MB,从而导致应用程序崩溃的HTC野火。

使用HTML5画布光栅PNG的2.显示部

为了避免变焦-在引起存储器使用成比例增加的问题,我试图加载经由JS图像然后复制的图像的一部分被显示在画布视口的大小,是这样的:

var canvas = $(‘canvas#mycanvas’);
canvas.width = $(window).width;
canvas.height = $(window).height;
...
var img = new Image();
img.src = “map.png”;
...
var context = canvas[0].getContext("2d");
context.drawImage(img, x, y, w, h, 0, 0, canvas.width, canvas.height);

其中x,y是通过淘选和W定义的源图像中的左上角,h是由缩放水平确定的源图像内的区域的大小

这里的问题是,大地图的图像正在慢慢地丧失质量,同时在内存中(我只能假设有其产生抖动一些高端内存限制),导致地图,看起来失真的应用: 在这里看到一个例子截图

3.显示使用HTML5画布地图作为矢量

谷歌搜索的有点使我发现ai2canvas,插画插件,使您的作品导出为在HTML5画布显示载体。 出口的结果是含有JS的块表示在所有作为插画贝塞尔曲线路径的HTML文件。 导出我的4000x2400地图导致包含矢量路径一个550KB的HTML文件。 在我的测试应用程序,我渲染整个地图到内存中的帆布(未附连到DOM)的4000x2400像素,然后使用context.drawImage()与在 - 复制的它的相关部分到视口尺寸的画布存储器帆布作为源。 在HTC野火,虽然最初呈现所有的贝塞尔曲线的内存帆布花了大约2000毫秒,画布之间复制足够快,以允许平滑的平移和缩放。 问题是,当我看着应用程序的内存使用,它是使用120MB的内存帆布一旦所有的载体已经呈现。

我尝试使用矢量地图的第二方法; 代替渲染的所有向量,以一个大的内存帆布,我提出的应用程序计算其矢量路径每条拖/夹送事件期间所视口内可见在当前摇拍位置/缩放级别和仅绘制可见矢量到视尺度的画布。 虽然这减少了所需的内存使用量为10Mb,对每一个拖/捏循环进行这些计算所需的CPU周期所做的应用滞后于旧的Android手机是无法使用这么多。

4.使用离线平铺显示地图

使用地图瓦工 ,我创建PNG砖我在地图缩放级别从25%到100%。 在我的测试应用程序,我然后能延迟加载需求减少内存使用和生产,甚至在HTC野火顺利平移/缩放体验瓷砖。 我想我找到了解决办法,直到我看了看APK的大小,制作:我的4000x2400地图,地图铺放生产平铺图像的MB。 我大部分的地图都是围绕2000x2000像素,造成约砖2MB。 我的正确应用,加上PhoneGap的开销的代码是另一个2MB。

我的目的是释放在Android /苹果市场提供一系列的应用程序,每一套约10地图,但每个平铺在地图之间1-4Mb重量在因此产生的应用变成了一个非常大的下载。

Answer 1:

在这种情况下感兴趣的是别人,我用到底地图平铺,使用一种称为工具解决了这个pnqnq创建受限于256个色8位PNG。 将得到的砖用于我的4000x2000地图的组大小约为800K而不是用于4Mb的PNG-24,这是在我的Android和iOS应用资产的可接受尺寸。



文章来源: Displaying and navigating large custom maps offline using Phonegap