我正在使用开放网络技术编写一个移动应用程序，主要针对新兴的 Firefox OS，但计划支持任何带有网络浏览器的移动设备。该应用程序涉及公共(public)交通方式，目前在我的城市，但也有能力扩展到其他地区。我想为用户提供有关公共(public)交通线路站点位置的图形信息，提供从 A 站到 B 站的最短路线信息，使用城市的公共(public) API 跟踪车辆位置等等。
由于它是一个 Firefox OS 应用程序，我使用 HTML5/CSS3 进行演示，并使用 Javascript 进行逻辑处理，并将这些文件保存在本地，因此应用程序无需访问互联网即可运行。但是，我面临的问题是渲染城市 map (顶部可能有叠加层，例如突出显示的道路和车站)。我想让应用程序不依赖于 Internet 连接来工作，因为我想它有时会在运输过程中和公共(public)场合使用，在这些地方不可能有持续的 WiFi 连接，用户必须依赖他们的运营商提供商数据连接，这可能会证明成本高昂并会转移潜在用户。
到目前为止，我只能找到 Kothic-JS (使用 HTML5 Canvas )可以从离线文件中呈现 OpenStreetMap 数据，但它的性能让我担心，因为它在我的 Firefox OS 模拟器中卡顿，即使我的台式电脑上有足够的计算能力。我只能想象它会在配备 FxOS 的低端移动设备上造成什么样的恐怖——我担心该应用程序将无法使用。据我所知，其他库(例如 OpenLayers)倾向于全部下载服务器生成的图 block 。
使用 HTML5 和 Javascript 在移动设备上渲染城市 map 是否可行？我应该如何处理这个问题？可以使用巧妙的 XSLT 将 map 文件转换为 SVG，并可能预先拆分为 SVG 瓦片，必要时进行裁剪，但这些瓦片的大小永远无法以正确的方式选择，因为可以使用大量缩放级别(即，如果缩放级别 5 上的图 block 占据设备屏幕，在缩放级别 2 上它们只占据其中的一小部分，我最终按 30 个图 block 的顺序绘制以填满屏幕)。除了求助于在线服务，还有其他方法吗？我知道有很多很棒的客户端 map 渲染库，但是这些都不能在 Javascript 中使用。
最佳答案
你应该试试 Leaflet JS - 这是一个很棒的 javascript 开源映射库，支持手持/触摸。我在 my project 中使用过它它在 Firefox OS 上运行良好。
关于离线支持，您可以找到several blog posts关于how to cache tiles for offline use使用 Leaflet - 你应该将这些图 block 与你的应用程序捆绑在一起(如果它只是为了显示本地信息)或者如果你不能捆绑这些 Assets 则实现某种缓存算法。
关于javascript - 在移动网络应用程序上呈现城市 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18038286/