2015年10月27日火曜日

OL3-Cesium19 14 - ol3cesium kml example 2

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

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

「14-ol3cesium19.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({
  // スイス国内の kml データなので初期表示の中心を修正。
  // center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
  center: ol.proj.transform([9, 47], '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)
   */
  // kml データの表示に時間がかかるので初期表示範囲を修正。
  // zoom: 3
  zoom: 12
 })
});
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 : '//assets.agi.com/stk-terrain/world'
 /** url
  * The URL of the Cesium terrain server.
  * セシウム地形(Cesium terrain)サーバの URL。
  * (Cesium refdoc)
  */
});
scene.terrainProvider = terrainProvider;
ol3d.getDataSources().add(Cesium.KmlDataSource.load(
/** getDataSources(){Cesium.DataSourceCollection}
 * (OL3-Cesium API に説明がありませんでした。)
 */
/** KmlDataSource.load(data, options) -> Promise.
 * Creates a Promise to a new instance loaded with the 
 * provided KML data.
 * Promise を、提供された KML データと共に、挿入された新しいイン
 * スタンスに作成します。(Cesium refdoc)
 */
 'https://api3.geo.admin.ch/ogcproxy?url=' +
 'https%3A%2F%2Fdav0.bgdi.admin.ch%2Fbazl_web%2FActive_Obstacles.kmz'
));
Chromium では表示できないので、Iceweasel(Firefox)のアドレスバーに

http://localhost/~user/ol3cesiumproj/public_html/14-ol3cesium19.html

と入力して表示します。

0 件のコメント: