12-2 JavaScript ファイルの作成
「synthvectors_batch.js（12-ol3cesium17.js）」は、マップを表示するための JavaScript ファイルです。
OL3-Cesium API は、現在、すべて実験的（experimental）なものです。
「12-ol3cesium18.js」
var total = 0;
var created = 0;
var added = 0;
var vectorLayers = [];
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;
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,
});
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）
*/
map.addLayer(vector);
/** addLayer(layer)
* Adds the given layer to the top of this map. If you
* want to add a layer elsewhere in the stack, use
* getLayers() and the methods available on ol.Collection.
* 与えられたレイヤをこのマップの一番上に追加します。あなたは、
* スタックの他の箇所にレイヤを追加したい場合は、getLayers（）と
* ol.Collection で使用可能なメソッドを使用します。（ol3 API）
*/
vectorLayers.push(vector);
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],
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() {
vectorLayers.forEach(function(layer) {
/** forEach(f, opt_this)
* Iterate over each element, calling the provided callback.
* 提供されるコールバックを呼び出して、各要素を反復処理します。
* （ol3 API）
*/
map.getLayers().remove(layer);
/** getLayers()
* Get the collection of layers associated with
* this map.
* このマップと関連するレイヤのコレクションを取得します。
* （ol3 API）
*/
/** remove(elem)
* Remove the first occurrence of an element from the
* collection.
* コレクションから最初に出現する要素（elemnet）を削除します。
* （ol3 API）
*/
});
vectorLayers.length = 0;
total = document.getElementById('total').innerHTML = 0;
document.getElementById('created').innerHTML = '';
document.getElementById('added').innerHTML = '';
}
Chromium では表示できないので、Iceweasel（Firefox）のアドレスバーに
http://localhost/~user/ol3cesiumproj/public_html/12-ol3cesium18.html
と入力して表示します。
