「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);
