「2134-ol3ex.js」
// This long string is placed here due to jsFiddle // limitations. It is usually loaded with AJAX. // この長い文字列は、jsFiddleの制限が原因でここに置かれています。 // これは通常、Ajaxを使ってロードされます。
var polyline = [ （省略）
].join('');
/** Array.prototype.join()
* join() メソッドは、配列のすべての要素を繋いで文字列にします。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/join]）
*/
var route = /** @type {ol.geom.LineString} */ (new ol.format.Polyline({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
/** ol.format.Polyline * Feature format for reading and writing data in the * Encoded Polyline Algorithm Format. * Encoded Polyline Algorithm Format でデータを読み書きす * るためのフィーチャフォーマット。 * （ol3 API） */
factor: 1e6 /** factor * The factor by which the coordinates values will be * scaled. Default is 1e5. Required. * 座標値がスケーリングされることによるファクタ。 * デフォルトは 1E5。必須。 * （ol3 API） */
}).readGeometry(polyline, {
/** readGeometry(source, opt_options)
* Read the geometry from the source.
* ソースからジオメトリを読み込みます。
* （ol3 API）
*/
dataProjection: 'EPSG:4326', /** dataProjection * Projection of the data we are reading. If not provided, * the projection will be derived from the data (where * possible) or the defaultDataProjection of the format * is assigned (where set). If the projection can not be * derived from the data and if no defaultDataProjection * is set for a format, the features will not be * reprojected. * 読み込んでいるデータの投影。提供されていない場合、投影は * （可能な場合）データに由来し、または、フォーマットの * defaultDataProjection は（セットの場合）割り当てられま * す。します。投影がデータに由来できない場合、および、 * defaultDataProjection がフォーマットに設定されていない * 場合、フィーチャが再投影されることはありません。 * （ol3 API） */
featureProjection: 'EPSG:3857' /** featureProjection * Projection of the feature geometries created by the * format reader. If not provided, features will be * returned in the dataProjection. * フォーマットリーダーによって作成されたフィーチャジオメトリ * の投影。提供されていない場合、フィーチャが dataProjection * に返されます。 * （ol3 API） */
}));
var routeCoords = route.getCoordinates(); /** getCoordinates() * Return the coordinates of the linestring. * ラインストリングの座標を返します */
var routeLength = routeCoords.length;
var routeFeature = new ol.Feature({
/** ol.Feature
* A vector object for geographic features with a geometry
* and other attribute properties, similar to the features
* in vector file formats like GeoJSON.
* GeoJSONのようなベクトルファイル形式のフィーチャに類似した、
* ジオメトリとその他の属性プロパティを持つ地物フィーチャのた
* めのベクトルオブジェクト。（ol3 API）
*/
type: 'route',
geometry: route
});
var geoMarker = new ol.Feature({
type: 'geoMarker',
geometry: new ol.geom.Point(routeCoords[0]) /** ol.geom.Point * Point geometry.（ol3 API） */
});
var startMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(routeCoords[0])
});
var endMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(routeCoords[routeLength - 1])
});
var styles = {
'route': new ol.style.Style({
/** ol.style.Style
* Container for vector feature rendering styles. Any
* changes made to the style or its children through
* set*() methods will not take effect until the feature
* or layer that uses the style is re-rendered.
* ベクタフィーチャがスタイルを描画するためのコンテナ。
* スタイルや set*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
stroke: new ol.style.Stroke({
/** ol.style.Stroke
* Set stroke style for vector features.
* Note that the defaults given are the Canvas defaults,
* which will be used if option is not defined.
* The get functions return whatever was entered in the
* options; they will not return the default.
* ベクタフィーチャのためのストロークスタイルの設定。
* デフォルトは、オプションが定義されていない場合に使用され
* る Canvas のデフォルトを与えられることに注意してください。
* GET 関数は、オプションで入力されたものはすべて返します。
* それらはデフォルトを返しません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
width: 6, color: [237, 212, 0, 0.8]
})
}),
'icon': new ol.style.Style({
image: new ol.style.Icon({
/** ol.style.Icon
* Set icon style for vector features.
* ベクタフィーチャのアイコンスタイルを設定します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
anchor: [0.5, 1],
// src: 'data/icon.png'
src: 'v3.11.2/examples/data/icon.png'
})
}),
'geoMarker': new ol.style.Style({
image: new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
radius: 7,
snapToPixel: false,
/** snapToPixel
* If true integral numbers of pixels are used as the
* X and Y pixel coordinate when drawing the circle
* in the output canvas. If false fractional numbers
* may be used. Using true allows for "sharp" rendering
* (no blur), while using false allows for "accurate"
* rendering. Note that accuracy is important if the
* circle's position is animated. Without it, the
* circle may jitter noticeably. Default value is true.
* true の場合、ピクセル整数は、出力キャンバスに円を描画す
* るとき、XとYピクセル座標として使用されます。false の場
* 合、分数を使用することができます。true を使用すると「
* シャープ」レンダリング（ぼかしなし）を可能にし、false
* 使用すると「正確」なレンダリングを可能にします。円の位
* 置がアニメーション化されている場合は、その正確さが重要
* であることに注意してください。それがなければ、円が著し
* く乱れることがあります。デフォルト値は true です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
fill: new ol.style.Fill({color: 'black'}),
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
stroke: new ol.style.Stroke({
color: 'white', width: 2
})
})
})
};
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers. Vector
* features provided by this source are suitable for
* editing. See ol.source.VectorTile for vector data that
* is optimized for rendering.
* ベクタレイヤのフィーチャのソースを提供します。このソースが
* 提供するベクトルのフィーチャは、編集に適しています。レンダ
* リングのために最適化されたベクトルデータのための
* ol.source.VectorTile を参照してください。（ol3 API）
*/
features: [routeFeature, geoMarker, startMarker, endMarker] }),
style: function(feature, resolution) {
// hide geoMarker if animation is active
// アニメーションがアクティブである場合 geoMarker を隠します
if (animating && feature.get('type') === 'geoMarker') {
/** get(key)
* Gets a value.
* 値を取得します。（ol3 API）
*/
return [];
}
return [styles[feature.get('type')]];
}
});
var center = [-5639523.95, -3501274.52];
var map = new ol.Map({
target: document.getElementById('map'),
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 API） */
view: new ol.View({
center: center,
zoom: 10,
minZoom: 2,
maxZoom: 19
}),
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.BingMaps({
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol3 API）
*/
imagerySet: 'AerialWithLabels',
key: 'Ak-dzM...（省略）'
})
}),
vectorLayer
]
});
var moveFeature = function(event) {
var vectorContext = event.vectorContext;
/** vectorContext{ol.render.VectorContext}
* For canvas, this is an instance of
* ol.render.canvas.Immediate.
* キャンバスの場合、これは ol.render.canvas.Immediate
* のインスタンスです。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var frameState = event.frameState;
/** frameState{olx.FrameState}
* The frame state at the time of the event.
* イベント時のフレーム状態。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
if (animating) {
var elapsedTime = frameState.time - now;
// here the trick to increase speed is to jump some
// indexes on lineString coordinates
// ここで速度を向上させるコツは、座標をラインストリング上のい
// くつかのインデックスをジャンプすることです
var index = Math.round(speed * elapsedTime / 1000); /** Math.round() * 引数として与えた数を四捨五入して、最も近似の整数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/round]） */
if (index >= routeLength) {
stopAnimation(true);
return;
}
var currentPoint = new ol.geom.Point(routeCoords[index]); var feature = new ol.Feature(currentPoint);
vectorContext.drawFeature(feature, styles.geoMarker); /** drawFeature(() * Render a feature into the canvas. In order to * respect the zIndex of the style this method draws * asynchronously and thus after calls to * drawXxxxGeometry have been finished, effectively * drawing the feature on top of everything else. You * probably should be using ol.layer.Vector instead * of calling this method directly. * キャンバスにフィーチャをレンダリングします。 スタイルの * zIndex を尊重するために、このメソッドは非同期的に描画 * します。これにより、終了した drawXxxxGeometry への呼 * び出した後に、他のすべての上のフィーチャを効果的に描画し * ます。このメソッドを直接呼び出す代わりに、おそらく * ol.layer.Vector を使用する必要があります。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
} // tell OL3 to continue the postcompose animation // postcompose animation を継続するために OL3 に伝えます
map.render(); /** render() * Request a map rendering (at the next animation * frame). * （次のアニメーションフレームで）map 描画を要求します。 * （ol3 API） */
};
function startAnimation() {
if (animating) {
stopAnimation(false);
} else {
animating = true;
now = new Date().getTime(); /** Date * 日付や時刻を扱うことが可能な、JavaScript の Date * インスタンスを生成します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Date]） */
/** Date.prototype.getTime() * ユニバーサル時間に従い、指定された日付の時刻に対応する数 * 値を返します。 * GetTime メソッドによって返される値は、1970 年 1 月 1 日 * 00:00:00 UTC からの経過ミリ秒です。このメソッドは、日付 * と時刻を別の Date オブジェクトに割り当てるために使用でき * ます。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Date/getTime]） */
speed = speedInput.value;
startButton.textContent = 'Cancel Animation'; /** Node.textContent * The Node.textContent property represents the text * content of a node and its descendants. * Node.textContentプロパティは、ノードとノードの子孫のテキ * ストの内容を表します。 * （MDN[https://developer.mozilla.org/en-US/docs/ * Web/API/Node/textContent]） */
// hide geoMarker // geoMarker を隠します
geoMarker.setStyle(null); /** setStyle(style) * Set the style for the feature. This can be a single * style object, an array of styles, or a function that * takes a resolution and returns an array of styles. If * it is null the feature has no style (a null style). * フィーチャのスタイルを設定します。これは、単一のスタイルオ * ブジェクト、スタイルの配列、または解像度をとり、スタイルの * 配列を返す関数とすることができます。null の場合、フィー * チャは、スタイルなし（null のスタイル）を持ちます。 * （ol3 API） */
// just in case you pan somewhere else // 念のために、どこか他にパンします。
map.getView().setCenter(center); /** getView() * Get the view associated with this map. A view * manages properties such as center and resolution. * このマップと関連するビューを取得します。ビューは、中心 * や解像度のような属性を管理します。 * Return: The view that controls this map.（ol3 API） */
/** setCenter() * Set the center of the current view. * 現在のビューの中心を設定します。（ol3 API） */
map.on('postcompose', moveFeature);
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
map.render(); } }
/**
* @param {boolean} ended end of animation.
*/
/** 「@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]）
*/
function stopAnimation(ended) {
animating = false;
startButton.textContent = 'Start Animation';
// if animation cancelled set the marker at the beginning // アニメーションキャンセルされた場合、先頭にマーカーを設定
var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0]; /** 条件演算子 condition ? expr1 : expr2 * condition: true か false かを評価する条件文です。 * expr1, expr2: 各々の値の場合に実行する式です。 * condition が true の場合、演算子は expr1 の値を選択します。 * そうでない場合は expr2 の値を選択します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Guide/Expressions_and_Operators]） */
/** @type {ol.geom.Point} */ (geoMarker.getGeometry())
/** getGeometry()
* Get the feature's default geometry. A feature may have
* any number of named geometries. The "default" geometry
* (the one that is rendered by default) is set when
* calling ol.Feature#setGeometry.
* フィーチャのデフォルトのジオメトリを取得します。フィーチャ
* は、任意の数の指定のジオメトリのを有することができます。
* 「デフォルト」のジオメトリ（デフォルトでレンダリングされる
* もの）が ol.Feature＃setGeometry を呼び出すときに設定され
* ています。（ol3 API）
*/
.setCoordinates(coord); /** setCoordinates(coordinates, opt_layout) * Set the coordinate of the point. * 点の座標を設定します。 * （ol3 API） */
//remove listener
// リスナを削除
map.un('postcompose', moveFeature);
}
var speed, now;
var animating = false;
var speedInput = document.getElementById('speed');
var startButton = document.getElementById('start-animation');
startButton.addEventListener('click', startAnimation, false);
/** EventTarget.addEventListener
* addEventListener は、 1 つのイベントターゲットにイベント
* リスナーを1つ登録します。イベントターゲットは、ドキュメント
* 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
* XMLHttpRequest です。
*（MDN[https://developer.mozilla.org/ja/docs/Web/API/
* EventTarget.addEventListener]）
*/
