简单来说,为避免在 Retina 分辨率下出现锯齿现象需要调大字体重新配图,瓦片大小可以不调整。
一直很好奇一个问题,为何在 iPad、iPhone 下访问百度地图、google地图网页版也能如此清晰,而访问自己家的地图甚至国外很多如 OpenStreetMap 的地图也总是有很明显的锯齿,到底是切图时图片 分辨率 的问题或是使用了 @media 标签 ,纠结了很久今天终于找到答案了。
首先尝试在 Chrome 下访问百度地图移动版并抓取瓦片,得到地址是类似这样的:
http://q5.baidu.com/it/u=x=1639;y=445;z=13;v=014;type=web&fm=44
发现界面与 iPad 下有所差别,在 chrome 下修改 User-Agent 为 iPhone—iOS5 再抓取到的瓦片地址是类似这样的:
http://or1.map.baidu.com:8080/it/u=x=6552;y=1785;z=15;type=web&fm=42&f=webapp&colors=40&__1=.jpg
发现有个参数很可疑,尝试把 colors=40 改成 colors=100 但变化并不大,只是道路变清晰了。
http://or1.map.baidu.com:8080/it/u=x=6552;y=1785;z=15;type=web&fm=42&f=webapp&colors=100&__1=.jpg
按照这篇博文「用 Fiddle 抓取 Safari Mobile 数据包」,抓取到一个新的地址:
很明显瓦片里的文字比前面的都大很多,问题找到了!
仔细看一下有两个重要的参数:fm 和 quality,
…fm=42&f=webapp&quality=40&format=jpeg&__1=.jpg
…fm=41&f=webapp&quality=100&format=jpeg&__1=.jpg
…fm=42&f=webapp&quality=100&format=png&__1=.png
…fm=41&f=webapp&quality=100&format=png&__1=.png
回过头再修改一下 PC 端的瓦片发现也是有效的。
http://q5.baidu.com/it/u=x=1639;y=445;z=13;v=014;type=web&fm=41
结论:百度地图的瓦片是实时生成的,网页端判断为 Retina 显示屏时显示的是大字号低精度瓦片,普通的话则显示标准瓦片。
更新[2013.01.28]:
今天看到 MapBox API 里有 Retina 接口,早看到这个就不用费那么大劲了嘛。
http://b.tiles.mapbox.com/v3/examples.map-vyofok3q/6/33/31.png
http://b.tiles.mapbox.com/v3/examples.map-zq0f1vuc/6/33/31.png
诈尸了【惊
@Jonny: 不仅诈尸还还魂了。
锅叔的图片为啥设置为点击才显示?