「2102-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.ImageWMS({
/** ol.source.ImageWMS
* Source for WMS servers providing single, untiled
* images.
* 単一の、タイル状でない画像を提供する WMS サーバソース。
* （ol3 API）
*/
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'topp:states'},
serverType: 'geoserver'
});
source.on('imageloadstart', function(event) {
progress.addLoading();
});
source.on('imageloadend', function(event) {
/** on()
* Listen for a certain type of event.
* Return: Unique key for the listener.
* （ol3 API）
*/
progress.addLoaded();
});
source.on('imageloaderror', function(event) {
progress.addLoaded();
});
var map = new ol.Map({
logo: false,
layers: [
new ol.layer.Image({source: source})
],
renderer: exampleNS.getRendererFromQueryString(), // 'example-behavior.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
});
