2015年10月18日日曜日

OL3-Cesium 5 - ol3cesium dragbox example 2

5-2 JavaScript ファイルの作成
「dragbox.js(5-ol3cesium18.js)」は、マップを表示するための JavaScript ファイルです。

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

「5-ol3cesium18.js」
var ol2d = 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)
   */
  })
 ],
 target: 'map2d',
 view: new ol.View({
  center: [0, 0],
  zoom: 3
 })
});
var ol3d = new olcs.OLCesium({map: ol2d, 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;
var box = new olcs.DragBox();
/** new olcs.DragBox(opt_options)
 * (OL3-Cesium API に説明がありませんでした。)
 */
box.setScene(scene);
/** setScene(scene)
 * (OL3-Cesium API に説明がありませんでした。)
 */
box.listen('boxstart', function(event) {
/** listen
 * Adds an event listener. A listener can only be added 
 * once to an object and if it is added again the key for 
 * the listener is returned. Note that if the existing 
 * listener is a one-off listener (registered via 
 * listenOnce), it will no longer be a one-off listener 
 * after a call to listen().
 * イベントリスナを追加します。リスナはオブジェクトに一回だけ追
 * 加することができ、それが再び追加された場合、リスナのための
 * キーが返されます。既存のリスナは、ワンオフリスナ(listenOnce
 * によって登録)であれば、listen() の呼び出し後、それはもはや
 * ワンオフリスナでないことに注意してください。
 * (OL3-Cesium API)
 */
 console.log('boxstart', event);
 /** console.log()
  * デバッガの Web コンソールにメッセージを出力します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/API/
  * Console/log])
  */
});
box.listen('boxend', function(event) {
 console.log('boxend', event);
});
ol3d.setEnabled(true);
/** setEnabled(enable)
 * Enables/disables the Cesium. This modifies the visibility 
 * style of the container element.
 * セシウムを有効または無効にします。これは、コンテナ要素の可視
 * 性スタイルを変更します。
 * (OL3-Cesium API)
 */
Chromium では表示できないので、Iceweasel(Firefox)のアドレスバーに

http://localhost/~user/ol3cesiumproj/public_html/5-ol3cesium18.html

と入力して表示します。

0 件のコメント: