由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去绘制地图否？