「animation.js（268-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
「268-ol3ex.js」
// from https://github.com/DmitryBaranovskiy/raphael
function bounce(t) {
var s = 7.5625, p = 2.75, l;
if (t < (1 / p)) {
l = s * t * t;
} else {
if (t < (2 / p)) {
t -= (1.5 / p);
l = s * t * t + 0.75;
} else {
if (t < (2.5 / p)) {
t -= (2.25 / p);
l = s * t * t + 0.9375;
} else {
t -= (2.625 / p);
l = s * t * t + 0.984375;
}
}
}
return l;
}
// from https://github.com/DmitryBaranovskiy/raphael
function elastic(t) {
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
/** Math.pow(base, exponent)
* base を exponent 乗した値、つまり、base^exponent の値を返
* します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/pow]）
*/
/** Math.sin()
* 引数として与えた数のサイン（正弦）を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/sin]）
*/
/** Math.PI()
* 円周率。約 3.14159 です。
* （MDN[https://developer.mozilla.org/ja/docs/Web
* /JavaScript/Reference/Global_Objects/Math/PI]）
*/
}
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
/** 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）
*/
var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
// the view's initial state
center: istanbul,
zoom: 6
});
var map = new ol.Map({
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）
*/
preload: 4,
/** preload:
* Preload. Load low-resolution tiles up to
* preload levels. By default preload is 0,
* which means no preloading.
* プリロード。プリロードレベルに至るまで低解像度の
* タイルをロードします。デフォルトはプリロード 0 で、
* プレロードがないことを意味します。（ol3 API）
*/
source: new ol.source.OSM()
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
*/
})
],
renderer: exampleNS.getRendererFromQueryString(),
/** 'example-behavior.js' により URL にある renderer を返します */
/** Improve user experience by loading tiles while
* animating. Will make animations stutter on mobile
* or slow devices.
* アニメーション化しながらタイルをロードすることによりユーザ
* エクスペリエンスを向上させます。アニメーションは、モバイル
* または低速デバイス上で途切れ途切れになります。
*/
loadTilesWhileAnimating: true,
/** loadTilesWhileAnimating:
* When set to true, tiles will be loaded during
* animations. This may improve the user experience,
* but can also make animations stutter on devices
* with slow memory. Default is `false`.
* true に設定すると、タイルは、アニメーションの間にに
* ロードされます。これは、ユーザーエクスペリエンスを向
* 上させることだけでなく、アニメーションが遅いメモリを
* 搭載したデバイス上で途切れ途切れにすることができます。
* デフォルトは `false` です。（ol3/extents/olx）
*/
target: 'map',
controls: ol.control.defaults({
/** controls
* Controls initially added to the map.
* If not specified, ol.control.defaults() is used.
* 初期設定で、マップに追加されたコントロール。
* 明示されていなければ、ol.control.defaults() が使用されます。
* （ol3 API）
*/
/** ol.control.defaults()
* デフォルトでは、マップに含まコントロールのセット。
* 特に設定しない限り、これは、以下の各コントロールの
* インスタンスを含むコレクションを返します。(ol3 API）
* ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
*/
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
collapsible: false // 折りたたみ
})
}),
view: view
});
var rotateLeft = document.getElementById('rotate-left');
rotateLeft.addEventListener('click', function() {
/** EventTarget.addEventListener
* addEventListener は、 1 つのイベントターゲットにイベント
* リスナーを1 つ登録します。イベントターゲットは、ドキュメント
* 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
* XMLHttpRequest です。
*（MDN[https://developer.mozilla.org/ja/docs/Web/API/
* EventTarget.addEventListener]）
*/
var rotateLeft = ol.animation.rotate({
/** ol.animation
* The animation static methods are designed to be
* used with the ol.Map#beforeRender method.
* アニメーション静的メソッドは ol.Map＃beforeRender
* メソッドで使用するように設計されています。（使用例は
* ol3 API を参照してください。メソッドについては
* 「Stable Only」のチェックを外すと表示されます。 ）
*/
duration: 2000,
/** duration:
* The duration of the animation in milliseconds.
* Default is 1000.
* ミリ秒単位のアニメーションの継続時間。デフォルトは、1000。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
rotation: -4 * Math.PI
/** rotation:
* The rotation value (in radians) to begin
* rotating from, typically
* map.getView().getRotation().
* If undefined then 0 is assumed.
* 一般的に、 map.getView（）。getRotation（）から
* 回転を開始しする（ラジアン）回転値。定義されていなけ
* れば、0 が仮定されています。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** Math.PI
* 円周率。約 3.14159 です。
* （MDN[https://developer.mozilla.org/ja/docs/Web
* /JavaScript/Reference/Global_Objects/Math/PI]）
*/
});
map.beforeRender(rotateLeft);
/** beforeRender()
* Add functions to be called before rendering.
* This can be used for attaching animations before
* updating the map's view. The ol.animation
* namespace provides several static methods for
* creating prerender functions.
* レンダリングの前に呼び出される関数を追加します。これは、
* マップのビューを更新する前にアニメーションを取り付ける
* ために使用することができます。 ol.animation名前空間は、
* 事前レンダリング機能を作成するためのいくつかの静的メソッ
* ドを提供します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
}, false);
var rotateRight = document.getElementById('rotate-right');
rotateRight.addEventListener('click', function() {
var rotateRight = ol.animation.rotate({
duration: 2000,
rotation: 4 * Math.PI
});
map.beforeRender(rotateRight);
}, false);
var rotateAroundRome = document.getElementById('rotate-around-rome');
rotateAroundRome.addEventListener('click', function() {
var currentRotation = view.getRotation();
/** getRotation()
* Returns: The rotation of the view.（ol3 API）
*/
var rotateAroundRome = ol.animation.rotate({
anchor: rome,
/** anchor:
* The rotation center/anchor. The map rotates
* around the center of the view if unspecified.
* 回転の中心/アンカー。マップが指定されていない場合、
* ビューの中央を中心に回転します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
duration: 1000,
rotation: currentRotation
});
map.beforeRender(rotateAroundRome);
view.rotate(currentRotation + (Math.PI / 2), rome);
}, false);
var panToLondon = document.getElementById('pan-to-london');
panToLondon.addEventListener('click', function() {
var pan = ol.animation.pan({
duration: 2000,
source: /** @type {ol.Coordinate} */ (view.getCenter())
/** source:
* The location to start panning from, typically
* map.getView().getCenter().
* 一般的に、 map.getView（）。getCenter（）から
* 移動を開始しする位置。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
/** getCenter()
* Return: The center of the view.（ol3 API）
*/
});
map.beforeRender(pan);
view.setCenter(london);
/** setCenter()
* Set the center of the current view.
* 現在のビューの中心を設定します。（ol3 API）
*/
}, false);
var elasticToMoscow = document.getElementById('elastic-to-moscow');
elasticToMoscow.addEventListener('click', function() {
var pan = ol.animation.pan({
duration: 2000,
easing: elastic,
/** easing:
* The easing function to use. Can be an ol.
* easing or a custom function. Default is
* ol.easing.inAndOut.
* 使用するためのイージング関数。 ol.easing またはカス
* タム関数とすることができる。デフォルトは
* ol.easing.inAndOut です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
source: /** @type {ol.Coordinate} */ (view.getCenter())
});
map.beforeRender(pan);
view.setCenter(moscow);
}, false);
var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
bounceToIstanbul.addEventListener('click', function() {
var pan = ol.animation.pan({
duration: 2000,
easing: bounce,
source: /** @type {ol.Coordinate} */ (view.getCenter())
});
map.beforeRender(pan);
view.setCenter(istanbul);
}, false);
var spinToRome = document.getElementById('spin-to-rome');
spinToRome.addEventListener('click', function() {
var duration = 2000;
var start = +new Date();
/** Date
* 日付や時刻を扱うことが可能な、JavaScript の Date
* インスタンスを生成します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Date]）
*/
var pan = ol.animation.pan({
duration: duration,
source: /** @type {ol.Coordinate} */ (view.getCenter()),
start: start
/** start:
* The start time of the animation. Default is
* immediately.
* アニメーションの開始時刻。デフォルトは直後にです。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
});
var rotate = ol.animation.rotate({
duration: duration,
rotation: 2 * Math.PI,
start: start
});
map.beforeRender(pan, rotate);
view.setCenter(rome);
}, false);
var flyToBern = document.getElementById('fly-to-bern');
flyToBern.addEventListener('click', function() {
var duration = 2000;
var start = +new Date();
var pan = ol.animation.pan({
duration: duration,
source: /** @type {ol.Coordinate} */ (view.getCenter()),
start: start
});
var bounce = ol.animation.bounce({
duration: duration,
resolution: 4 * view.getResolution(),
/** resolution:
* The resolution to start the bounce from,
* typically map.getView().getResolution().
* 一般的に、 map.getView（）。getResolution（）から
* バウンス（跳ねる）を開始しする解像度。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** getResolution()
* Return: The resolution of the view.
* view（ビュー）の解像度を返します。（ol3 API）
*/
start: start
});
map.beforeRender(pan, bounce);
view.setCenter(bern);
}, false);
var spiralToMadrid = document.getElementById('spiral-to-madrid');
spiralToMadrid.addEventListener('click', function() {
var duration = 2000;
var start = +new Date();
var pan = ol.animation.pan({
duration: duration,
source: /** @type {ol.Coordinate} */ (view.getCenter()),
start: start
});
var bounce = ol.animation.bounce({
duration: duration,
resolution: 2 * view.getResolution(),
start: start
});
var rotate = ol.animation.rotate({
duration: duration,
rotation: -4 * Math.PI,
start: start
});
map.beforeRender(pan, bounce, rotate);
view.setCenter(madrid);
}, false);
