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

---