由HTML5绘制地图说开去

HTML5现在已经成为移动开发的另一个焦点,关于native app和web app以及杂交app的讨论也已经不少。原来光芒四射的Flash,Adobe公司宣布放弃移动版的开发,而转向更大力度的支持HTML5。虽然说HTML5里的Canvas可以在今后替代Flash,但个人觉得似乎也不乐观,我们来说几件事情吧。

近十年前就看到flashk(一个组织后来就消亡了)做过一个基于flash的管网系统,那时候就觉得用flash做一个地图引擎,那应该是多牛。

后来觉得SVG不错,我都有点同GML有点相提并论了,但SVG至今依然不是HTML5的一部分,而且这么多年也没有一个牛的应用是用SVG做的,虽然SVG看起来挺强大的,支持热点、支持内嵌js等,并且很多浏览器对SVG的支持也不错。(最早有见过用SVG来做地图的,那应该在我06年时写博客有提到过,但那时候瓦片地图都应该是在大家努力研究的状态吧)

昨天晚上开始研究百度的地铁地图,是用flash做的,矢量化的,做的还是挺漂亮的,我一直很喜欢,但移动设备基本上不能用(对flash不支持或者支持不佳)。研究这个东西呢有两个意图,一是把它离线,让其他网站也能用,另一就是想直接看看他们的数据,毕竟自己做数据还是比较累人的。现在的结果是,本地显示基本OK,部分功能不可用(比如路径演算就一定是需要服务端支持的,发现地铁的路径演算竟然是百度地图的一个部分,演算完毕后地铁程序解析获取到的JSON数据,可能地铁换乘也算是百度步行导航演算的一个部分吧,我卡壳的是地铁的JS不能获取JSON以及解析,不知道是否和跨域有一定的关系否)。地铁数据部分,也已经看到数据,是一个二维平面下的一系列坐标点集合,准备导出来看看能否直接成图。

今天花了一点时间,把HTML5中的Canvas章节,简单的浏览了一遍。虽然有不少的函数,但似乎同绘图工具有所类似了,让我想到了mapinfo,什么画线、画面、画圆、画弧线、填充颜色、设置包边的粗细和颜色等等等。我在想:若使用HTML5绘图,那不仅仅是要将地图绘制一遍(获得坐标控制点),更需要将地图通过JS语言来去实现一遍。OMG,想起来就觉得有点头大,难道flash当年也如此麻烦?即便flash如此麻烦,那也至少是有可视化编辑环境的,那HTML5的绘图是否会有可视化的编辑环境呢?(也许只是我还没有发现吧)。另外补充一句:flash的问题确实比较多,比如非常占用CPU、比较耗电,那么HTML5的Canvas就不会有这问题吗?

后来搜索“HTML5 Canvas map”的时候,看到两个地图,一个世界地图,另一个是美国地图,都是用HTML5绘制的,突然觉得HTML5绘制地图看起来希望很大嘛,于是研究了一下这个开源的美国HTML5地图,但简单看了下,就觉得怕了,因为:美国地图绘制的固然漂亮,但绘制的那一系列平面坐标点是如何而来的呢?当然,不排除是有工具的,但我觉得,若要做到这样,那是多么的艰辛那(看他的Map.js文件,总共近1300行,地图数据就占据了一半)。有兴趣的朋友就去看看吧:http://dougx.net/map/usmap.html

不过,既然HTML5大势如此,那HTML5的将来一定是璀璨的,只是,可以得到一个结论是:在没有一个好用的工具之前,用HTML5来绘制地图,是一件非常非常麻烦的事情,更不用说将HTML5的绘图做成引擎,实现放大缩小平移以及热点响应事件等操作了。看到一个HTML5做的巨牛网站,甚是欣慰,动画效果同flash有的一拼,观摩地址:http://www.ro.me/。(虽然是效果巨牛的HTML5动画网站,但工程其实挺大的,查看源文件,发现一个页面加载了90多个功能js,绘图js也是让人眼花的坐标系列,看下这个文件会不会吓到你,呵呵)

总结几句废话:

1、做件事情很不容易

2、工具(或者说是框架或引擎之类的东西,比如openlayers引擎、jQuery框架等)很有用

3、可用性和易用性很关键

最后问大家一句:你会用HTML5去绘制地图否?

原文地址:https://www.cnblogs.com/Tangf/p/2416283.html