2 - ol3.12ex 146b - Render geometries to a canvas 2

「render-geometry.js（2146-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2146-ol3ex.js」

var canvas = document.getElementById('canvas');

var render = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});
/** ol.render.toContext(context, opt_options)
 * Binds a Canvas Immediate API to a canvas context, 
 * to allow drawing geometries to the context's 
 * canvas.
 * The units for geometry coordinates are css pixels 
 * relative to the top left corner of the canvas 
 * element.
 * Note that ol.render.canvas.Immediate#drawAsync 
 * and ol.render.canvas.Immediate#drawFeature 
 * cannot be used.
 * コンテキストのキャンバス（canvas）にジオメトリを描画でき
 * るように、Canvas Immediate API をキャンバスコンテキス
 * ト（canvas context）にバインドします。
 * ジオメトリの座標の単位は canvas 要素の左上隅からの相対 
 * css ピクセルです。
 * ol.render.canvas.Immediate#drawAsynと
 * ol.render.canvas.Immediate#drawFeature は使用出来
 * ないことに注意してください。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

/** HTMLCanvasElement.getContext()
 * The HTMLCanvasElement.getContext() method returns a 
 * drawing context on the canvas, or null if the 
 * context identifier is not supported.
 * HTMLCanvasElement.getContext（）メソッドは、キャンバ
 * ス上の描画コンテキストを返すか、または コンテキスト識別
 * 子がサポートされていない場合、null を返します。
 * contextType Is a DOMString containing the context 
 * identifier defining the drawing context associated 
 * to the canvas.
 * "2d", leading to the creation of a 
 * CanvasRenderingContext2D object representing a 
 * two-dimensional rendering context.
 * contextTypeは canvas に関連する描画コンテキストを定義
 * するコンテキスト識別子を含む DOMString  です。
 * 「2D」、二次元のレンダリングコンテキストを表す
 * CanvasRenderingContext2D オブジェクトの作成につなが
 * ります。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/HTMLCanvasElement/getContext]）
 */

/** size:
 * Desired size of the canvas in css pixels. When 
 * provided, both canvas and css size will be set 
 * according to the pixelRatio. If not provided, the 
 * current canvas and css sizes will not be altered.
 * css ピクセル単位の canvas の希望のサイズ。提供される場
 * 合、canvas とcss サイズ両方とも画素比率に応じて設定され
 * ます。提供されていない場合は、現在の canvas と css のサ
 * イズは変更されません。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

var fill = new ol.style.Fill({ color: 'blue' });
/** ol.style.Fill 
 * Set fill style for vector features.
 * ベクタフィーチャの塗りつぶしスタイルを設定。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

var stroke = new ol.style.Stroke({ color: 'black' });
/** 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 のチェックを外すと表示]）
 */

render.setFillStrokeStyle(fill, stroke);
/** setFillStrokeStyle(fillStyle, strokeStyle)
 * Set the fill and stroke style for subsequent draw 
 * operations. To clear either fill or stroke styles, 
 * pass null for the appropriate parameter.
 * 後の描画操作のための塗りと線のスタイルを設定します。塗り
 * または線のスタイルのいずれかをクリアするために、適切なパ
 * ラメータに null を渡します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

render.setImageStyle(new ol.style.Circle({
/** setImageStyle()
 * Set the image style for subsequent draw 
 * operations. Pass null to remove the image 
 * style.
 * その後のドロー操作のための画像のスタイルを設定します。
 * 画像のスタイルを削除するには null を渡します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

/** ol.style.Circle
 * Set circle style for vector features.
 * ベクタフィーチャの円のスタイルを設定。（ol3 API）
 */

 radius: 10,
 fill: fill,
 stroke: stroke
}));

render.drawLineStringGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
/**  drawLineStringGeometry(lineStringGeometry) experimental
 * Render a LineString into the canvas. Rendering is 
 * immediate and uses the current style.
 * canvas（キャンバス）に LineString をレンダリングします。
 * レンダリングは即時であり、現在のスタイルを使用します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

/** ol.geom.LineString
 * Linestring geometry.（ol3 API）
 */

render.drawPolygonGeometry(
/** drawPolygonGeometry(polygonGeometry)
 * Render a Polygon geometry into the canvas. 
 * Rendering is immediate and uses the current style.
 * キャンバス（canvas）にポリゴンジオメトリ（Polygon 
 * geometry）をレンダリングします。レンダリングは即時であ
 * り、現在のスタイルを使用します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

 new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
 /** ol.geom.Polygon
  * Polygon geometry.（ol3 API）
  */

render.drawPointGeometry(new ol.geom.Point([88, 88]));
/** drawPointGeometry(pointGeometry)
 * Render a Point geometry into the canvas. 
 * Rendering is immediate and uses the current style.
 * キャンバス（canvas）にポイントジオメトリ（Point 
 * geometry）をレンダリングします。レンダリングは即時であ
 * り、現在のスタイルを使用します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

/** ol.geom.Point
 * Point geometry.（ol3 API）
 */