2 - ol3.3ex 80b - Tile load events example 2

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

「280-ol3ex.js」

/**
 * Renders a progress bar.
 * @param {Element} el The target element.
 * @constructor
 */

/** 「@param」
 * The @param tag provides the name, type, and 
 * description of a function parameter.
 * The @param tag requires you to specify the name of 
 * the parameter you are documenting. You can also 
 * include the parameter's type, enclosed in curly 
 * brackets, and a description of the parameter.
 * @paramタグは、関数パラメータの名前と型、説明を提供します。
 * @paramタグを使用すると、文書化されたパラメータの名前を
 * 指定する必要があります。また、パラメータのタイプと、中括弧
 * で囲まれたおよびパラメータの説明を含めることができます。
 * （@use JSDoc [http://usejsdoc.org/tags-param.html]）
 */

/** 「@constructor（@class と同義）」
 * The @class tag marks a function as being a 
 * constructor, meant to be called with the new 
 * keyword to return an instance.
 * @classタグは、インスタンスを返すために、新しいキーワードで
 * 呼び出されることを意図し、コンストラクタとして function を
 * マークします。
 * （@use JSDoc [http://usejsdoc.org/tags-class.html]）
 */

function Progress(el) {
 this.el = el;
 this.loading = 0;
 this.loaded = 0;
}

/**
 * Increment the count of loading tiles.
 * ローディングするタイルのカウントをインクリメント（増や）
 * します。
 */

Progress.prototype.addLoading = function() {
/** Object.prototype
 * The Object.prototype property represents the 
 * Object prototype object.
 * Object.prototype プロパティは、Object プロパティ
 * オブジェクトを表します。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * JavaScript/Reference/Global_Objects/Object/prototype]）
 */

 if (this.loading === 0) {
  this.show();
 }
 ++this.loading;
 this.update();
};

/**
 * Increment the count of loaded tiles.
 * ローディングしたタイルのカウントをインクリメント（増や）
 * します。
 */
Progress.prototype.addLoaded = function() {

 setTimeout(function() {
 /** setTimeout(func, dylay)
  * 指定された遅延の後に、コードの断片または関数を実行します。
  * func : delay ミリ秒後に実行したい関数。
  * delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/Window/setTimeout]）
  */

  ++this.loaded;
  this.update();

 }.bind(this), 100);
 /** Function.prototype.bind()
  * bind() メソッドは、呼び出された時に新しい関数を生成しま
  * す。最初の引数  thisArg は新しい関数の this キーワード
  * にセットされます。2 個目以降の引数は、新しい関数より前に、
  * ターゲット関数の引数として与えられます。
  * （下記ページ内「setTimeout とともに」も参照してください。）
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Function/bind]）
  */

};

/**
 * Update the progress bar.
 * プログレスバーを更新します。
 */
Progress.prototype.update = function() {

 var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
 /** Number.prototype.toFixed()
  * The toFixed() method formats a number using 
  * fixed-point notation.
  * toFixed() メソッドは、固定小数点表記を使用して数値を
  * フォーマットします。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Number/toFixed]）
  */

 this.el.style.width = width;
 if (this.loading === this.loaded) {
  this.loading = 0;
  this.loaded = 0;
  setTimeout(this.hide.bind(this), 500);
 }
};

/**
 * Show the progress bar.
 * プログレスバーを表示します。
 */
Progress.prototype.show = function() {
 this.el.style.visibility = 'visible';
};

/**
 * Hide the progress bar.
 * プログレスバーを非表示にします。
 */
Progress.prototype.hide = function() {
 if (this.loading === this.loaded) {
  this.el.style.visibility = 'hidden';
  this.el.style.width = 0;
 }
};

var progress = new Progress(document.getElementById('progress'));

var source = new ol.source.TileJSON({
/** ol.source.TileJSON 
 * Layer source for tile data in TileJSON format.
 * TileJSON フォーマットのタイルデータのためのレイヤソース。
 *（ol3 API）
 */

 url: 'http://api.tiles.mapbox.com/v3/mapbox.world-bright.jsonp',

 crossOrigin: 'anonymous'
 /** crossOrigin
  * The crossOrigin attribute for loaded images. Note 
  * that you must provide a crossOrigin value if you 
  * are using the WebGL renderer or if you want to 
  * access pixel data with the Canvas renderer. See 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image for more detail.
  * ロードされたイメージの crossOrigin属性。WebGLのレンダラー
  * を使用している場合、または、キャンバスレンダラでピクセルデー
  * タにアクセスする場合、crossOrigin 値を提供なければならない
  * ことに注意してください。詳細は 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image を参照してください。（ol3 API）
  */

});

source.on('tileloadstart', function(event) {
/** on()
 * Listen for a certain type of event.
 * Return:     Unique key for the listener.
 * （ol3 API）
 */

 progress.addLoading();
});

source.on('tileloadend', function(event) {
 progress.addLoaded();
});
source.on('tileloaderror', function(event) {
 progress.addLoaded();
});

var map = new ol.Map({
 logo: false,
 layers: [

  new ol.layer.Tile({source: source})
  /** 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）
   */
 ],

 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します

 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});