2 - ol3ex 23b - MapQuest example 2

「mapquest.js（223-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
「MapQuest（http://wiki.openstreetmap.org/wiki/MapQuest）」に、次のようにあります。
MapQuest is an online mapping company based in the United States and is wholly-owned by AOL.
MapQuest は、米国に拠点を置くオンライン地図会社であり、AOLに完全所有されています。
MapQuest is one of the pioneers in online mapping and holds a significant market share in the U.S.
MapQuest は、オンラインマッピングの先駆者の一つであり、米国で大きな市場シェアを保持しています。
During the State Of The Map 2010, the company announced their support for OpenStreetMap making MapQuest the first large online mapping service to embrace OSM.
State Of The Map 2010 の期間に、同社は MapQuest を、OpenStreetMap を採用した最初の大規模なオンラインマッピングサービスにするために、OSM に対するサポートを発表しました。

また、「mapquest company（http://company.mapquest.com/）」には、次のようにあります。
Welcome to MapQuest.
MapQuest, Inc. offers online, mobile, business and developer solutions that help people discover and explore where they would like to go, how to get there and what to do along the way and at your destination.
MapQuest 社は、道中や目的地について、行きたい場所、そこに着く方法、行うことを発見し、探る手助けをするオンライン、モバイル、ビジネスおよび開発ソリューションを提供しています。

Building on the core premise of providing accurate maps and directions to millions of people everyday, MapQuest.com is committed to making it easy for you to find local information, create your trips or journeys and customize, personalize and share them with others.
毎日、何百万人もの人に正確な地 図と方向を提供することを前提にしたコアを再構築するために、MapQuest.comは、簡単にローカル情報を検索し、日帰りや長期の旅行を作成し、そ してそれらを、カスタマイズし、パーソナライズし、他の人と共有できるように取り組んでいます。

ライセンスについて は、「mapquest developer」の「Licensed Data vs. Open Data（http://developer.mapquest.com/web/tools/getting-started/platform /licensed-vs-open）」を参照してください。

「223-ol3ex.js」

var layers = [
 new ol.layer.Tile({
 /** 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）
  */
  style: 'Road',
  source: new ol.source.MapQuest({layer: 'osm'})
  /** ol.source.MapQuest
   * Layer source for the MapQuest tile server.
   * MapQuest タイルサーバのレイヤソース。（ol3 API
   * 2 - ol3ex 23b - MapQuest example 2 参照）
   */
  // Source for this layer.（このレイヤのソース。ol3 API）
 }),

 new ol.layer.Tile({
  style: 'Aerial',
  visible: false,
  // Visibility. Default is true （表示。ol3 API）
  source: new ol.source.MapQuest({layer: 'sat'})
 }),

 new ol.layer.Group({

 /** ol.layer.Group
  * A ol.Collection of layers that are handled together.
  * 同時に扱うレイヤの ol.Collection（ol3 API）
  */

 /** ol.Collection
  * An expanded version of standard JS Array, adding 
  * convenience methods for manipulation. Add and remove 
  * changes to the Collection trigger a Collection event. 
  * Note that this does not cover changes to the objects 
  * within the Collection; they trigger events on the 
  * appropriate object, not on the Collection as a whole.
  * 操作のための便利なメソッドを追加する、標準JSアレイの拡張バー
  * ジョン。コレクションイベントをトリガするコレクションの変更の
  * 追加と削除をします。これはコレクション内のオブジェクトへの変
  * 更に及ばないことに注意してください。コレクション全体としてで
  * はなく、適切なオブジェクトにイベントをトリガします。
  * Because a Collection is itself an ol.Object, it can 
  * be bound to any other Object or Collection such 
  * that a change in one will automatically be reflected 
  * in the other.
  * コレクションは、ol.Object そのものであるため、ある変化が自
  * 動的に他方に反映されるように、他のオブジェクトまたはコレク
  * ションに結合させることができます。
  * （ol3 API）
  */

  style: 'AerialWithLabels',
  visible: false,
  layers: [
   new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
   }),
   new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'hyb'})
   })
  ]
 })
];

var map = new ol.Map({
 layers: layers,
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: ol.proj.transform(
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します（オリジナルを変更しません）。（ol3 API）
   */
// [-73.979378, 40.702222], 'EPSG:4326', 'EPSG:3857'),
   [139.42, 35.68], 'EPSG:4326', 'EPSG:3857'),//東京周辺に修正
  zoom: 9
 })
});

// リストから選んだスタイルに変更するコード
$('#layer-select').change(function() {
// 223-ol3ex.html の select タグの id
/** .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/]）
 */
 var style = $(this).find(':selected').val();
 // 223-ol3ex.html の select タグで挟まれた option タグの要素
 （初期表示）
 /** .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].set('visible', (layers[i].get('style') == style));
  //layers（配列）から合った ol.layer.* のオプション（visible, 
  //style）に変更
  /** set(key, value) 
   * Sets a value.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */
  /** get(key)
   * Gets a value.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */
 }
});

$('#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/]）
 */