SuperMap iClient3D for WebGL扩展开发教程——对接Bing中文地图

通常用BingMapsImageryProvider加载出来的Bing地图都是英文的，也没法设置参数去设置，下面就来手动对接下。

1、Bing地图瓦片体系

想要在三维球上对接一个瓦片服务，首先需要了解的就是这个服务的瓦片组织的规则，Bing地图的瓦片体系比较特殊，下面来一张结构图。

bing地图瓦片体系.png

通过上面的结构图可以发现，Bing地图的瓦片是基于web墨卡托的全球剖分，四叉树结构，在某一层级，瓦片的编码的组织规则为：末尾编码分别是从0到3，再加前面层级所有层级的编码。

2、计算编码

有了前面对Bing地图瓦片的认识，这里的核心就是如何将WebGL球上的瓦片请求行列换，换算为Bing地图瓦片编码，下面来看核心代码：

function(imageryProvider, x, y, level) {
    let bingc = "";
    let cx = x;
    let cy = y;
    for (let i = level; i > 0; i--) {

        let Cvalue = 2 * (cy % 2) + cx % 2
        bingc = Cvalue + bingc

        cx = parseInt(cx / 2);
        cy = parseInt(cy / 2);
    }
    return bingc;
}

这里通过一个倒序的循环的算法来计算对应的Bing地图瓦片编码。

3、拼接请求

let BingmapLayerProvider = new Cesium.UrlTemplateImageryProvider({
            url: "https://dynamic.t0.tiles.ditu.live.com/comp/ch/{c}?it=G,TW,L,LA&mkt=zh-cn&og=109&cstl=w4c&ur=CN&n=z",
            // minimumLevel: minlevel || 0,
            // maximumLevel: maxlevel || 22,
            tilingScheme: new Cesium.WebMercatorTilingScheme(),
            customTags: {
                c: function(imageryProvider, x, y, level) {
                    let bingc="";
                    let cx=x;
                    let cy=y;
                    for(let i=level;i>0;i--){

                            let Cvalue=2*(cy%2)+cx%2
                            bingc=Cvalue+bingc
                            
                            cx=parseInt(cx/2);
                            cy=parseInt(cy/2);
                    }
                    return bingc;
                }
            }
        
});
        
let layer = viewer.imageryLayers.addImageryProvider(BingmapLayerProvider);

参数说明：
是否带标注：it=G,TW,L,LA G,TW,L G,TW,RL
语言设置： mkt=zh-cn，en-US

加载效果