使用Phonegap脱机显示和导航大型自定义地图

Question

我的问题是如何在离线Phonegap应用程序中有效地显示大型自定义地图，使它们在支持较老的移动设备的同时能够平移和缩放？

我正在开发一个移动应用程序，它涉及到使用地理定位来导航偏远地区的步行路线，在那里用户很可能没有信号，因此没有互联网连接。重要的是，该应用程序与Android 2.2+ (因此SVG不是一个选项)以及iOS4+都能很好地工作。

我使用绘制了适合每条路径的分辨率的自定义矢量地图，平均约为2000x2000像素，其中最大的一个是4000x2400像素。

我选择使用Phonegap/JQM，而不是使用本机，因为我来自web编程背景，这似乎是让用户界面启动和运行的最快方法，而不需要过多地钻研本机代码，尽管我已经编写了几个使用本机代码进行电源和屏幕管理的Phonegap插件。

应用程序需要允许用户浏览地图(通过拖动)和放大/缩小(通过捏)约25%至200%的原始图像大小。

我所做的大部分测试都是针对HTC的Android 2.3.3和HTC Wildfire运行的Android2.2进行的，因为这可能是该应用程序将不得不运行的一些最低规格的设备。

我已经尝试过各种显示地图的方法(详见下文)，但到目前为止，这两种方法都不适合使用，原因要么是应用程序的内存使用量太大，要么是所需的存储空间太大，无法下载，要么是CPU的使用过于密集，导致摇摄/缩放时出现滞后。

任何建议都非常感谢。提前谢谢。

我试过的方法：

1.使用标记将地图显示为光栅PNG

这是我第一次尝试。将4000x2400像素图像从Illustrator导出为128色PNG-8，生成一个746 in文件。我通过相对于视口的绝对定位来平移图像，并通过缩放标签的宽度/高度属性来缩放图像。这种方法的问题是，即使在1:1的缩放级别上，Android应用程序也使用了60 on的RAM来处理图像，并将其放大到200%，从而增加了120 on，导致应用程序在HTC Wildfire上崩溃。

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

为了避免缩放问题--在导致内存使用量按比例增加的过程中，我尝试通过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是由缩放级别确定的源图像中的面积大小。

这里的问题是，在内存中，大的地图图像以某种方式失去了质量(我只能假设存在一些导致抖动的内存上限)，导致地图在应用程序：请看这里的屏幕截图示例中看起来扭曲了。

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

通过谷歌搜索，我发现了ai2canvas，这是一个Illustrator插件，可以将艺术品导出为HTML5画布中显示的矢量。导出的结果是一个包含JS块的html文件，它将插图中的所有路径表示为bezier曲线。导出我的4000x2400地图后，生成了一个包含向量路径的550 my html文件。在我的测试应用程序中，我将整个地图呈现到内存中的4000x2400像素的画布(没有附加到DOM上)，然后使用内存中的画布作为源，使用context.drawImage()将其相关部分复制到视口大小的画布中。在HTC野火上，虽然所有的贝塞尔曲线在内存中的画布上的初始渲染花费了大约2000毫秒，但是在画布之间的复制足够快，允许平滑的摇摄和缩放。问题是，当我查看应用程序的内存使用情况时，一旦所有向量都呈现出来，它就会使用120 in作为内存中的画布。

我尝试了使用向量地图的第二种方法；我没有将所有的矢量呈现到内存中的大画布上，而是让应用程序计算在每次拖动/捏事件期间，在当前pan位置/缩放级别的视口中哪些矢量路径是可见的，并且只将可见向量绘制到视口大小的画布上。虽然这将所需的内存使用量降低到10 it，但在每次拖动/捏取周期中执行这些计算所需的CPU周期使得该应用程序在旧android手机上滞后到无法使用的程度。

4.使用离线贴图显示地图

使用地图滴定器，我在25%到100%的缩放级别上为我的地图创建了PNG块。在我的测试应用程序中，我能够懒洋洋地按需加载瓷砖，减少内存使用，甚至在HTC Wildfire上也能产生平滑的pan/缩放体验。我想我已经找到了解决方案，直到我看到APK生产的大小:对于我的4000x2400地图，地图tiler生成了4Mb的瓷砖图像。我的大部分地图都在2000×2000像素左右，产生了大约2Mb的瓷砖。我的正确应用程序的代码加上Phonegap开销是另一个2Mb。

我的意图是在Android/Apple市场上发布一系列的应用程序，每个应用程序都有10张左右的地图，但每一张地图的重量都在1-4Mb之间，因此产生的应用程序将成为一个非常大的下载量。

Answer 1

如果这是其他人感兴趣的，我解决了这个问题，最后使用地图贴图，使用一个名为pnqnq的工具来创建限制在256个颜色的8位PNG。与PNG-24相比，我的4000x2000地图的瓷砖集大小约为800 K，对于我的安卓和iOS应用程序中的资产来说，这是一个可以接受的大小。