2 - ol3.13ex 149b - WMS Time 2

「wms-time.js（2149-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2149-ol3ex.js」

var startDate = new Date(Date.parse('2012-01-01T19:00:00Z'));
/** Date
 * 日付や時刻を扱うことが可能な、JavaScript の Date 
 * インスタンスを生成します。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Date]）
 */

/** Date.parse()
 * The Date.parse() method parses a string 
 * representation of a date, and returns the number 
 * of milliseconds since January 1, 1970, 00:00:00 
 * UTC or NaN if the string is unrecognised or 
 * contains illegal date values (e.g. 2015-02-31).
 * Date.parse（）メソッドは、日付の文字列表現を解析し、
 * 文字列が認識された場合、1970年1月1日00:00:00 UTC から
 * のミリ秒数を、または、不正な日付の値が含まれている場合、
 * NaN を返します（例えば2015-02-31）。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * JavaScript/Reference/Global_Objects/Date/parse]）
 */

var frameRate = 0.5; // frames per second
var animationId = null;

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）
  */

  source: new ol.source.MapQuest({layer: 'sat'})
  /** source:
   * Source for this layer. Required.（ol3 API）
   */

  /** ol.source.MapQuest
   * Layer source for the MapQuest tile server.
   * MapQuest タイルサーバのレイヤソース。（ol3 API
   * 2 - ol3ex 23b - MapQuest example 2 参照）
   */

 }),
 new ol.layer.Tile({

  extent: [-13884991, 2870341, -7455066, 6338219],
  /** extent:
   * The bounding extent for layer rendering. The 
   * layer will not be rendered outside of this 
   * extent.
   * レイヤのレンダリングのための境界範囲。レイヤがこの範囲
   * の外でレンダリングされません。（ol3 API）
   */

  source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
  /** ol.source.TileWMS
   * Layer source for tile data from WMS servers.
   * WMS サーバからのタイルデータのレイヤソース。
   * （ol3 API）
   */

  /** 「@type」 
   * 値のタイプ（型）の説明 - 式などで表示
   * （@use JSDoc[http://usejsdoc.org/]より）
   */

  url: 'http://oos.soest.hawaii.edu/thredds/wms/hioos/model/wav/ww3/' +
   'WaveWatch_III_Global_Wave_Model_best.ncd?',

  params: {'LAYERS': 'Thgt', 'TIME': startDate.toISOString()}
  /** params:
   * WMS request parameters. At least a LAYERS param 
   * is required. STYLES is '' by default. VERSION is 
   * 1.3.0 by default. WIDTH, HEIGHT, BBOX and CRS 
   * (SRS for WMS version < 1.3.0) will be set 
   * dynamically. Required.
   * WMSは、パラメータを要求します。少なくともLAYERS param 
   * が必要です。STYLE は、デフォルトで ''（空）です。 VERSION 
   * は、デフォルトで 1.3.0 です。WIDTH、HIGHT、BOX と CRS
   * （SRS は WMSバージョン 1.3.0 以下）は、動的に設定されます。
   * 必須。（ol3 API）
   */

  /** Date.prototype.toISOString()
   * The toISOString() method returns a string in 
   * simplified extended ISO format (ISO 8601), which is 
   * always 24 characters long: YYYY-MM-DDTHH:mm:ss.sssZ. 
   * The timezone is always zero UTC offset, as denoted 
   * by the suffix "Z".
   *  toString（）メソッドは、常に24文字の長さの 
   * YYYY-MM-DDTHH：MM：ss.sssZ 拡張ISOフォーマット（ISO8601）
   * で 簡素化された文字列を返します。サフィックス「Z」によって示され
   * るように、タイムゾーンは、常にゼロ UTC オフセットです。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Date/toISOString]）
   */

  }))
 })
];
var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View({
  center: [-10997148, 4569099],
  zoom: 4
 })
});

var updateInfo = function() {
 var el = document.getElementById('info');
 el.innerHTML = startDate.toISOString();
};

var setTime = function() {

 startDate.setHours(startDate.getHours() + 1);
 /** Date.prototype.setHours()
  * The setHours() method sets the hours for a specified 
  * date according to local time, and returns the number 
  * of milliseconds since 1 January 1970 00:00:00 UTC 
  * until the time represented by the updated Date 
  * instance.
  * getHours（）メソッドは、ローカル時間に基づき、指定された日時の
  * 時間を設定し、そして、更新された Date インスタンスで表される時
  * 間まで、1970年1月1日 00:00:00 UTC からのミリ秒数を返します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/setHours]）
  */

 /** Date.prototype.getHours()
  * ローカル時間に基づき、指定された日時の「時」を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/getHours]）
  */

 layers[1].getSource().updateParams({'TIME': startDate.toISOString()});
 /** getSource()
  * Return the associated tilesource of the the layer.
  * タイルレイヤの関連するタイルソースを返します。（ol3 API）
  */

 /** updateParams(params)
  * Update the user-provided params.
  * ユーザ提供パラメータを更新します。（ol3 API）
  */

 updateInfo();
};

var stop = function() {
 if (animationId !== null) {

  window.clearInterval(animationId);
  /** WindowTimers.clearInterval()
   * Cancels repeated action which was set up using 
   * setInterval.
   * setInterval を使用して設定された繰り返し動作をキャンセ
   * ルします。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * API/WindowTimers/clearInterval]）
   */

  animationId = null;
 }
};

var play = function() {
 stop();

 animationId = window.setInterval(setTime, 1000 / frameRate);
 /** WindowTimers.setInterval()
  * Repeatedly calls a function or executes a code 
  * snippet, with a fixed time delay between each call. 
  * Returns an intervalID.
  * 各呼び出しの間に一定の時間遅延で、繰り返し関数を呼び出すか、
  * コードスニペットを実行します。 intervalID を返します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/WindowTimers/setInterval]）
  */

};

var startButton = document.getElementById('play');

startButton.addEventListener('click', play, false);
/** EventTarget.addEventListener
 * addEventListener は、 1 つのイベントターゲットにイベント 
 * リスナーを1つ登録します。イベントターゲットは、ドキュメント
 * 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
 * XMLHttpRequest です。
 *（MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * EventTarget.addEventListener]）
 */

var stopButton = document.getElementById('pause');
stopButton.addEventListener('click', stop, false);

updateInfo();