OL3-Cesium 6 - ol3cesium raster layer synchronization example 2

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

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

「6-ol3cesium18.js」

var view = new ol.View({

 center: ol.proj.transform([-112.2, 36.06], '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: 11
});

var layer0 = 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.MapQuest({layer: 'sat'})
 /** ol.source.MapQuest
  * Layer source for the MapQuest tile server.
  * MapQuest タイルサーバのレイヤソース。（ol3 API
  * 2 - ol3ex 23b - MapQuest example 2 参照）
  */

});
var layer1 = new ol.layer.Tile({

 source: new ol.source.TileJSON({
 /** ol.source.TileJSON 
  * Layer source for tile data in TileJSON format.
  * TileJSON フォーマットのタイルデータのためのレイヤソース。
  *（ol3 API）
  */

  url: 'http://tileserver.maptiler.com/grandcanyon.json',

  crossOrigin: 'anonymous'
  /** crossOrigin
   * The crossOrigin attribute for loaded images. Note 
   * that you must provide a crossOrigin value if you 
   * are using the WebGL renderer or if you want to 
   * access pixel data with the Canvas renderer. See 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image for more detail.
   * ロードされたイメージの crossOrigin属性。WebGLのレンダ
   * ラーを使用している場合、または、キャンバスレンダラでピ
   * クセルデータにアクセスする場合、crossOrigin 値を提供な
   * ければならないことに注意してください。詳細は 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image を参照してください。（ol3 API）
   */

 })
});
var layer2 = new ol.layer.Tile({
 source: new ol.source.TileJSON({
  url: 'http://api.tiles.mapbox.com/v3/' +
   'mapbox.world-borders-light.jsonp',
  crossOrigin: 'anonymous'
 })
});
var ol2d = new ol.Map({

 layers: [layer0, new ol.layer.Group({layers: [layer1, layer2]})],
 /** ol.layer.Group
  * A ol.Collection of layers that are handled together.
  * A generic change event is triggered when the 
  * group/Collection changes.
  * 同時に扱うレイヤの ol.Collection。グループ/コレクション
  * が変更されるとき、一般的な変更イベントがトリガされます。
  * （ol3 API）
  */

 target: 'map2d',
 view: view,
 renderer: 'webgl'
});

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;

ol3d.setEnabled(true);

var addBingMaps = function() {

 ol2d.addLayer(new ol.layer.Tile({
 /** 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）
  */

  source: new ol.source.BingMaps({
  /** ol.source.BingMaps
   * Layer source for Bing Maps tile data.
   * Bing Maps タイルデータのレイヤソース。（ol3 API）
   */

   key: 'Ak-dzM...（省略）',
   imagerySet: 'Aerial'
  })
 }));
};

var addOSM = function() {
 ol2d.addLayer(new ol.layer.Tile({
  opacity: 0.7,

  source: new ol.source.OSM()
  /** ol.source.OSM 
   * Layer source for the OpenStreetMap tile server.
   * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
   */

 }));
};

var addStamen = function() {
 ol2d.addLayer(new ol.layer.Tile({

  source: new ol.source.Stamen({
  /** ol.source.Stamen
   * Layer source for the Stamen tile server.
   * Stamen タイルサーバのレイヤソース。（ol3 API）
   * （2 - ol3ex 24b - Stamen example 1 参照）
   */

   opacity: 0.7,
   layer: 'watercolor'
  })
 }));
};

var tileWMSSource = 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': 'topp:states', 'TILED': true},
 serverType: 'geoserver',
 crossOrigin: 'anonymous'
});

var addTileWMS = function() {
 ol2d.addLayer(new ol.layer.Tile({
  opacity: 0.5,
  extent: [-13884991, 2870341, -7455066, 6338219],
  source: tileWMSSource
 }));
};

var changeI = 0;
var changeTileWMSParams = function() {

 tileWMSSource.updateParams({
 /** updateParams(params)
  * Update the user-provided params.
  * ユーザ提供パラメータを更新します。（ol3 API）
  */

  'LAYERS': (changeI++) % 2 == 0 ? 'nurc:Img_Sample' : 'topp:states'
   /** 条件演算子 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]）
    */

 });
};

var addTileJSON = function() {
 ol2d.addLayer(layer2);
};

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

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

と入力して表示します。