OL3-Cesium 11 - ol3cesium synthetic vector layer example 2

11-2 JavaScript ファイルの作成
「synthvectors.js（11-ol3cesium17.js）」は、マップを表示するための JavaScript ファイルです。

OL3-Cesium API　は、現在、すべて実験的（experimental）なものです。

「11-ol3cesium17.js」

var total = 0;
var created = 0;
var added = 0;

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

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

 source: vectorSource,
});

var addFeatures = function() {

 var then = Date.now();
 /** Date.now()
  * UTC（協定世界時）での 1970 年 1 月 1 日 00 時 00 分 00 秒 
  * から現在までの経過ミリ秒を数値で返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/now]）
  */

 var count = 1000;
 var features = [];
 var e = 18000000;
 for (var i = 0; i < count; ++i) {

  var feature = 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.Point([
   /** ol.geom.Point
    * Point geometry.（ol3 API）
    */

    2 * e * Math.random() - e,
    /** Math.random()
     * The Math.random() function returns a floating-point, 
     * pseudo-random number in the range [0, 1) that is, 
     * from 0 (inclusive) up to but not including 1 
     * (exclusive), which you can then scale to your 
     * desired range. The implementation selects the 
     * initial seed to the random number generation 
     * algorithm; it cannot be chosen or reset by the 
     * user.
     * Math.random() 関数は浮動小数点を返し、0 と 1 の範囲の
     * 擬似乱数、すなわち 0 以上 1 未満、で、任意の範囲に合わせ
     * ることができます。インプリメンテーションは、乱数発生アル
     * ゴリズムのためにイニシャルシードを選択しますが、ユーザが
     * 選んだりリセットできません。
     * （MDN[https://developer.mozilla.org/en-US/docs/Web/
     * JavaScript/Reference/Global_Objects/Math/random]）
     */

    2 * e * Math.random() - e,
    e * Math.random()
   ])
  });

  var style = [new ol.style.Style({
  /** ol.style.Style 
   * Base class for vector feature rendering styles.
   * ベクタフィーチャがスタイルを描画するための基本クラス。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

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

    radius: 2,

    fill: new ol.style.Fill({color: [
    /** ol.style.Fill 
     * Set fill style for vector features.
     * ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
     */

     Math.random() * 255,
     Math.random() * 255,
     Math.random() * 255,
     Math.random()
    ]})
   })
  })];

  feature.setStyle(style);
  /** setStyle(style)
   * Set the style for the feature. This can be a single 
   * style object, an array of styles, or a function that 
   * takes a resolution and returns an array of styles. If 
   * it is null the feature has no style (a null style).
   * フィーチャのスタイルを設定します。これは、単一のスタイルオ
   * ブジェクト、スタイルの配列、または解像度をとり、スタイルの
   * 配列を返す関数とすることができます。null の場合、フィーチャ
   * は、スタイルなし（null のスタイル）を持ちます。（ol3 API）
   */

  feature.setId(e * Math.random());
  /** setId(id)
   * Set the feature id. The feature id is considered stable 
   * and may be used when requesting features or comparing 
   * identifiers returned from a remote source. The feature 
   * id can be used with the ol.source.Vector#getFeatureById 
   * method.
   * フィーチャ id を設定します。フィーチャ id は、安定したとみな
   * され、そして、リモートソースからフィーチャを要求しているか、
   * または、返された識別しを比較しているとき使用されます。フィー
   * チャ id は、ol.source.Vector の getFeatureById メソッドと
   * 共に使用されます。（ol3 API）
   */

  features.push(feature);
  /** push(elem)
   * Insert the provided element at the end of the 
   * collection.
   * コレクションの最後に供給されたエレメントに挿入します。
   * Name: elem, Type: T, Description: Element
   * （ol3 API）
   */

 }

 var now = Date.now();
 created = now - then;
 then = now;

 vectorSource.addFeatures(features);
 /** addFeature(feature)
  * Add a single features to the source.If you want to add a 
  * batch of features at once, call source.addFeatures() 
  * instead.
  * 単一フィーチャをソースに追加します。もし即座にフィーチャの
  * バッチを追加したいなら、替りに source.addFeatures() を呼び
  * 出します。（ol3 API）
  */

 now = Date.now();
 added = now - then;
 total += count;

 document.getElementById('total').innerHTML = total;
 /** element.innerHTML
  * innerHTML は、与えられた要素に含まれる全てのマークアップ
  * と内容を設定または取得します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/element.innerHTML]）
  */

 document.getElementById('created').innerHTML = 'Features created in ' + created + 'ms.';
 document.getElementById('added').innerHTML = 'Features added in ' + added + 'ms.';
};

var tile = 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. 
 * プリレンダリング（事前描画）を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。（ol3 API）
 */

 source: new ol.source.TileWMS({
 /** ol.source.TileWMS
  * Layer source for tile data from WMS servers.
  * WMS サーバからのタイルデータのレイヤソース。
  * （ol3 API）
  */

  url: 'http://demo.boundlessgeo.com/geoserver/wms',
  params: {
   'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
  }
 })
});

var map = new ol.Map({
 layers: [tile, vector],
 target: 'map2d',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

var ol3d = new olcs.OLCesium({map: map});
/** new olcs.OLCesium(options)
 * map: The OpenLayers map we want to show on a Cesium scene.
 * Cesium シーンで表示したい OpenLayers マップ。
 * （OL3-Cesium API）
 */

var scene = ol3d.getCesiumScene();
/** getCesiumScene()
 * （OL3-Cesium API に説明がありませんでした。）
 */

var terrainProvider = new Cesium.CesiumTerrainProvider({
/** new CesiumTerrainProvider(options)
 * A TerrainProvider that access terrain data in a Cesium 
 * terrain format. The format is described on the Cesium 
 * wiki. 
 * セシウム地形（Cesium terrain）フォーマットの地形（terrain）
 * データにアクセスする TerrainProvider。フォーマットは、セシウ
 * ムウィキに記載されています。
 * （Cesium refdoc）
 */

 // url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
 // 2015.10.2 変更
 url : '//assets.agi.com/stk-terrain/world'
 /** url
  * The URL of the Cesium terrain server.
  * セシウム地形（Cesium terrain）サーバの URL。
  * （Cesium refdoc）
  */

});

scene.terrainProvider = terrainProvider;

ol3d.setEnabled(true);
/** setEnabled(enable)
 * Enables/disables the Cesium. This modifies the visibility 
 * style of the container element.
 * セシウムを有効または無効にします。これは、コンテナ要素の可視
 * 性スタイルを変更します。
 * （OL3-Cesium API）
 */

// Show off 3D feature picking

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
/** new ScreenSpaceEventHandler(element)
 * Handles user input events. Custom functions can be added 
 * to be executed on when the user enters input. 
 * ユーザ input イベントを処理します。カスタム関数は、ユーザが 
 *  input を入力するときに実行されるように追加できます。
 * （Cesium refdoc）
 */

var lastPicked;

handler.setInputAction(function(movement) {
/** setInputAction(action, type, modifier)
 * Set a function to be executed on an input event. 
 * input イベントで実行される関数を設定します。
 * （Cesium refdoc）
 */

 var pickedObjects = scene.drillPick(movement.position);
 /** drillPick(windowPosition, limit)
  * Returns a list of objects, each containing a `primitive` 
  * property, for all primitives at a particular window 
  * coordinate position. Other properties may also be set 
  * depending on the type of primitive. The primitives in 
  * the list are ordered by their visual order in the scene 
  * (front to back).
  * 特定のウィンドウの座標位置で、`primitive（基本要素？）`プロ
  * パティを含む、すべてのプリミティブのためのオブジェクトのリス
  * トを返します。他のプロパティは、プリミティブの種類に応じて設
  * 定することができます。リスト内のプリミティブは、シーン（前面
  * から背面へ）での視覚的順序によって順序付けられます。 
  * （Cesium refdoc）
  */

 if (Cesium.defined(pickedObjects)) {
 /** defined(value) -> Boolean
  * Returns: Returns true if the object is defined, returns 
  * false otherwise. （Cesium refdoc）
  */

  for (i = 0; i < pickedObjects.length; ++i) {
   var picked = pickedObjects[i].primitive;
   if (picked.olFeature == lastPicked) continue;

   var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(picked.position);
   /** Ellipsoid.WGS84
    * An Ellipsoid instance initialized to radii of (1.0, 
    * 1.0, 1.0). 
    * 半径（1.0、1.0、1.0）に初期化された楕円インスタンス。
    * （Cesium refdoc）
    */

   /** cartesianToCartographic(cartesian, result)
    * Converts the provided cartesian to cartographic 
    * representation. The cartesian is undefined at the 
    * center of the ellipsoid. 
    * 提供されたデカルトを地図製作表現にに変換します。デカルト
    * は、楕円体の中心に定義されていません。
    */

   console.log('Picked feature', picked.olFeature, ' is at ', carto);
   /** console.log
    * デバッガの Web コンソールにメッセージを出力します。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
    * Console/log]）
    */

   lastPicked = picked.olFeature;
  }
 } else {
  lastPicked = undefined;
 }

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
/** ScreenSpaceEventType
 * This enumerated type is for classifying mouse events: 
 * down, up, click, double click, move and move while a 
 * button is held down.
 * この列挙型は、マウスイベントを分類するためのものです：ダウ
 * ン、アップ、クリック、ダブルクリック、移動、ボタンを押して
 * いる間に移動です。
 * ScreenSpaceEventType.LEFT_CLICK()
 * Represents a mouse left click event. 
 * マウスの左クリックイベントを表します。
 */

function clearFeatures() {

 vectorSource.clear();
 /** clear(opt_fast)
  * Remove all features from the source.
  * ソースからすべてのフィーチャを削除します。
  * （ol3 API）
  */

 total = document.getElementById('total').innerHTML = 0;
}

Chromium では表示できないので、Iceweasel（Firefox）のアドレスバーに

http://localhost/~user/ol3cesiumproj/public_html/11-ol3cesium18.html

と入力して表示します。