OL3-Cesium 13 - ol3cesium lazy initialization 2

13-2 JavaScript ファイルの作成
「lazy.js（13-ol3cesium18.js）」は、マップを表示するための JavaScript ファイルです。

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

「13-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）
    */

  })
 ],

 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 // 折りたたみ
  })
 }),
 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;

function _doToggle() {

 ol3d.setEnabled(!ol3d.getEnabled());
 /** setEnabled(enable)
  * Enables/disables the Cesium. This modifies the 
  * visibility style of the container element.
  * セシウムを有効または無効にします。これは、コンテナ要素の可視
  * 性スタイルを変更します。
  * （OL3-Cesium API）
  */
 /** getEnabled()
  * （OL3-Cesium API に説明がありませんでした。）
  */

}

function toggle3D() {
 if (!ol3d) {

  var s = document.createElement("script");
  /** document.createElement
   * 指定の要素名の要素を生成します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * API/document.createElement）
   */

  s.type = "text/javascript";
  // s.src = "../Cesium/Cesium.js";
  s.src = "./js/libs/ol3-cesium-v1.8/Cesium/Cesium.js";
  console.log('loading Cesium...');

  s.onload = function() {
  /** window.onload
   * window の load イベントに対応するイベントハンドラです。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
   * GlobalEventHandlers/onload]）
   */

   init3D();
   _doToggle();
  };

  document.body.appendChild(s);
  /** Node.appendChild
   * 特定の親ノードの子ノードリストの末尾にノードを追加します。
   * 追加しようとしたノードが既に存在していたら、それは現在の
   * 親ノードから除かれ、新しい親ノードに追加されます。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * API/Node.appendChild]）
   */

 } else {
  _doToggle();
 }
}

function init3D() {

 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;
}

Chromium では表示できないので、Iceweasel（Firefox）のアドレスバーに

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

と入力して表示します。