「vectors.js（7-ol3cesium18.js）」は、マップを表示するための JavaScript ファイルです。
OL3-Cesium API は、現在、すべて実験的（experimental）なものです。
「7-ol3cesium18.js」
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: new ol.geom.Point([700000, 200000, 100000]), /** ol.geom.Point * Point geometry.（ol3 API） */
});
var cervinFeature = new ol.Feature({
geometry: new ol.geom.Point([852541, 5776649])
});
cervinFeature.getGeometry().set('altitudeMode', 'clampToGround');
/** getGeometry()
* Get the feature's default geometry. A feature may have
* any number of named geometries. The "default" geometry
* (the one that is rendered by default) is set when
* calling ol.Feature#setGeometry.
* フィーチャのデフォルトのジオメトリを取得します。フィーチャ
* は、任意の数の指定のジオメトリのを有することができます。
* 「デフォルト」のジオメトリ（デフォルトでレンダリングされる
* もの）が ol.Feature＃setGeometry を呼び出すときに設定され
* ています。（ol3 API）
*/
/** set(key, value) * Sets a value.（ol3 API） */
var iconStyle = new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
/** ol.style.Icon
* Set icon style for vector features.
* ベクタフィーチャのアイコンスタイルを設定します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** @type * 値のタイプ（型）の説明 - 式などで表示 * （@use JSDoc[http://usejsdoc.org/]より） */
anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, // src: 'data/icon.png' src: './js/libs/ol3-cesium-v1.8/examples/data/icon.png' })),
text: new ol.style.Text({
/** ol.style.Text
* Set text style for vector features.
* ベクタフィーチャの文字列のスタイルを設定します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
text: 'Some text', textAlign: 'center', textBaseline: 'middle',
stroke: new ol.style.Stroke({
/** ol.style.Stroke
* Set stroke style for vector features.
* Note that the defaults given are the Canvas defaults,
* which will be used if option is not defined.
* The get functions return whatever was entered
* in the options; they will not return the default.
* ベクタフィーチャのためのストロークスタイルの設定。
* デフォルトは、オプションが定義されていない場合に使用され
* る Canvas のデフォルトを与えられることに注意してください。
* GET 関数は、オプションで入力されたものはすべて返します。
* それらはデフォルトを返しません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
color: 'magenta', width: 3 }),
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(0, 0, 155, 0.3)' }) }) });
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） */
cervinFeature.setStyle(iconStyle);
var image = new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': [new ol.style.Style({
image: image
})],
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
lineDash: [4],
width: 1
})
})],
'MultiLineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
})],
'MultiPoint': [new ol.style.Style({
image: image,
text: new ol.style.Text({
text: 'MP',
stroke: new ol.style.Stroke({
color: 'purple'
})
})
})],
'MultiPolygon': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
})],
'Polygon': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})],
'GeometryCollection': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'magenta',
width: 2
}),
fill: new ol.style.Fill({
color: 'magenta'
}),
image: new ol.style.Circle({
radius: 10, // pixels
fill: null,
stroke: new ol.style.Stroke({
color: 'magenta'
})
})
})],
'Circle': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
})]
};
var styleFunction = function(feature, resolution) {
var geo = feature.getGeometry();
// always assign a style to prevent feature skipping // 常にフィーチャ・スキップを防止するためのスタイルを割り当てま // す。
return geo ? styles[geo.getType()] : styles['Point']; /** 条件演算子 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]） */
/** getType() * Get the type of this geometry. * ジオメトリの型を取得。（ol3 API） */
};
var vectorSource = new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
*/
format: new ol.format.GeoJSON(), /** ol.format.GeoJSON * Feature format for reading and writing data * in the GeoJSON format. * GeoJSON フォーマットのデータを読み書きするための * フィーチャフォーマット。（ol3 API） */
// url: 'data/geojson/vector_data.geojson' url: './js/libs/ol3-cesium-v1.8/examples/data/geojson/vector_data.geojson'
});
var theCircle = new ol.Feature(new ol.geom.Circle([5e6, 7e6, 5e5], 1e6)); /** ol.geom.Circle * Circle geometry. 円のジオメトリ。(ol3 API) */
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: vectorSource, style: styleFunction });
var vectorSource2 = new ol.source.Vector({
features: [iconFeature, cervinFeature]
});
var vectorLayer2 = new ol.layer.Vector({
source: vectorSource2
});
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
/** ol.interaction.DragAndDrop
* Handles input of vector data by drag and drop.
* ドラッグアンドドロップによってベクタデータの入力を取り扱いま
* す。（ol3 API）
*/
formatConstructors: [
ol.format.GPX, /** ol.format.GPX * Feature format for reading and writing data * in the GPX format. * GPX フォーマットでデータを読み書きするためのフィー * チャのフォーマット。（ol3 API） */
ol.format.GeoJSON,
ol.format.IGC, /** ol.format.IGC * Feature format for *.igc flight recording * files. * *.igc フライト記録ファイル用のフィーチャフォーマット。 * （ol3 API） */
ol.format.KML, /** ol.format.KML * Feature format for reading and writing data * in the KML format. * KML フォーマットでデータを読み書きするためのフィー * チャのフォーマット。（ol3 API） */
ol.format.TopoJSON /** ol.format.TopoJSON * Feature format for reading and writing data * in the TopoJSON format. * TopoJSON フォーマットでデータを読み書きするためのフィー * チャのフォーマット。（ol3 API） */
] });
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]), /** ol.interaction.defaults * Set of interactions included in maps by default. * Specific interactions can be excluded by setting * the appropriate option to false in the constructor * options, but the order of the interactions is fixed. * If you want to specify a different order for * interactions, you will need to create your own * ol.interaction.Interaction instances and insert * them into a ol.Collection in the order you want * before creating your ol.Map instance. * デフォルトでマップに含まれるインターラクションのセット。 * 具体的なインターラクションは、コンストラクタのオプションで適切 * なオプションをfalseに設定することで除外することができますが、 * インターラクションの順番は固定されています。インターラクション * に対して別の順番を指定したい場合は、独自の * ol.interaction.Interaction インスタンスを作成し、ol.Map イ * ンスタンスを作成する前に、望む順番で ol.Collection にそれ * らを挿入する必要があります。（ol3 API） * （訳注：インターラクションの順番は、API を参照してください。） */
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.BingMaps({
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol3 API）
*/
key: 'Ak-dzM...（省略）',
imagerySet: 'Aerial'
})
}),
vectorLayer,
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() * デフォルトでは、マップに含まコントロールのセット。 * 特に設定しない限り、これは、以下の各コントロールの * インスタンスを含むコレクションを返します。(ol3 API） * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution */
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
collapsible: false // 折りたたみ
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
dragAndDropInteraction.on('addfeatures', function(event) {
/** on()
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。
* Returns: Unique key for the listener.（ol3 API）
*/
var vectorSource = new ol.source.Vector({
features: event.features,
projection: event.projection
});
map.getLayers().push(new ol.layer.Vector({
/** getLayers()
* Get the collection of layers associated with
* this map.
* このマップと関連するレイヤのコレクションを取得します。
* （ol3 API）
*/
/** push(elem) * Insert the provided element at the end of the * collection. * コレクションの最後に供給されたエレメントに挿入します。 * Name: elem, Type: T, Description: Element * （ol3 API） */
source: vectorSource, style: styleFunction }));
var view = map.getView(); /** getView() * Get the view associated with this map. A view * manages properties such as center and resolution. * このマップと関連するビューを取得します。ビューは、 * 中心や解像度のような属性を管理します。 * Return: The view that controls this map.（ol3 API） */
// view.fitExtent(
view.fit( /** fit(geometry, size, opt_options) <- fitExtent() * Fit the given geometry or extent based on the given map * size and border. The size is pixel dimensions of the box * to fit the extent into. In most cases you will want to * use the map size, that is map.getSize(). Takes care of * the map angle. * 指定されたマップのサイズと境界線に基づいて、指定されたジオメ * トリまたは範囲を合わせます。サイズは範囲に合わせてピクセル寸 * 法のボックスです。ほとんどの場合、マップのサイズを使用します * が、それは map.getSize（）。マップアングルに注意してくださ * い。（ol3 API[説明は Stable Only のチェックを外すと表示]） */
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
/** getExtent()
* Get the extent of the features currently in the source.
* This method is not available when the source is
* configured with useSpatialIndex set to false.
* ソースにおける現在のフィーチャの範囲を取得します。ソースが
* false に 設定されている useSpatialIndex で構成されている場
* 合、このメソッドは使用できません。（ol3 API）
*/
/** getSize() * Get the size of this map. * Returns: The size in pixels of the map in the DOM. * マップのサイズを取得。（ol3 API） */
});
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 : '//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） */
var csLabels = new Cesium.LabelCollection(); /** new LabelCollection(options) * A renderable collection of labels. Labels are * viewport-aligned text positioned in the 3D scene. * Each label can have a different font, color, scale, etc. * Labels are added and removed from the collection using * LabelCollection#add and LabelCollection#remove. * ラベルのレンダリング可能なコレクション。ラベルは、3D シーン内 * にビューポート整列テキスト配置されています。各ラベルは異なる * フォント、色、スケールなどを持っています。 * ラベルは、LabelCollection＃add と LabelCollection#remove * を使用してコレクションから追加および削除されます。 * （Cesium refdoc） */
csLabels.add({
position: Cesium.Cartesian3.fromRadians(20, 20, 0), /** new Cartesian3(x, y, z) * A 3D Cartesian point. （Cesium refdoc） */
/** Cartesian3.fromRadians(longitude, latitude, height, * ellipsoid, result) * Returns a Cartesian3 position from longitude and * latitude values given in radians. * ラジアンで指定された経度と緯度の値から Cartesian3 位置を返し * ます。（Cesium refdoc） */
text: 'Pre-existing primitive' });
scene.primitives.add(csLabels); /** primitives * Gets the collection of primitives. * 基本要素（図形を構成する点や線）[?]のコレクションを取得しま * す。（Cesium refdoc） */
// Adding a feature after the layer has been synchronized. // レイヤが同期された後、フィーチャを追加。
vectorSource.addFeature(theCircle); /** 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） */
var hasTheVectorLayer = true;
function addOrRemoveOneVectorLayer() {
if (hasTheVectorLayer) {
map.getLayers().remove(vectorLayer); /** remove(elem) * Remove the first occurrence of an element from the * collection. * コレクションから最初に出現する要素（elemnet）を削除します。 * （ol3 API） */
} else {
map.getLayers().insertAt(1, vectorLayer); /** insertAt(index, elem) * Insert an element at the provided index. * 準備された索引（index）で要素（element）を挿入します。 * （ol3 API） */
} hasTheVectorLayer = !hasTheVectorLayer; }
function addOrRemoveOneFeature() {
var found = vectorSource2.getFeatures().indexOf(iconFeature); /** getFeatures() * Get all features on the source. * ソースのすべてのフィーチャを取得します。 * Return: Features（ol3 API） */
/** Array.prototype.indexOf() * The indexOf() method returns the first index at which * a given element can be found in the array, or -1 if it * is not present. * indexOf（）メソッドは、配列中に存在する指定された要素の最初 * のインデックスを、または、それがしない場合は -1 を返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Array/indexOf]） */
if (found === -1) {
vectorSource2.addFeature(iconFeature);
} else {
vectorSource2.removeFeature(iconFeature); /** removeFeature(feature) * Remove a single feature from the source. If you want * to remove all features at once, use the source.clear() * method instead. * 単一フィーチャをソースから削除します。もし即座にすべての * フィーチャを削除したいなら、替りに source.clear() を使用 * します。（ol3 API） */
} }
var oldStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
})
});
function toggleStyle() {
var swap = theCircle.getStyle(); /** getStyle() * Get the style for features. This returns whatever was * passed to the style option at construction or to the * setStyle method. * フィーチャのスタイルを取得します。これは、確立時スタイルオプ * ションにまたは setStyle メソッドのどちらかに渡されるものを * 返します。（ol3 API） */
theCircle.setStyle(oldStyle); oldStyle = swap; }Chromium では表示できないので、Iceweasel（Firefox）のアドレスバーに
http://localhost/~user/ol3cesiumproj/public_html/7-ol3cesium18.html
と入力して表示します。
