OL3-Cesium123 15 - ol3cesium tracking example 2

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

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

「15-ol3cesium123.js」

var point = new ol.geom.Point([700000, 200000, 100000]);
/** ol.geom.Point
 * Point geometry.（ol3 API）
 */

var iconFeature = 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: point
});

var iconStyle = new ol.style.Style({
/** ol.style.Style 
 * Container for vector feature rendering styles. Any 
 * changes made to the style or its children through 
 * set*() methods will not take effect until the feature 
 * or layer that uses the style is re-rendered.
 * ベクタフィーチャがスタイルを描画するためのコンテナ。
 * スタイルや set*() メソッドを通じてその子に加えられた変
 * 更は、スタイルを使用するフィーチャまたはレイヤが再レン
 * ダリングされるまで有効になりません。
 * （ol3 API[experimental]）
 */

 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 /** ol.style.Icon 
  * Set icon style for vector features.
  * ベクタフィーチャのアイコンスタイルを設定します。
  * （ol3 API[experimental]）
  */

 /** 「@type」 
  * 値のタイプ（型）の説明 - 式などで表示
  * （@use JSDoc[http://usejsdoc.org/]より）
  */

  anchor: [0.5, 46],
  /** center:
   * Anchor. Default value is [0.5, 0.5] (icon center).
   * （ol3 API[experimental]）
   */

  anchorXUnits: 'fraction',
  /** anchorXUnits
   * Units in which the anchor x value is specified. A 
   * value of 'fraction' indicates the x value is a 
   * fraction of the icon. A value of 'pixels' indicates 
   * the x value in pixels. Default is 'fraction'.
   * アンカーx値が指定されている単位。 'fraction'の値は、
   * x値がアイコンの分数であることを示します。 'pixels' 
   * の値はx値をピクセル単位で示します。 デフォルトは 
   * 'fraction'です。
   * （ol3 API[experimental]）
   */

  anchorYUnits: 'pixels',
  /** anchorYUnits
   * Units in which the anchor y value is specified. A 
   * value of 'fraction' indicates the y value is a 
   * fraction of the icon. A value of 'pixels' indicates 
   * theyx value in pixels. Default is 'fraction'.
   * アンカーy値が指定されている単位。 'fraction'の値は、
   * y値がアイコンの分数であることを示します。 'pixels' 
   * の値はy値をピクセル単位で示します。 デフォルトは 
   * 'fraction'です。
   * （ol3 API[experimental]）
   */

  opacity: 0.75,
  /** opacity:
   * Opacity of the icon. Default is 1.
   * （ol3 API[experimental]）
   */

  //src: 'data/icon.png'
  src: './js/libs/ol3-cesium-v1.23/examples/data/icon.png'
  /** src:
   * Image source URI. Required.
   * （ol3 API[experimental]）
   */

 }))
});

iconFeature.setStyle(iconStyle);
/** 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）
 */

var vectorSource2 = new ol.source.Vector({
/** ol.source.Vector
 * Provides a source of features for vector layers. 
 * Vector features provided by this source are 
 * suitable for editing. See ol.source.VectorTile for 
 * vector data that is optimized for rendering.
 * ベクタレイヤのフィーチャのソースを用意します。このソース
 * が提供するベクタフィーチャは、編集に適しています。レンダ
 * リングのために最適化されたベクタデータの 
 * ol.source.VectorTile を参照してください。（ol3 API）
 */

 features: [iconFeature]
 /** features:
  * Features. If provided as ol.Collection, the features 
  * in the source and the collection will stay in sync.
  * フィーチャ。ol.Collection として提供された場合、ソース内
  * のフィーチャとコレクションが同期したままになります。
  * （ol3 API）
  */

});

var imageVectorSource = new ol.source.ImageVector({
/** ol.source.ImageVector 
 * An image source whose images are canvas elements 
 * into which vector features read from a vector source 
 * (ol.source.Vector) are drawn. An ol.source.ImageVector 
 * object is to be used as the source of an image layer 
 * (ol.layer.Image). Image layers are rotated, scaled, 
 * and translated, as opposed to being re-rendered, 
 * during animations and interactions. So, like any 
 * other image layer, an image layer configured with 
 * an ol.source.ImageVector will exhibit this behaviour. 
 * This is in contrast to a vector layer, where vector 
 * features are re-drawn during animations and interactions.
 * ベクタソース（ol.source.Vector）から読み込まれたベクタ
 * フィーチャがキャンバスエレメントに描画されたイメージのイ
 * メージソース。ol.source.ImageVectorオブジェクトは、
 * イメージレイヤのソース（ol.layer.Image）として使用さ
 * れます。イメージレイヤは、アニメーションとインターラクショ
 * ンの間に、再レンダリングされるのではなく、回転、拡大縮小、
 * および変換されています。それで、他のイメージレイヤと同様に、
 * ol.source.ImageVector で設定されたイメージレイヤは、
 * この動作を表します。これは、ベクタフィーチャがアニメーショ
 * ンとインターラクションの間に再描画されるベクタレイヤとは
 * 対照的です。（ol3 API[experimental]）
 */

 source: vectorSource2
 /** source:
  * The vector source from which the vector features drawn 
  * in canvas elements are read. Required.
  * キャンバス要素に描かれたベクタフィーチャが読み込まれる
  * ベクタソース。 必須。（ol3 API[experimental]）
  */

});

var vectorLayer2 = new ol.layer.Image({
/** ol.layer.Image
 * Server-rendered images that are available for arbitrary 
 * extents and resolutions. 
 * 任意の範囲と解像度で利用可能な server-rendered イメージ。
 * （ol3 API）
 */

 source: imageVectorSource
});

var map = new ol.Map({
 layers: [

  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.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */

  }),
  vectorLayer2
 ],
 target: 'map2d',

 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()
  * Set of controls included in maps by default. 
  * Unless configured otherwise, this returns a 
  * collection containing an instance of each of the 
  * following controls:
  * ol.control.Zoom, ol.control.Rotate, 
  * ol.control.Attribution
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API）
  */

  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ（型）の説明 - 式などで表示
   * （@use JSDoc[http://usejsdoc.org/]より）
   */

   collapsible: false // 折りたたみ
  })
 }),
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

var ol3d = new olcs.OLCesium({map: map/*, target: 'map3d'*/});
/** 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: '//assets.agi.com/stk-terrain/world',
 /** url:
  * The URL of the Cesium terrain server.
  * セシウム地形（Cesium terrain）サーバの URL。
  * （Cesium refdoc）
  */

 requestVertexNormals: false
 /** requestVertexNormals:
  * Flag that indicates if the client should request 
  * additional lighting information from the server, in the 
  * form of per vertex normals if available.
  * クライアントが追加のライティング情報をサーバから入手する
  * 必要がある場合、使用可能なら頂点ごとの法線（vertex 
  * normals）形式にするかどうかを示すフラグ。
  * （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）
 */

var tracking = false;
function toggleTracking() {
 tracking = !tracking;

 ol3d.trackedFeature = tracking ? iconFeature : undefined;
 /** 条件演算子 condition ? expr1 : expr2 
  * condition: true か false かを評価する条件文です。
  * expr1, expr2: 各々の値の場合に実行する式です。
  * condition が true の場合、演算子は expr1 の値を選択しま
  * す。そうでない場合は expr2 の値を選択します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Guide/Expressions_and_Operators]）
  */
}

setInterval(function() {

 var old = point.getCoordinates();
 /** getCoordinates()
  * Return the coordinates of the multipoint.
  * マルチポイントの座標を返します。（ol3 API）
  */

 point.setCoordinates([
 /** setCoordinates(coordinates, opt_layout)
  * Set the coordinates of the multipoint.
  * マルチポイントの座標を設定します。（ol3 API）
  */

  old[0] + 1000 * Math.random(),
  old[1] + 1000 * Math.random(),
  old[2]
 ]);
 iconFeature.changed();
}, 100);