使用Phonegap显示和导航大型自定义地图
我的问题是如何在离线的Phonegap应用程序中高效地显示大型自定义地图，从而允许它们在支持旧版移动设备的同时平滑地放大和缩放。
我正在开发一个移动应用程序，其中涉及使用地理定位在偏远地区导航步行路线，因为用户可能没有信号，因此无法连接互联网。 使用Android 2.2+（因此SVG不是一种选择）以及iOS4 +应用程序运行良好，这一点非常重要。
我使用适用于每个路径的分辨率绘制了使用Adobe Illustrator的自定义矢量地图，平均大小约为2000x2000像素，其中最大的像素导致图像像素为4000x2400。
我选择了使用Phonegap / JQM而不是本机，因为我来自网络编程背景，它似乎是让用户界面运行起来并且无需深入研究本地代码的最快方式，尽管我已经为了电源和屏幕管理的目的，使用本地代码编写了几个Phonegap插件。
应用程序需要允许用户在地图上拖动（通过拖动）并放大（缩小）到原始图像大小的25％到200％之间。
我所做的大部分测试都是在运行Android 2.3.3的HTC Desire和运行Android 2.2的HTC Wildfire上进行的，因为这些可能是应用程序必须运行的最低规格设备。
我尝试了各种方法来显示地图（下面详细介绍），但到目前为止，每种方法都不适合使用，因为应用程序的内存使用量太大，所需的存储空间使应用程序太大而无法下载，或者在平移/缩放时，CPU使用率过高导致滞后。
任何建议非常感谢。 提前致谢。
我尝试过的方法：
1.使用标签将地图显示为栅格PNG
这是我尝试的第一种方法。 从Illustrator导出一个128像素PNG-8的4000x2400像素图像，产生一个746Kb文件。 我通过绝对定位相对于视口来平移图像，并通过缩放标记的宽度/高度属性来缩放图像。 这种方法的问题在于，即使在1：1的缩放级别下，Android应用程序也会使用60Mb的RAM来放大图像，并且放大到200％会导致120Mb的增加，从而导致应用程序在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定义的源图像中的左上角，h是由缩放级别确定的源图像内的区域大小
这里的问题是，大的地图图像在内存中以某种方式失去了质量（我只能假设存在一些导致抖动的上限内存限制），导致地图在应用中看起来失真：请参阅此处获取示例屏幕截图
3.使用HTML5画布将地图显示为矢量
有一点谷歌搜索引导我发现ai2canvas，一个Illustrator插件，使您能够将作品作为向量显示在HTML5画布中。 导出的结果是一个html文件，其中包含一大块JS，代表插图中所有路径为贝塞尔曲线。 导出我的4000x2400地图导致一个包含矢量路径的550Kb html文件。 在我的测试应用程序中，我将整个地图渲染到4000x2400像素的内存画布（未附加到DOM），然后使用context.drawImage（）将相关部分复制到视口大小的画布，内存画布作为源。 在HTC Wildfire上，尽管所有贝塞尔曲线初始渲染到内存中的画布花费了大约2000毫秒，但画布之间的复制速度足够快，可以平滑地进行平移和缩放。 问题出现在我查看应用程序的内存使用情况时，一旦所有的矢量都渲染完毕，它将120Mb用于内存中的画布。
我尝试了使用矢量地图的第二种方法; 我没有将所有向量渲染到大型内存中，而是让应用程序在每次拖动/捏合事件期间计算在当前平移位置/缩放级别的视口内哪些向量路径可见，并且仅将可见向量绘制到视口大小的画布。 虽然这会将所需的内存使用量减少到10Mb，但在每次拖动/捏合循环中执行这些计算所需的CPU周期使得应用程序在旧的Android手机上滞后很多，因此无法使用。
4.使用离线平铺显示地图
使用地图砖瓦，我为地图创建了25％至100％的缩放级别的PNG图块。 在我的测试应用程序中，我可以根据需要延迟加载瓦片，从而减少内存使用量，即使在HTC Wildfire上也可以产生平滑的平移/缩放体验。 我以为我找到了解决方案，直到我看到了生产的APK的大小：对于我的4000x2400地图，地图平铺器生成了4Mb的平铺图像。 我的大多数地图大约是2000x2000像素，导致大约2Mb的图块。 我的正确应用程序加上Phonegap开销的代码是另一个2Mb。
我的目的是发布Android / Apple市场上的一系列应用程序，每个应用程序都有大约10张地图，但平铺每张地图的重量介于1-4Mb之间，因此生成的应用程序将成为非常大的下载量。
如果这是其他人感兴趣的话，我最后通过使用地图拼贴解决了这个问题，使用名为pnqnq的工具来创建受限于256色的8位PNG。 我的4000x2000地图的结果集大小约为800K，而PNG-24的地图大小为4Mb，这在我的Android和iOS应用程序中是可接受的资产大小。
链接地址: http://www.djcxy.com/p/11553.html上一篇: Displaying and navigating large custom maps offline using Phonegap