2 - ol3ex 15b - Select features example 2

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

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

var vector = new ol.layer.Vector({
/** ol.layer.Vector 
 * Vector data that is rendered client-side. Note that any 
 * property set in the options is set as a ol.Object property
 * on the layer object; for example, setting title: 'My 
 * Title' in the options means that title is observable, and 
 * has get/set accessors.
 * クライアント側で描画されたベクタデータ。オプションで設定した任
 * 意のプロパティは、レイヤオブジェクトで ol.Object プロパティ
 * として設定されていることに注意してください。たとえば、オプショ
 * ンで、title：'My Title' を設定することは、タイトルは 
 * observable で、アクセサを取得/設定することを意味します。
 * （ol3 API）
 */
 source: new ol.source.GeoJSON({
 /** ol.source.GeoJSON 
  * Static vector source in GeoJSON format
  * GeoJSON フォーマットの静的ベクタソース。（ol3 API）
  */
  projection: 'EPSG:3857',
//url: 'data/geojson/countries.geojson'
  url: 'v3.0.0/examples/data/geojson/countries.geojson'
 })
});

var map = new ol.Map({
 layers: [raster, vector],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

var select = null;  // ref to currently selected interaction

// select interaction working on "singleclick"
var selectSingleClick = new ol.interaction.Select();
/** ol.interaction.Select 
 * Handles selection of vector data. A 
 * ol.FeatureOverlay is maintained internally to 
 * store the selected feature(s). Which features 
 * are selected is determined by the condition 
 * option, and optionally the toggle or add/remove 
 * options.
 * ベクタデータの選択を処理します。 ol.FeatureOverlay 
 * は、選択したフィーチャを格納するために内部的に維持され
 * ています。選択されているどのフィーチャでも条件オプショ
 * ン、そして部分的にトグルまたは追加/削除オプションによっ
 * て決定されます。（ol3 API）
 */

// select interaction working on "click"
var selectClick = new ol.interaction.Select({
 condition: ol.events.condition.click
 /** ol.events.condition.click(mapBrowserEvent)
  * Name: mapBrowserEvent, Type: ol.MapBrowserEvent,
  * Description: Map browser event.（ol3 API）
  */
});

// select interaction working on "mousemove"
var selectMouseMove = new ol.interaction.Select({
 condition: ol.events.condition.mouseMove
 /** ol.events.condition.mouseMove(mapBrowserEvent)
  * Name: mapBrowserEvent, Type: ol.MapBrowserEvent,
  * Description: Map browser event.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  * （v3.3.0 以降 ol.events.condition.pointerMove 
  * に変更されています。）
  */
});

var selectElement = document.getElementById('type');

var changeInteraction = function() {
 if (select !== null) {
  map.removeInteraction(select);
 /** removeInteraction(()
  * Remove the given interaction from the map.
  * マップから与えられたインターラクションを削除します。
  * （ol3 API）
  */
  }
 var value = selectElement.value;
 if (value == 'singleclick') {
  select = selectSingleClick;
 } else if (value == 'click') {
  select = selectClick;
 } else if (value == 'mousemove') {
  select = selectMouseMove;
 } else {
  select = null;
 }
 if (select !== null) {
  map.addInteraction(select);
  /** addInteraction(()
   * add the given interaction to the map.
   * マップへ与えられたインターラクションを追加します。
   * （ol3 API）
   */
 }
};

/**
 * onchange callback on the select element.
 */
selectElement.onchange = changeInteraction;
/** GlobalEventHandlers.onchange()
 * The onchange property sets and returns the event handler 
 * for the change event.
 * onchange プロパティは、change イベントに対してイベントハ
 * ンドラを設定、および、返します。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/GlobalEventHandlers/onchange]）
 */
changeInteraction();