「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
と入力して表示します。
0 件のコメント:
コメントを投稿