SuperMap iClient3D for WebGL教程（影像篇）-Bing Maps

作者：为梦齐舞

本文同步更新于简书文章https://www.jianshu.com/p/150079d21fd9

SuperMap iClient3D for WebGL支持多种服务来源的高精度影像地图服务的加载和渲染，本文将一起来学习下使用BingMaps。

一、认识BingMapsImageryProvider，从图1来看下使用BingMaps的一些参数，其中比较重要的为url、key、mapstyle

二、 参数介绍及设置

1、url：Bing Maps服务url，必设属性，一般设置为https://dev.virtualearth.net。

2、key：Bing Maps的密钥key值，可以在https://www.bingmapsportal.com/中创建账号和项目有获得key，如下图2所示

3、mapStyle：BingMaps的地图风格参数，常用风格有航拍影像（AERIAL）、影像与道路标签（AERIAL_WITH_LABELS）、黑色道路地图（CANVAS_DARK）、灰色道路地图（CANVAS_GRAY）、亮色道路地图（CANVAS_LIGHT）、道路地图（ROAD）

AERIAL

AERIAL_WITH_LABELS

CANVAS_DARK

CANVAS_GRAY

CANVAS_LIGHT

ROAD

4、culture：请求Bing地图图像时需要的语言格式，但是测试此参数设置无效，默认选项为“en-US”，设置“zh-Hans”无效，应该是Cesium的一个bug。具体可以参考http://msdn.microsoft.com/en-us/library/hh441729.aspx。

5、proxy：请求服务的代理服务器，一般用来解决跨域问题，当创建一个影像Provider的时候，填充proxy属性。Cesium包含一个简单的代理服务器 ，基于Node.js，方便大家开发调试。

三、使用方法

我可以使用两种方式添加Bing Maps地图：初始化viewer时或者使用addImageryProvider进行添加。

1、初始化时添加,直接设置imageryProvider参数。

var viewer = new Cesium.Viewer('cesiumContainer', {

    imageryProvider: new Cesium.BingMapsImageryProvider({

    url: 'https://dev.virtualearth.net',

    mapStyle: Cesium.BingMapsStyle.ROAD,

    key: "密钥",

})

});

2、初始化viewer后使用addImageryProvider添加

viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({

    url: 'https://dev.virtualearth.net',

    mapStyle: Cesium.BingMapsStyle.ROAD,

    key: "密钥"

}));

四、展示效果