百度
目前百度在网页版仍然使用地图瓦片，空间参考为webMecator，起始级别为3，范围为256＊5，但其调整了投影参数，中央经线没在0度，因此第3级 实际有6个瓦片（最左、最右是同一个瓦片的两部分）。
请求格式为
https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&udt=20180810&scaler=1&showtext=1
目前经过简单计算推测其基于调整投影参数后 0级瓦片大小为 160x160 ，[0,2]级瓦片都不使用，三级进行瓦片大小调整。
腾讯
矢量地图采用矢量瓦片形式进行存储，通过请求获取相应的矢量内容，在前端进行矢量栅格化绘制
但在与影像叠加时采用了后端获取png图片的方法
https://rt3.map.gtimg.com/tile?z=4&x=13&y=10&styleid=2&version=297对应的图片内容为
qq_4_10_13.png
通过试验获取同一水平行上的影像叠加文字图片
qq_4_10_3.png
qq_4_10_8.png
qq_4_10_9.png
可以看到级别对应关系，qq使用了标准的web墨卡托投影，第4级为 16x16
对应其影像数据 4/10/13的卫星影像数据https://p2.map.gtimg.com/sateTiles/4/0/0/13_10.jpg?version=229
qq_4_10_13.jpg
使用cesiumjs进行验证，注意腾讯的行号方向是反的，需要使用{reverseY}替换
var custom = new Cesium.UrlTemplateImageryProvider({
url : 'https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297'
});
qq.png
显眼的太平洋.png
太平洋这仨字太丑了。
腾讯同样不提供前三级的数据
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 0 Level: 1.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 1 Level: 1.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 1 Level: 1.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 0 Level: 1.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 0 Level: 0.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 2 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 2 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 2 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 3 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 3 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 2 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 2 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 2 Y: 2 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 3 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 3 Y: 2 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 2 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 2 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 1 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 0 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 1 Y: 2 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 3 Level: 2.
An error occurred in "UrlTemplateImageryProvider": Failed to obtain image tile X: 0 Y: 2 Level: 2.
腾讯影像
影像的资源编码方式和叠加矢量层不同，如：
https://p2.map.gtimg.com/sateTiles/5/1/1/25_17.jpg?version=229
qq_5_1_1_25_17.jpg
这是中国南海的一块瓦片，包括越南和海南岛。
使用上方矢量的请求串，获取一下矢量https://rt3.map.gtimg.com/tile?z=5&x=25&y=17&styleid=2&version=297也是对应的，那么问题就来了，前面多出来的两个数字是干什么的。
另取一块高级别影像https://p3.map.gtimg.com/sateTiles/9/25/17/411_284.jpg?version=229
qq_9_25_17_411_284.jpg
根据码农的六感，我们可以察觉到前面的数字一定和存储组织有关，那么最简单的方式就是位运算了
| 10进制 | 25 | 17 | 411 | 284 |
|---|---|---|---|---|
| hex | 19 | 11 | 19B | 11C |
上面5级的也是如是计算，我们就知道相应的规则了。
{level}/{sx}/{sy}/{x}_{y}
下面就让球起飞吧。
var viewer = new Cesium.Viewer('cesiumContainer');
var base = new Cesium.UrlTemplateImageryProvider({
url : 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',
customTags : {
sx: function(imageryProvider, x, y, level) {
return x>>4;
},
sy:function(imageryProvider, x, y, level) {
return ((1<<level)-y)>>4;
}
}
});
viewer.imageryLayers.addImageryProvider(base);
var custom = new Cesium.UrlTemplateImageryProvider({
url : 'https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297'
});
viewer.imageryLayers.addImageryProvider(custom);
china.png
高德地图
矢量地图采用矢量瓦片形式存储，且通过websocket进行数据传输。
待续
网友评论