2015年10月18日日曜日

OL3-Cesium 10 - ol3cesium exported methods example 2

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

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

「10-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: 'map',
 view: new ol.View({
  center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します(オリジナルを変更しません)。(ol3 API)
   */
  zoom: 3
 })
});
var ol3d = new olcs.OLCesium({map: ol2d});
/** 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 camera = ol3d.getCamera();
/** getCamera()
 * (OL3-Cesium API に説明がありませんでした。)
 */
var infoDiv = document.getElementById('infoDiv');
var printInfo = function() {
 infoDiv.innerHTML = 
  'Center: ' + camera.getCenter() + '<br />' +
  /** getCenter()
   * Shortcut for ol.View.getCenter().
   * ol.View.getCenter() のショートカット。
   * (OL3-Cesium API)
   */
  'Distance: ' + camera.getDistance() + '<br />' +
  /** getDistance()
   * Returns: Distance in meters. 
   * (OL3-Cesium API)
   */
  'Heading: ' + camera.getHeading() + '<br />' +
  /** getHeading()
   * Returns: Heading in radians.
   * (OL3-Cesium API)
   */
  'Tilt: ' + camera.getTilt() + '<br />' +
  /** getTilt()
   * Returns: Tilt in radians. 
   * (OL3-Cesium API)
   */
  '<i>Position:</i> ' + camera.getPosition() + '<br />' +
  /** getPosition()
   * Calculates position under the camera.
   * camera のもとで位置を計算します。
   * Returns: Same projection as the ol.View.  
   * (OL3-Cesium API)
   */
  '<i>Altitude:</i> ' + camera.getAltitude() + '<br />';
  /** getAltitude()
   * Returns: Altitude in meters.  
   * (OL3-Cesium API)
   */
};
setInterval(printInfo, 100);
/** WindowTimers.setInterval()
 * Calls a function or executes a code snippet repeatedly, 
 * with a fixed time delay between each call to that 
 * function. Returns an intervalID.
 * 関数を呼び出すか、各呼び出しとその関数の間に一定の時間遅延で、
 * 繰り返しコードスニペットを実行します。 intervalID を返します。
 * (MDN[https://developer.mozilla.org/en-US/docs/Web/API/
 * WindowTimers/setInterval])
 */
Chromium では表示できないので、Iceweasel(Firefox)のアドレスバーに

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

と入力して表示します。

0 件のコメント: