美文网首页CesiumGeomatics(GIS,GPS,RS,Surveying)开源
基于cesium的百度、腾讯、高德数据访问

基于cesium的百度、腾讯、高德数据访问

作者: 清洼 | 来源:发表于2018-08-18 17:30 被阅读9次

    百度

    目前百度在网页版仍然使用地图瓦片,空间参考为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进行数据传输。
    待续

    相关文章

      网友评论

        本文标题:基于cesium的百度、腾讯、高德数据访问

        本文链接:https://www.haomeiwen.com/subject/vpyfiftx.html