2 - ol3-beta.5ex 8b - Bing Maps example 2

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

「208-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({ // Array.push 配列の最後に値を追加
  visible: false, // 表示・非表示
  preload: Infinity, // 事前読込
  source: new ol.source.BingMaps({
   key: 'Ak-dzM4w...', // 省略してあります
   imagerySet: styles[i] // 画像タイプ
  })
 }));
}

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

$('#layer-select').change(function() { // jQuery change イベント
 // 選択されたスタイルを検索し属性を返します（初期値は 'Aerial with labels'）
 var style = $(this).find(':selected').val();
 var i, ii;
 for (i = 0, ii = layers.length; i < ii; ++i) {
  layers[i].setVisible(styles[i] == style);
 }
});

$('#layer-select').trigger('change');　// jQuery trigger イベント