「2168-ol4ex.js」
var key = 'As1Hi...（省略）';
var imagery = 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.
* プリレンダリング（事前描画）を提供するレイヤソースのため
* の、特定の解像度でのズームレベルによって編成されているグ
* リッドのタイルイメージ。（ol4 API）
*/
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol4 API）
*/
});
var container = document.getElementById('map');
var map = new ol.Map({
layers: [imagery],
target: container,
view: new ol.View({
center: ol.proj.fromLonLat([-109, 46.5]),
zoom: 6
})
});
var radius = 75;
document.addEventListener('keydown', function(evt) {
/** EventTarget.addEventListener
* The EventTarget.addEventListener() method registers
* the specified listener on the EventTarget it's called
* on. The event target may be an Element in a document,
* the Document itself, a Window, or any other object
* that supports events (such as XMLHttpRequest).
* EventTarget.addEventListener() メソッドは、それが呼び
* 出される EventTarget に指定されたリスナを登録します。イベ
* ントターゲットは、ドキュメントの Element、Document 自身、
* Window、または（XMLHttpRequest などの）イベントをサポート
* している他のオブジェクトです。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/EventTarget/addEventListener]）
*/
if (evt.which === 38) {
/** KeyboardEvent.which [Deprecated]
* The KeyboardEvent.which read-only property returns the
* numeric keyCode of the key pressed, or the character
* code (charCode) for an alphanumeric key pressed.
* KeyboardEvent.which 読み取り専用プロパティは、押されたキー
* の数値 keyCode、または、押された英数字キーの文字コード
* （charCode）を返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/KeyboardEvent/which]）
*/
radius = Math.min(radius + 5, 150); /** Math.min() * 引数として与えた複数の数の中で最小の数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/min]） */
map.render(); /** render() * Request a map rendering (at the next animation * frame). * （次のアニメーションフレームで）map 描画を要求します。 * （ol4 API） */
evt.preventDefault(); /** Event.preventDefault() * Cancels the event if it is cancelable, without * stopping further propagation of the event. * イベントのさらなる伝播を停止させることなく、解約された場合 * に、イベントをキャンセルします。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/Event/preventDefault]） */
} else if (evt.which === 40) {
radius = Math.max(radius - 5, 25); /** Math.max() * 引数として与えた複数の数の中で最大の数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/max]） */
map.render(); evt.preventDefault(); } });
// get the pixel position with every move // 移動時毎にピクセル位置を取得 var mousePosition = null;
container.addEventListener('mousemove', function(event) {
mousePosition = map.getEventPixel(event); /** getEventPixel() * Returns the map pixel position for a browser event * relative to the viewport. * ビューポートと相対的な、ブラウザイベントに対しするマップのピ * クセル位置を返します。 * （ol4 API） */
map.render(); });
container.addEventListener('mouseout', function() {
mousePosition = null;
map.render();
});
// after rendering the layer, show an oversampled // version around the pointer // レイヤをレンダリング後、ポインタの周囲にオーバーサンプルされ // たバージョンを表示
imagery.on('postcompose', function(event) {
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol4 API）
*/
if (mousePosition) {
var context = event.context;
var pixelRatio = event.frameState.pixelRatio;
/** frameState{olx.FrameState}
* The frame state at the time of the event.
* イベント時のフレームの状態。（ol4 API）
*/
var half = radius * pixelRatio; var centerX = mousePosition[0] * pixelRatio; var centerY = mousePosition[1] * pixelRatio; var originX = centerX - half; var originY = centerY - half; var size = 2 * half + 1;
var sourceData = context.getImageData(originX, originY, size, size).data; /** CanvasRenderingContext2D.getImageData() * The CanvasRenderingContext2D.getImageData() method of * the Canvas 2D API returns an ImageData object * representing the underlying pixel data for the area * of the canvas denoted by the rectangle which starts * at (sx, sy) and has an sw width and sh height. This * method is not affected by the canvas transformation * matrix. * Canvas 2D API の * CanvasRenderingContext2D.getImageData() * メソッドは、（sx、sy）で始まりsw幅とsh高さを有している * 四角形で示される、キャンバス（canvas）の領域の基礎となる * ピクセルデータを表す ImageData オブジェクトを返します。 * このメソッドは、canvas 変換行列の影響を受けません。 * Syntax * ImageData ctx.getImageData(sx, sy, sw, sh); * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/getImageData]） */
var dest = context.createImageData(size, size); /** CanvasRenderingContext2D.createImageData() * The CanvasRenderingContext2D.createImageData() * method of the Canvas 2D API creates a new, blank * ImageData object with the specified dimensions. * All of the pixels in the new object are transparent * black. * Canvas 2D APIの * CanvasRenderingContext2D.createImageData（）メソッド * は、指定された大きさで新しい、空白の ImageData オブジェ * クトを作成します。新しいオブジェクトの全ての画素は透明 * な黒です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/createImageData]） */
var destData = dest.data;
for (var j = 0; j < size; ++j) {
for (var i = 0; i < size; ++i) {
var dI = i - half;
var dJ = j - half;
var dist = Math.sqrt(dI * dI + dJ * dJ);
/** Math.sqrt()
* 引数として与えた数の平方根を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/sqrt]）
*/
var sourceI = i;
var sourceJ = j;
if (dist < half) {
sourceI = Math.round(half + dI / 2);
/** Math.round()
* 引数として与えた数を四捨五入して、最も近似の整数を返しま
* す。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/round]）
*/
sourceJ = Math.round(half + dJ / 2);
}
var destOffset = (j * size + i) * 4;
var sourceOffset = (sourceJ * size + sourceI) * 4;
destData[destOffset] = sourceData[sourceOffset];
destData[destOffset + 1] = sourceData[sourceOffset + 1];
destData[destOffset + 2] = sourceData[sourceOffset + 2];
destData[destOffset + 3] = sourceData[sourceOffset + 3];
}
}
context.beginPath(); /** CanvasRenderingContext2D.beginPath() * The CanvasRenderingContext2D.beginPath() method of the * Canvas 2D API starts a new path by emptying the list * of sub-paths. Call this method when you want to create * a new path. * Canvas 2D API の CanvasRenderingContext2D.beginPath() * メソッドは、サブパスのリストを空にすることによって新しいパ * スを開始します。新しいパスを作成したいときに、このメソッド * を呼び出します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/beginPath]） */
context.arc(centerX, centerY, half, 0, 2 * Math.PI); /** CanvasRenderingContext2D.arc() * The CanvasRenderingContext2D.arc() method of the * Canvas 2D API adds an arc to the path which is * centered at (x, y) position with radius r starting at * startAngle and ending at endAngle going in the given * direction by anticlockwise (defaulting to clockwise). * Canvas 2D API の CanvasRenderingContext2D.arc() メ * ソッドは、半径 r の位置（x、y）を中心とする反時計回り（初 * 期値は時計回り）に startAngle で始まり endAngle で終わる * 弧をパスに追加します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/arc]） */
/** Math.PI() * 円周率。約 3.14159 です。 * （MDN[https://developer.mozilla.org/ja/docs/Web * /JavaScript/Reference/Global_Objects/Math/PI]） */
context.lineWidth = 3 * pixelRatio; /** CanvasRenderingContext2D.lineWidth * The CanvasRenderingContext2D.lineWidth property of * the Canvas 2D API sets the thickness of lines in * space units. When getting, it returns the current * value (1.0 by default). When setting, zero, negative, * Infinity and NaN values are ignored; otherwise the * current value is set to the new value. * Canvas 2D API の CanvasRenderingContext2D.lineWidth * プロパティは、空間単位で線の太さを設定します。取得する * と、現在の値（デフォルトでは1.0）を返します。設定時、 * ゼロ、負、無限大とNaN値は無視されます。それ以外の場合、 * 現在の値は新しい値に設定されてます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/lineWidth]） */
context.strokeStyle = 'rgba(255,255,255,0.5)'; /** CanvasRenderingContext2D.strokeStyle * The CanvasRenderingContext2D.strokeStyle property of * the Canvas 2D API specifies the color or style to * use for the lines around shapes. The default is #000 * (black). * Canvas 2D APIのCanvasRenderingContext2D.strokeStyle * プロパティは、図形の外周の線に使用する色やスタイルを指定 * します。デフォルトは＃000（黒）です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/strokeStyle]） */
context.putImageData(dest, originX, originY); /** CanvasRenderingContext2D.putImageData() * The CanvasRenderingContext2D.putImageData() method * of the Canvas 2D API paints data from the given * ImageData object onto the bitmap. If a dirty * rectangle is provided, only the pixels from that * rectangle are painted. * Canvas 2D API の * CanvasRenderingContext2D.getImageData() * メソッドは、与えられたの ImageData オブジェクトからビッ * トマップにデータをペイントします。汚れた矩形が提供される * 場合、その長方形のピクセルのみが描かれています。 * Syntax * void ctx.putImageData(imagedata, dx, dy); * void ctx.putImageData(imagedata, dx, dy, dirtyX, * dirtyY, dirtyWidth, dirtyHeight); * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/putImageData]） */
context.stroke(); /** CanvasRenderingContext2D.stroke() * The CanvasRenderingContext2D.stroke() method of the * Canvas 2D API strokes the current or given path with * the current stroke style using the non-zero winding * rule. * Canvas 2D APIのCanvasRenderingContext2D.stroke（） * メソッドは、ノンゼロワインディング規則を使用して、現在 * の線のスタイルを持つ現在または与えられたパスを引きます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/stroke]） */
context.restore(); /** CanvasRenderingContext2D.restore() * The CanvasRenderingContext2D.restore() method of the * Canvas 2D API restores the most recently saved canvas * state by popping the top entry in the drawing state * stack. If there is no saved state, this method does * nothing. * Canvas 2D API の CanvasRenderingContext2D.restore（） * メソッドは、描画状態のスタックの一番上のエントリを抜き * 出すことによって、最後に保存されたキャンバスの状態を復 * 元します。全く保存された状態が存在しない場合、このメソッ * ドは何もしません。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/restore]） */
} });
