Rover's Official Blog

TMS是tile map service的缩写，是一种瓦片地图服务，也称之为WMTS（web map tile service），具体的标准可以见OGC网站。TMS的算法很简单，就是把投影后的世界地图按照层级进行四叉树(待验证)切割，切割后的瓦片数量随层级呈金字塔型，数量和层级关系如下表所示：

对这些瓦片进行编号，由于瓦片编号的规律性（平面直角坐标系），加上投影也是一种算法（球形展开成平面），所以，编号和坐标之间就建立了一种索引关系，通过编号可以得到经纬度区间，通过经纬度可以找到瓦片的编号，具体的计算公式如下：

n = 2 ^ zoom
xtile = ((lon_deg + 180) / 360) * n
ytile = (1 - (log(tan(lat_rad) + sec(lat_rad)) / π)) / 2 * n

由公式可以看出，只要确定经纬度和层级，就可以得到瓦片的编号索引，相反，若知道编号就可以去推算未知的经纬度了，其计算公式如下：

n = 2 ^ zoom
lon_deg = xtile / n * 360.0 - 180.0
lat_rad = arctan(sinh(π * (1 - 2 * ytile / n)))
lat_deg = lat_rad * 180.0 / π

所以：一、显示地图的时候就可以根据中心坐标和层级以及bound范围，就可以确定需要加载那些地图瓦片；二、mark一个point的时候，根据point的经纬度以及tile的经纬度范围，就可以确定point在某一tile的像素坐标位置，而tile同bound之间又有像素关系，所以point就可以mark到map的bound上了；三、同二相反，鼠标在bound上单机，也就可以得到具体的经纬度信息了。这应该是webmap引擎实现丰富多样地图效果的基础吧，包括线、面、地图叠加等更多功能。

我从网上找了一段开源的代码，重新组了一下，可以通过在线的方式获得编号同经纬度之间的正反算了，体验网址：http://rovertang.com/labs/tileindex/，你输入经纬度并选择层级后就可以得到Google tile和TMS的瓦片索引编号了，效果如下图：

需要说明的是，Google tile同TMS有差别，原因是：Google tile的直角坐标系原点在左上角（即北极点同中央子午线的交点），而TMS的原点在左下角（南极点同中央子午线的交点）。所以：编号索引中的x轴不变，y轴略有变化，结果为该列所有tile减去y再减去1，公式就不再罗列了，可以直接查看我提供的网址分析源代码吧。我们以上海世博演艺中心(现为梅赛德斯奔驰演艺中心)的坐标来演示一下Google tile和TMS的索引差异吧，经过计算，在14层级下，Google tile的x和y分别为13721和6696，而TMS的x和y为13721和9687，两者的tile网址可访问这两个连接：http://mt0.google.com/vt/lyrs=m@174000000&hl=zh-CN&src=app&x=13721&s=&y=6696&z=14&s=Galileo和http://rovertang.com/labs/GMAPIv3_Offline/expotile/14/13721/9687.png，后者是我通过maptiler工具切割的世博地图tile(在上次的Google Maps API v3离线开发包一文中我有提供下载，现增加演示网址：http://rovertang.com/labs/GMAPIv3_Offline/)，两者对比如下：

BTW：如果你需要更多的将TMS算法公式变为可执行代码，那么请参考OSM的wiki：Slippy map tilenames，文中提供了python、perl、PHP、.net等语言的code，有兴趣的可以参考一下。

最后：本文虽然参考了较多的瓦片文章，但对瓦片地图的理解可能仍然有片面之处，欢迎交流和指正。

这次愚人节的时候，Google推出了水下搜索，当然，这只是一个愚人的小把戏，不过效果非常不错，进入页面后，第一眼是一个水面的效果，水下的鲨鱼在游来游去，然后Google logo和搜索框从水面上往下掉进水里，输入内容后点击搜索，会将搜索出来的图片从天而降掉进水里，点击水面还能引起波澜，如果点击手气不错，会掉金币、宝甁、宝箱等，效果很愚人吧。现在仍然可以体验，体验网址：http://www.google.com.hk/intl/zh-CN/landing/shuixia/，效果截图如下：

需要特别说一下的是，这个效果是用HTML5做的，需要使用支持HTML5的chrome或firefox等浏览器才能看到这一效果，使用IE6只能看到一提示画面，让你安装chrome浏览器。虽然这只是Google愚人节的一个玩笑，但也让我们看到了HTML5的强大，没有Flash依然可以做出Flash的效果。不过效果虽炫，但资源耗不起那，打开这一页面后，CPU一下子就上去了，主要应该是这个搜索框和logo的不断刷新(看source code会发现这些元素会不断变化位置)所致吧，真有点伤不起。

最后，我把这一效果的代码扒了下来（除搜索按钮无效果外其他都是一样的），本地演示：http://rovertang.com/labs/shuixia/ (速度有点小慢，如果加载不成功，则请Ctrl+F5强制刷新)，代码和资源下载：http://sharesh.googlecode.com/files/googleshuixia.zip。有兴趣的朋友可以自行研究一下这一效果的实现，也许会对你如何使用HTML5做游戏有所新的发现和帮助吧。

如果你是做Android软件的，那么就涉及到发布到市场的问题，Google自身提供了一个市场，叫Google Android Market，和Apple的appstore类似，只是这个市场更加的开放，现在，这个Google Android Market已经更名为Google Play了。我尝试着去了解了一下将软件发布到Google Android Market的过程，和大家一起来说说这该死的Google Android Market。

如何发布你的软件到Google Android Market？

首先，你要有一个Google的账号和VISA或万事达(以及另外两家)的信用卡，当然，这是废话。

然后，你要有一个checkout(现已并入Google Wallet，美国区已经执行，其他地区暂未执行)帐号，注册的过程中没有china可选，但可以先选择Hongkong来代替。

有了checkout，就去Google Android Market申请软件发布，申请地址：http://play.google.com/apps/publish。和Apple的appstore类似，需要通过checkout向Google支付google25美金，就是软件开发许可，这样你才可以获得签名的私钥文件，有了签名你才可以发布到Google Android Market，debug的签名应该是不可以的(这有点和当年的symbian的签名证书类似，只是似乎没有那么严格)。

原则上，完成了这几项就可以在Google Android Market上发布你的软件了，而且免费收费都可以。但问题是：你的信用卡实际上是大陆的，账单地址又是虚假的Hongkong地址，可能加上Google出于纳税的考虑，所以如果Google checkout没有美国纳税身份证明(现在已经开通了20多个国家和地区吧，其他国家和地区也应该需要类似的纳税证明的，可能如果你本身是国外银行卡也许就简单多了)，Google只能每个月最多给你500美金，多余的部分暂扣。checkout的账户限制和早期paypal有点类似，给账户充值美金还要用国外银行卡，所以淘宝上就有做美金兑换业务，不过据我上次使用paypal的经历，paypal现在应该都可以支持国内的银行卡了，包括双币借记卡都可以，也许银联的卡都可以。

那好吧，我想就去办张香港的银行卡吧。打电话给招商银行，问了下在上海也能办香港的一卡通，但有三个条件，一是账户上需要有五万人民币，二是要有港澳通行证，并且半年以上，当然，身份证我就不说了，三是居住证明，水电煤账单、信用卡账单等都可以，当然有房产证最好。三样齐全后你就可以去办了，不过只有两个网点可办，一个在陆家嘴，一个在淮海路。不过，我是办不了这个卡了，以后再考虑吧。

不过，事情还没完，考虑到财务问题，又去咨询了下财务，结果事情更复杂了。首先，严格来说，公司的所有业务均为对公业务，所以应该要用公司的银行账号，个人账号原则上是不可以作为公司业务账号进行经营的。其次，公司的经营许可范围是什么？在网上卖软件是否意味着有电子商务行为，是否超范围经营？再次，涉及美元则要用公司的美金账户，然后是否涉及进出口？和财务这么一聊，我是更觉得复杂了。

回到正题，从上述的问题来看，向Google Android Market提交收费程序基本不是一个好的路子，而且看了一下国内大部分的公司向Google Android Market提交的应用也基本都是免费的，这样是不是就意味着做android应用就收不到钱了？其实倒是未必，换个思路就会豁然开朗：软件免费，许可收费。你发布的软件，是免费的，可以放到Google Android Market，以及国内很多流行的市场，向机锋市场、安智市场、AppChina应用汇等，无非就是就是放到市场里去吗，但在软件里安装了你的程序，接下来的事情可就是你自己干的了，包括是否允许运行、功能限制、付费激活、账户控制等，所以最终能不能收到钱，还是取决于你，而非应用市场。

通过向Google Android Market发布软件这个原则上应该很简单的事情，没有想到让Google帮助我们赚钱是那么的艰辛，相比apple的appstore，google的market要想在国内立足，还有很长很长的路要走，更不要说整个市场生态环境的培育了。

网上有个朋友向我推荐申请美国一公司的银行卡(可以用大陆身份办理，也可以给寄送实体卡，虚拟卡也可以办)，不过这应该也会涉及到费用的问题，所以如果有国外朋友帮忙代收应该算是最好的路子了。不知道大家对程序放到Google Android Market进行收费，还有什么好的路子？

什么是User Agent？懂一点网页制作的人应该都明白。简单的说，User Agent就是用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。于是乎，User Agent的判断就成为识别浏览器的关键，不仅仅如此，移动互联网开发势头迅猛，那么通过User Agent判断桌面端设备或移动设备就变的很为重要。当然，通过User Agent也可以用来改善一定的兼容性，比如判断得到用户用IE6浏览器那么就是用不同的代码。这些，我想许多的WEB开发中已经成为考虑的第一个问题。

那么，有没有一种好的判断User Agent的代码呢？网上应该有很多，比较简单的直接判断下iOS和Android，然后进入不一样的页面。比如百度地图就是如此，桌面设备访问http://map.baidu.com/地址，而移动设备就访问http://map.baidu.com/mobile/地址，你用桌面设备访问移动网址则还会自动跳回到桌面地址。这就是通过判断User Agent做到的效果。

我没有去细究百度地图是如何判断桌面设备和移动设备的，但我想要找到一个比较全面的User Agent判断代码。不知道大家是否知道有一个叫html5test的网站，其中要作用就是判断你的浏览器对HTML5的支持程度，但同时，他还提供了浏览器和设备信息。我在桌面端通过Firefox、Chrome、IE、Safari等测试都很正确，在移动设备端，Apple iPod下测试了Safari、Opera mini和UC，除了UC无法识别外其他都OK，另外在Nokia E63下也做了测试，默认浏览器OK，UC无法识别。

既然HTML5TEST已经做的如此全面，连浏览器、引擎、设备类型和设备名称等都一应俱全，那就说明在User Agent上的判断应该是做的非常不错的，至少，是我现今看到的最好的了。然后又看到HTML5TEST本身是开源的，那就下载下来分析一下吧。看过后，没有想到，HTML5TEST竟然封装的那么好，一个JS包含了基本上全部的User Agent判断，这个js文件，可以直接浏览这里。

我把这个JS单独拿出来，再加上几句html，做了个浏览器测试的页面，大家可以通过访问这个页面来查看自己的浏览器信息、设备信息等，效果请见下图。地址：http://rovertang.com/labs/useragent/

我想，通过这一个js，得到了浏览器信息、设备类型和设备名称，接下来怎么做就看你自己的了，不过也有一个小小的担心：一个大于50K的js文件，对页面的加载似乎是有点压力的。

顺便说一下，发现IE对HTML5的DOCTYPE标签支持不是很好，有测试不通过的现象。万恶的IE确实挺让人恼火的。

最后推荐一个FireFox的组件吧，我想许多人都用过，就是User Agent Switcher，作用呢就是在FF下伪装成其他浏览器，比如iPhone的浏览器，这样就可以直接在FF下浏览移动网页进行代码分析了。

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

常常看JS文件的时候，经常会遇到一些unicode编码后的中文，很难猜透是啥中文，所以会比较痛苦。虽然在线解码以及解码小工具都有，但都不是很好用，特别是那个unicode解码器2.0版，我竟然打不开。一气之下，Google了一下解码的方法，竟然只要一句C#语句(原文)就可以搞定，如下：

private String DecodeUnicode(String dataStr)
{
    Regex reg = new Regex(@"(?i)\\[uU]([0-9a-f]{4})");
    return reg.Replace(dataStr, delegate(Match m) { return ((char)Convert.ToInt32(m.Groups[1].Value, 16)).ToString(); });
}

虽然我不会C#，但看在已经安装了VS2008的份上，就跑了一下代码，测试通过。为了免去以后的痛苦，所以就把它编译成一个exe吧，顺便也就分享给大家吧。

功能很简单，输入unicode编码后的内容，然后点击decode，自动还原成可读的unicode码。截图如下：

下载地址：http://sharesh.googlecode.com/files/deunicode.zip