「295-ol3ex.js」
var osm = new ol.layer.Tile({
source: new ol.source.OSM() /** ol.source.OSM * Layer source for the OpenStreetMap tile server. * OpenStreetMap タイルサーバのレイヤソース。（ol3 API） */
});
var map = new ol.Map({
layers: [osm],
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: new ol.View({
center: [0, 0],
zoom: 2
})
});
osm.on('precompose', function(event) {
/** on()
* Listen for a certain type of event.
* Returns: Unique key for the listener.（ol3 API）
*/
/** precompose イベント * レイヤを描画する前に発生するイベント。 * （「Layer spy example」参照） */
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 のチェックを外すと表示]）
*/
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.translate(ctx.canvas.width / 2, ctx.canvas.height / 2); /** CanvasRenderingContext2D.translate() * The CanvasRenderingContext2D.translate() method of * the Canvas 2D API adds a translation transformation * by moving the canvas and its origin x horizontally * and y vertically on the grid. * Canvas 2D API の CanvasRenderingContext2D.translate（） * メソッドは、canvas およびその元のグリッド上の x 垂直方向、 * および y 水平方向を移動することで変換変形を追加します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/translate]） */
ctx.scale(3, 3); /** CanvasRenderingContext2D.scale() * The CanvasRenderingContext2D.scale() method of the * Canvas 2D API adds a scaling transformation to the * canvas units by x horizontally and by y vertically. * Canvas 2D API の CanvasRenderingContext2D.scale（） * メソッドは、x水平方向、および y 垂直方向によってキャン * バス単位に伸縮変形を追加します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/scale]） */
ctx.translate(-75, -80);
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]） */
ctx.moveTo(75, 40); /** CanvasRenderingContext2D.moveTo() * The CanvasRenderingContext2D.moveTo() method of the * Canvas 2D API moves the starting point of a new * sub-path to the (x, y) coordinates. * Canvas 2D API の CanvasRenderingContext2D.moveTo（） * メソッドは、新しいサブパスの開始点を（x、y）座標に、移動 * します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/moveTo]） */
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); /** CanvasRenderingContext2D.bezierCurveTo() * The CanvasRenderingContext2D.bezierCurveTo() method * of the Canvas 2D API adds a cubic Bézier curve to * the path. It requires three points. The first two * points are control points and the third one is the * end point. The starting point is the last point in * the current path, which can be changed using moveTo() * before creating the Bézier curve. * Canvas 2D API の CanvasRenderingContext2D.bezierCurveTo（） * メソッドは、三次ベジェ曲線をパスに追加します。それは3つのポイ * ントが必要です。最初の2点は制御点で、3つ目は終点です。始点は、 * ベジェ曲線を作成する前の moveTo（）を使用して変更することがで * きる、現在のパスの最後の点です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/bezierCurveTo]） */
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
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]） */
ctx.setTransform(1, 0, 0, 1, 0, 0); /** CanvasRenderingContext2D.setTransform() * The CanvasRenderingContext2D.setTransform() method * of the Canvas 2D API resets (overrides) the current * transformation to the identity matrix and then * invokes a transformation described by the arguments * of this method. * Canvas 2D API の CanvasRenderingContext2D.setTransform（） * メソッドは、現在の指定されたマトリックスへの変換をリセット * （オーバーライド）し、その後、このメソッドの引数によって記述 * された変換を呼び出します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/setTransform]） */
});
osm.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]） */
});
