「296-ol3ex.js」
var key = 'Ak-dzM...（省略）';
var roads = new ol.layer.Tile({
source: new ol.source.BingMaps({
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol3 API）
*/
key: key, imagerySet: 'Road' }) });
var imagery = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: key, imagerySet: 'Aerial'
})
});
var map = new ol.Map({
layers: [roads, imagery],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[-109, 46.5], 'EPSG:4326', 'EPSG:3857'
), zoom: 6 }) });
var radius = 75;
$(document).keydown(function(evt) {
/** .keydown()
* Bind an event handler to the "keydown" JavaScript event,
* or trigger that event on an element.
* 「keydown」JavaScript イベントのイベントハンドラをバインドす
* るか、その要素のイベントをトリガします。
* （jQuery[https://api.jquery.com/keydown/]）
*/
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 読み取り専用プロパティは、押されたキー
* の数字キーコード、または、押されたアルファベットキーに対する
* キャラクタコード（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() * Requests a render frame; rendering will effectively * occur at the next browser animation frame. * レンダーフレームをを要求します。すなわち、レンダリングは、 * 次のブラウザのアニメーションフレームで、効果的に発生します。 * （ol3 API） */
} 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(); } });
// get the pixel position with every move // すべての移動のピクセル（画素）位置を取得
var mousePosition = null;
$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
* Return: Viewport （ol3 API）
*/
/** jQuery on イベント */
mousePosition = map.getEventPixel(evt.originalEvent); /** getEventPixel() * Returns the map pixel position for a browser event. * ブラウザイベントに対して、マップのピクセル位置を返します。 * （ol3 API） */
map.render();
}).on('mouseout', function() {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
mousePosition = null; map.render(); });
// before rendering the layer, do some clipping // レイヤを描画する前にクリップを実行
imagery.on('precompose', function(event) {
var ctx = event.context;
/** context{CanvasRenderingContext2D}
* Canvas context. Only available when a Canvas renderer
* is used, null otherwise.
* canvas context。キャンバスレンダラを使用する場合にだけ
* 利用でき、そうでない場合は、null。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var pixelRatio = event.frameState.pixelRatio;
/** frameState{olx.FrameState}
* The frame state at the time of the event.
* イベント時のフレーム状態。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
ctx.save(); /** CanvasRenderingContext2D.save() * The CanvasRenderingContext2D.save() method of * the Canvas 2D API saves the entire state of the * canvas by pushing the current state onto a stack. * Canvas 2D API の CanvasRenderingContext2D.save（） * メソッドは、スタック上に現在の状態を最後に追加するこ * とにより、キャンバスの状態全体を保存します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/save]） */
ctx.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]） */
if (mousePosition) {
// only show a circle around the mouse // マウスの周囲だけ円状に表示
ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, /**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（）メソッ * ドは、anticlockwise キーで与えられた方向に startAngle * から開始し endAngle で終わる、半径r（x、y）の位置を中心 * とするパスに弧を追加します（デフォルトでは時計回り）。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/arc]） */
radius * pixelRatio, 0, 2 * Math.PI); /** Math.PI() * 円周率。約 3.14159 です。 * （MDN[https://developer.mozilla.org/ja/docs/Web * /JavaScript/Reference/Global_Objects/Math/PI]） */
ctx.lineWidth = 5 * 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]） */
ctx.strokeStyle = 'rgba(0,0,0,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]） */
ctx.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]） */
}
ctx.clip(); /** CanvasRenderingContext2D.clip() * The CanvasRenderingContext2D.clip() method of the * Canvas 2D API turns the path currently being built * into the current clipping path. * Canvas 2D API の CanvasRenderingContext2D.clip（） * メソッドは、現在組み込まれているパスを現在のクリッピン * グパスに置き換えます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/clip]） */
});
// after rendering the layer, restore the canvas context // レイヤを描画した後、キャンバスコンテキストを保存
imagery.on('postcompose', function(event) {
/** postcompose イベント
* レイヤを描画した後に発生するイベント。
* （「Layer spy example」参照）
*/
var ctx = event.context;
ctx.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]） */
});
「ol.MapBrowserEvent」
（Events emitted as map browser events are instances of this type. See ol.Map for which events trigger a map browser event.
マップブラウザイベントとして発するイベントは、このタイプのインスタンスです。イベントがマップブラウザイベントをトリガする ol.Map を参照してください。）
のメンバ。
ol/ol/mapbrowserevent.js 32行目
* @param {goog.events.BrowserEvent} browserEvent Browser event.
ol/ol/mapbrowserevent.js 52行目
this.originalEvent = browserEvent.getBrowserEvent();
goog.events.BrowserEvent
「events.BrowserEvent - Extends goog.events.Event」
（http://docs.closure-library.googlecode.com/git/class_goog_events_BrowserEvent.html）
Accepts a browser event object and creates a patched, cross browser event object. The content of this object will not be initialized if no event object is provided. If this is the case, init() needs to be invoked separately.
events.BrowserEvent。goog.events.Eventを拡張します。
ブラウザイベントオブジェクトを受け入れ、パッチを適用した、クロスブラウザイベントオブジェクトを作成します。イベントオブジェクトが提供されない場合は、このオブジェクトの内容は初期化されません。この場合は、init()は別々に呼び出す必要があります。
「Instance Methods」
getBrowserEvent() ⇒ Event
No description.
Returns: Event The underlying browser event object.
0 件のコメント:
コメントを投稿