2 - ol3.2ex 74b -Synthetic lines example 2

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

「274-ol3ex.js」

var count = 10000;

var features = new Array(count);
/** Array(arraylength)
 * JavaScript は配列を扱うことができます。配列とは順序を持つ複数
 * のデータの集合であり、JavaScript のグローバルオブジェクトであ 
 * る Array は、高位の、（C言語等で云うところの）「リスト」の様
 * な、配列のコンストラクタです。
 * arraylength
 * Array コンストラクタに渡される唯一の引数（arrayLength）に 0 
 * から 4,294,967,295( 232-1 ) までの整数値を指定する場合は、そ
 * の値を要素数とする配列が作成されます。その際に範囲外の値を指
 * 定した場合には、例外: RangeError がスローされます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Array]）
 */

var startPoint = [0, 0];
var endPoint;

var delta, deltaX, deltaY;
var signX = 1;
var signY = -1;

// Create a square spiral.
var i;
for (i = 0; i < count; ++i) {
 delta = (i + 1) * 2500;
 if (i % 2 === 0) {
  signY *= -1;
 } else {
  signX *= -1;
 }
 deltaX = delta * signX;
 deltaY = delta * signY;
 endPoint = [startPoint[0] + deltaX, startPoint[1] + deltaY];

 features[i] = new ol.Feature({
 /** 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）
  */

  'geometry': new ol.geom.LineString([startPoint, endPoint])
  /** ol.geom.LineString
   * Linestring geometry.（ol3 API）
   */

 });
 startPoint = endPoint;
}

 /** %（モジュロ）
  * 二項演算子です。2 つのオペランドで除算したときの、整数の余り
  * を返します。
  * ===（厳密に等しい ）
  * オペランドが等しく、かつ同じ型である場合に true を返します。
  * x *= y（意味 x = x * y）
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Guide/Expressions_and_Operators]）
  */

var vector = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されたベクタデータ。（ol3 API）
 */

 source: new ol.source.Vector({
 /*: ol.source.Vector 
  * Provides a source of features for vector layers.
  * ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
  */

  features: features
 }),

 style: new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * （ol3 API）
  */

  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: '#666666',
   width: 1
  })
 })
});

var view = new ol.View({
  center: [0, 0],
  zoom: 0
});

var map = new ol.Map({
  layers: [vector],
  target: 'map',
  view: view
});