手机网页地图APP:从服务器加载瓦片图片,保存在客户端,离线显示
我正在寻找一种解决方案,可以使移动浏览器从服务器加载平铺图像集合并将它们存储在本地移动设备中,然后甚至可以在离线模式下显示它们。
我通过使用 HTML5 中的 CacheManifest 和 LocalStorage 研究了一些东西,但似乎它们只能处理少量数据。此外,WebSql似乎是一个潜在的解决方案,但我无法真正理解如何实现它。
基本上,我想要拥有的功能是: 在在线模式下从远程服务器加载 ->将它们存储在本地内存中 ->在离线模式下显示它们
感谢您的任何提示!
I am looking for a solution that can enable the mobile browser load a collection of tiled images from the server and store them in local mobile device, then could display them even in offline mode.
I researched something by using CacheManifest and LocalStorage in HTML5, but it seems that they can only handle with a small amount of data. Besides, WebSql seems to be a potential solution, but I cant really understand how to acheive it.
Basically, the features I want to have is:
load from the remote server while in online mode -> store them in local memory -> show them while in offline mode
thanks for any hints!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我们在最近的 iOS DevCamp(7 月)上的开源项目正是关注这个问题。我们已经非常接近可行的解决方案:
https://github.com/pdxgene/iDCMapsLite
亮点:
-“在线”选项卡浏览地图(当前设置为从 OpenStreetMaps、IIRC 获取图块)
- “保存”将地图图块保存到核心数据存储,并将“离线地图”添加到第二个选项卡的列表中;
- “已保存地图”选项卡包含已保存地图的列表。选择一个会从核心数据存储中获取其图块并显示它们。
仍需开展工作的领域:
- 我们的目的是递归地快照地图图块,放大和缩小。我相信我们已经降低了一级并提高了一级作为概念验证。
我希望这有帮助。请随意尝试让它为您工作:-)
Our open-source project at the recent iOS DevCamp (July) was focused on exactly this problem. We got pretty close to a workable solution:
https://github.com/pdxgene/iDCMapsLite
Highlights:
- "online" tab browses maps (currently set to grab tiles from OpenStreetMaps, IIRC)
- "save" saves map tiles to a Core Data store, and adds an "offline map" to the list in the second tab;
- "saved maps" tab contains a list of saved maps. Selecting one grabs its tiles from the Core Data store and displays them.
Areas where work is still needed:
- our intention was to recursively snapshot the map tiles, zooming both in and out. I believe we got one level down and one level out as a proof of concept.
I hope this helps. Feel free to try to make it work for you :-)
我对 http://bluedot.mobi/td 也有类似的要求。暂时搁置缓存问题,拥有一个可以离线使用的映射框架是很棘手的 - 我所知道的最好的是开源 API OpenLayers.org。他们最近在支持移动设备方面做了重要的工作。大型地图 API(例如 Google 的 javascript API)限制离线使用和缓存。
目前正在使用 OpenLayers 完成一些工作,以利用 localStorage 和/或 websql。 此处是一个有效的示例。您可以从那里深入到源代码以查看不同的实现方法。
请注意,使用 OpenLayers,您可能希望利用 svn trunk 来获取最新的开发成果。这是一个快速发展的项目。
I've had similar requirements on http://bluedot.mobi/td. Setting aside the caching issue for a moment, having a mapping framework that can be used offline is tricky - the best I'm aware of is the open source API OpenLayers.org. They have recently done significant work on enabling mobile device support. The big mapping APIs such as Google's javascript API restrict offline use and caching.
There is some work currently being done with OpenLayers to utilize either localStorage and/or websql. A working example is here. You can drill down to the source from there to see the different implementation methods.
Note that with OpenLayers you'll likely want to tap into the svn trunk to get the latest developments. It's a fast moving project.