百度

目前百度在网页版仍然使用地图瓦片，空间参考为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

上面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进行数据传输。这类数据由于格式非公开，我们很难使用，就算将格式公开也需要大量额外工作才能将矢量描述转化为图片输出，因此我们跳过不处理。
我们还是看一下它的卫星图模式。
查看其中的一块海口市的图片 https://webst02.is.autonavi.com/appmaptile?style=6&x=3302&y=1815&z=12

12_1815_3302.jpg

可以看到其地址中使用的是标准的x/y/z指定的瓦片，参考上节，我们可以看到通过UrlTemplateImageryProvider可以直接访问它的数据。

var base = new Cesium.UrlTemplateImageryProvider({
    url : 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
});
//viewer.imageryLayers.addImageryProvider(base);

var viewer = new Cesium.Viewer('cesiumContainer',{
    imageryProvider:base
});



var road = new Cesium.UrlTemplateImageryProvider({
    url : 'https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11'
});

viewer.imageryLayers.addImageryProvider(road);

可以通过https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11增加道路层，但是这层里面与腾讯不同，没有文字注记。

可以看到南北极高德的数据比腾讯良心多了。

amap.png

在线示例

示完待续