2 - ol3ex 7b - Bing Maps example 2

「bing-maps.js（207-ol3ex.js）」は、地図を表示するのに必要な javascript です。
「207-ol3ex.js」

// Bing Maps で用意されている地図スタイル
var styles = [
 'Road',
 'Aerial',
 'AerialWithLabels',
 'collinsBart',
 'ordnanceSurvey'
];
var layers = [];
var i, ii;

for (i = 0, ii = styles.length; i < ii; ++i) {
 layers.push(new ol.layer.Tile({
 /** push(elem)
  * Insert the provided element at the end of the 
  * collection.
  * コレクションの最後に供給されたエレメントに挿入します。
  * Name: elem, Type: T, Description: Element
  * （ol3 API）
  */
 /** ol.layer.Tile 
  * For layer sources that provide pre-rendered, tiled images 
  * in grids that are organized by zoom levels for specific 
  * resolutions. 
  * プリレンダリング（事前描画）を提供するレイヤソースのための、
  * 特定の解像度でのズームレベルによって編成されているグリッドの
  * タイルイメージ。（ol3 API）
  */
  visible: false, // 表示・非表示
  preload: Infinity, // 事前読込
  source: new ol.source.BingMaps({
   key: 'Ak-dzM4w...', // 省略してあります
   imagerySet: styles[i] // 画像タイプ
  })
 }));
}

var map = new ol.Map({
 layers: layers,
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
// center: [-6655.5402445057125, 6709968.258934638],
  center: [15520720, 4257706],
// zoom: 13
  zoom: 10
 })
});

$('#layer-select').change(function() {
/** .change(handler)
 * Bind an event handler to the "change" JavaScript event, or 
 * trigger that event on an element.
 * 「change」JavaScript イベントにイベントハンドラをバインド、ま
 * たは、要素についてそのイベントをトリガします。
 * （jQuery[https://api.jquery.com/change/]）
 */
 // 選択されたスタイルを検索し属性を返します
 // （初期値は 'Aerial with labels'）
 var style = $(this).find(':selected').val();
 /** .find(selector)
  * Get the descendants of each element in the current set of 
  * matched elements, filtered by a selector, jQuery object, 
  * or element.
  * セレクタによるフィルタリングで、マッチした要素、または、
  * jQueryオブジェクト、要素の現在のセット中の各要素の子孫要素
  * を取得します。（jQuery[https://api.jquery.com/find/]）
  */
 /** .val()
  * Get the current value of the first element in the set of 
  * matched elements or set the value of every matched 
  * element.
  * マッチした要素のセットの最初の要素の現在の値を取得、または、
  * すべての一致した要素の値を設定します。
  * （jQuery[https://api.jquery.com/val/]）
  */
 var i, ii;
 for (i = 0, ii = layers.length; i < ii; ++i) {
  layers[i].setVisible(styles[i] == style);
  /** setVisible(visible)
   * Name: visible, Type: boolean, 
   * Description: The visibility of the layer.
   */
 }
});

$('#layer-select').trigger('change');
/**.trigger(eventType [,extraParameters]
 * Execute all handlers and behaviors attached to the 
 * matched elements for the given event type.
 * 指定されたイベントタイプにマッチした要素に接続されているすべ
 * てのハンドラや動作を実行します。
 * （jQuery[https://api.jquery.com/trigger/]）
 */

日本付近は、「Collins Bart」と「Ordnance Survey」のデータがないので表示されません。