「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);
0 件のコメント:
コメントを投稿