「2123-ol3ex.js」
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）
*/
source: new ol.source.OSM({
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
*/
wrapX: false
/** wrapX:
* Whether to wrap the world horizontally. Default is
* false.
* 水平に世界を覆うかどうかを設定します。デフォルトはfalse
* です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
}) }) ],
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 // 折りたたみ }) }),
renderer: common.getRendererFromQueryString(), // 'common.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
var source = new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
*/
wrapX: false });
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: source }); map.addLayer(vector);
function addRandomFeature() {
var x = Math.random() * 360 - 180; /** Math.random() * The Math.random() function returns a floating-point, * pseudo-random number in the range [0, 1) that is, * from 0 (inclusive) up to but not including 1 * (exclusive), which you can then scale to your * desired range. The implementation selects the * initial seed to the random number generation * algorithm; it cannot be chosen or reset by the * user. * Math.random() 関数は浮動小数点を返し、0 と 1 の範囲の * 擬似乱数、すなわち 0 以上 1 未満、で、任意の範囲に合わせ * ることができます。インプリメンテーションは、乱数発生アル * ゴリズムのためにイニシャルシードを選択しますが、ユーザが * 選んだりリセットできません。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Math/random]） */
var y = Math.random() * 180 - 90;
var geom = new ol.geom.Point(ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857')); /** ol.geom.Point * Point geometry.（ol3 API） */
/** 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 feature = new ol.Feature(geom); /** 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） */
source.addFeature(feature); }
var duration = 3000;
function flash(feature) {
var start = 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]） */
var listenerKey;
function animate(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 のチェックを外すと表示]）
*/
var flashGeom = feature.getGeometry().clone(); /** getGeometry() * Returns the Geometry associated with this feature * using the current geometry name property. By default, * this is geometry but it may be changed by calling * setGeometryName. * 現在のジオメトリネームプロパティを使用して、このフィーチャに * 関連したジオメトリを返します。デフォルトでは、ジオメトリです * が、setGeometryName を呼び出すことによって変更することが * できます。（ol3 API） */
/** clone() * Clone this feature. If the original feature has * a geometry it is also cloned. The feature id is * not set in the clone. * このフィーチャを複製します。元のフィーチャは、ジオメトリ * を有する場合にも複製します。フィーチャ ID は、クローンに * 設定されていません。（ol3 API） */
var elapsed = frameState.time - start; var elapsedRatio = elapsed / duration; // radius will be 5 at start and 30 at end.
var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5; /** ol.easing.easeOut(t) * Start fast and slow down. * 早くしたり遅くしたりします。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
var opacity = ol.easing.easeOut(1 - elapsedRatio);
var flashStyle = new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: radius,
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 のチェックを外すと表示]）
*/
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）
*/
color: 'rgba(255, 0, 0, ' + opacity + ')',
width: 1,
opacity: opacity
})
});
vectorContext.setImageStyle(flashStyle); /** setImageStyle() * Set the image style for subsequent draw * operations. Pass null to remove the image * style. * その後のドロー操作のための画像のスタイルを設定します。 * 画像のスタイルを削除するには null を渡します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
vectorContext.drawPointGeometry(flashGeom, null); /** drawPointGeometry(pointGeometry, feature) * Render a Point geometry into the canvas. * Rendering is immediate and uses the current * style. * キャンバスにポイントジオメトリをレンダリングします。 * レンダリングは即座にされ、現在のスタイルを使用します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
if (elapsed > duration) {
ol.Observable.unByKey(listenerKey);
/** ol.Observable.unByKey(key)
* Removes an event listener using the key
* returned by on() or once().
* on() または once() によって返されたキーを使うことで
* イベントリスナを削除します。（ol3 API）
*/
return; } // tell OL3 to continue postcompose animation frameState.animate = true; }
listenerKey = map.on('postcompose', animate);
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
/** postcompose イベント * レイヤを描画した後に発生するイベント。 * （「Layer spy example」参照） */
}
source.on('addfeature', function(e) {
flash(e.feature);
});
window.setInterval(addRandomFeature, 1000); /** WindowTimers.setInterval() * Calls a function or executes a code snippet * repeatedly, with a fixed time delay between * each call to that function. Returns an * intervalID. * 関数を呼び出すか、その関数への各呼び出しの間に一定の時間 * 遅延して、繰り返しコードスニペットを実行します。 * intervalID を返します。 * （MDN[https://developer.mozilla.org/en-US/ * docs/Web/API/WindowTimers/setInterval]） */
0 件のコメント:
コメントを投稿