2 - ol3.11ex 139b - Raster reprojection example 2

「reprojection.js（2139-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2139-ol3ex.js」

proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
 '+x_0=400000 +y_0=-100000 +ellps=airy ' +
 '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
 '+units=m +no_defs');

var proj27700 = ol.proj.get('EPSG:27700');
/** ol.proj.get(projectionLike)
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション·オブジェクトを取得
 * （ol3 API）
 */

proj27700.setExtent([0, 0, 700000, 1300000]);
/** setExtent(extent)
 * Set the validity extent for this projection.
 * この投影の有効範囲を設定します。（ol3 API）
 */

proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl ' +
 '+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs');
var proj23032 = ol.proj.get('EPSG:23032');
proj23032.setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]);

proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' +
 '-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 ' +
 '+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
var proj5479 = ol.proj.get('EPSG:5479');
proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);

proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 ' +
 '+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' +
 '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
var proj21781 = ol.proj.get('EPSG:21781');
proj21781.setExtent([485071.54, 75346.36, 828515.78, 299941.84]);

proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 ' +
 '+x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
var proj3413 = ol.proj.get('EPSG:3413');
proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);

proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' +
 '+a=6370997 +b=6370997 +units=m +no_defs');
var proj2163 = ol.proj.get('EPSG:2163');
proj2163.setExtent([-8040784.5135, -2577524.9210, 3668901.4484, 4785105.1096]);

proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' +
 '+units=m +no_defs');
var proj54009 = ol.proj.get('ESRI:54009');
proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);

var layers = [];

layers['bng'] = 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.XYZ({
 /** ol.source.XYZ
  * Layer source for tile data with URLs in a set XYZ 
  * format that are defined in a URL template. By 
  * default, this follows the widely-used Google grid 
  * where x 0 and y 0 are in the top left. Grids like 
  * TMS where x 0 and y 0 are in the bottom left can 
  * be used by using the {-y} placeholder in the URL 
  * template, so long as the source does not have a 
  * custom tile grid. In this case, ol.source.TileImage 
  * can be used with a tileUrlFunction such as:
  *
  * tileUrlFunction: function(coordinate) { 
  *  return 'http://mapserver.com/' 
  *  + coordinate[0] + '/' 
  *  + coordinate[1] + '/' 
  *  + coordinate[2] + '.png'; }
  * 
  * URL テンプレートで定義されているセット XYZ 形式の URL 
  * を持つタイルデータのレイヤソース。デフォルトでは、これは、
  * x0 と y0 が左上にある広く使用されている Google のグリッド
  * に従います。x0 と y0 が左下にある TMS のようなグリッドは、
  * ソースがカスタムタイルグリッドを持っていない限り、URL　テ
  * ンプレートに {-y} プレースホルダを使用して使用することが
  * できます。この場合、ol.source.TileImage は tileUrlFunction 
  * で次のように使用できます。（ol3 API）
  */

  projection: 'EPSG:27700',

  url: 'http://tileserver.maptiler.com/miniscale/{z}/{x}/{y}.png',
  /** url
   * URL template. Must include {x}, {y} or {-y}, and 
   * {z} placeholders. A {?-?} template pattern, for 
   * example subdomain{a-f}.domain.com, may be used 
   * instead of defining each one separately in the 
   * urls option.
   * URLテンプレート。 {x}、{y} または {-y}、と {z} プレース
   * ホルダを含める必要があります。例えば 
   * subdomain{a-f}.domain.com の {?-?} テンプレートパターン
   * は、urls オプションでそれぞれを個別に定義する代わりに、
   * 使用することができます。（ol3 API）
   */

  crossOrigin: '',
  /** 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）
   */

  maxZoom: 6
 })
});

layers['mapquest'] = new ol.layer.Tile({
 source: new ol.source.MapQuest({layer: 'osm'})
 /** ol.source.MapQuest
  * Layer source for the MapQuest tile server.
  * MapQuest タイルサーバのレイヤソース。（ol3 API
  * 2 - ol3ex 23b - MapQuest example 2 参照）
  */

});

layers['wms4326'] = new ol.layer.Tile({

 source: 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',
  crossOrigin: '',

  params: {
  /** params
   * WMS request parameters. At least a LAYERS param is 
   * required. STYLES is '' by default. VERSION is 
   * 1.3.0 by default. WIDTH, HEIGHT, BBOX and CRS (SRS 
   * for WMS version < 1.3.0) will be set dynamically. 
   * Required.
   * WMSは、パラメータを要求します。少なくとも LAYERS の 
   * param が必要です。スタイルは「デフォルト」に従います。 
   * VERSION は、デフォルトでは 1.3.0 です。WIDTH、HIGHT、
   * BBOX と CRS（WMS バージョン 1.3.0 未満用 SRS）は、動的
   * に設定されます。 必須。（ol3 API）
   */

   'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
  },
  projection: 'EPSG:4326'
 })
});

layers['wms21781'] = new ol.layer.Tile({
 source: new ol.source.TileWMS({

  attributions: [new ol.Attribution({
  /** ol.Attribution
   * An attribution for a layer source.
   * レイヤソースの属性（ol3 API）
   */

   html: '© ' +
    '<a href="http://www.geo.admin.ch/internet/geoportal/' +
    'en/home.html"≶' +
    'Pixelmap 1:1000000 / geo.admin.ch</a≶'
  })],

  crossOrigin: 'anonymous',
  params: {
   'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
   'FORMAT': 'image/jpeg'
  },
  url: 'http://wms.geo.admin.ch/',
  projection: 'EPSG:21781'
 })
});

var parser = new ol.format.WMTSCapabilities();
/** ol.format.WMTSCapabilities
 * Format for reading WMTS capabilities data
 * WMTS capabilities データを読み込むためのフォーマット。
 * （ol3 API）
 */

$.ajax('http://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
 'wmts.cgi?SERVICE=WMTS&request=GetCapabilities').then(function(response) {
/** jQuery.ajax()
 * Perform an asynchronous HTTP (Ajax) request.
 * 非同期 HTTP（Ajax）リエストを実行します。
 * （jQuery[http://api.jquery.com/jquery.ajax/]）
 */

/** deferred.then()
 * Add handlers to be called when the Deferred object is 
 * resolved, rejected, or still in progress. 
 * deferred オブジェクトが resolved、rejected か、まだ処理
 * 途中（progress）のとき呼び出されるハンドラを追加します。
 * （juery[http://api.jquery.com/deferred.then/]）
 */

 var result = parser.read(response);
 /** read()
  * Read a WMTS capabilities document.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 var options = ol.source.WMTS.optionsFromCapabilities(result,
 /** ol.source.WMTS.optionsFromCapabilities
  * Return: WMTS source options object.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'});
 options.crossOrigin = '';
 options.projection = 'EPSG:3413';
 options.wrapX = false;
 layers['wmts3413'] = new ol.layer.Tile({
  source: new ol.source.WMTS(options)
 });
});

layers['grandcanyon'] = new ol.layer.Tile({
 source: new ol.source.XYZ({
  url: 'http://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png',
  crossOrigin: '',

  tilePixelRatio: 2,
  /** tilePixelRatio
   * The pixel ratio used by the tile service. For 
   * example, if the tile service advertizes 256px by 
   * 256px tiles but actually sends 512px by 512px 
   * tiles (for retina/hidpi devices) then 
   * tilePixelRatio should be set to 2. Default is 1.
   * タイルサービスによって使用されるピクセル比。たとえば、タ
   * イルサービスが 256px x 256px タイルを通知する場合、実際
   * には 512px x 512px  タイル（retina / hidpiデバイス用）
   * を送信し、それから、タイル Pixel Ratio は 2 に設定しな
   * ければなりません。デフォルトは 1 です。
　 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  maxZoom: 15,
  attributions: [new ol.Attribution({
   html: 'Tiles © USGS, rendered with ' +
    '<a href="http://www.maptiler.com/"≶MapTiler</a≶'
  })]
 })
});

var startResolution =

 ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()) / 256;
 /** ol.extent.getWidth(extent)
  * Return: Width.（ol3 API）
  */

/** ol.proj.get(projectionLike)
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション·オブジェクトを取得
 * （ol3 API）
 */

/** getExtent()
 * Get the validity extent for this projection.
 * この投影の有効範囲を取得。（ol3 API）
 */

var resolutions = new Array(22);
/** Array(arraylength)
 * JavaScript は配列を扱うことができます。配列とは順序を持つ複
 * 数のデータの集合であり、JavaScript のグローバルオブジェクト 
 * である Array は、高位の、（C言語等で云うところの）「リス
 * ト」の様な、配列のコンストラクタです。
 * arraylength
 * Array コンストラクタに渡される唯一の引数（arrayLength）に 
 * 0 から 4,294,967,295( 232-1 ) までの整数値を指定する場合
 * その値を要素数とする配列が作成されます。その際に範囲外の値
 * は、を指定した場合には、例外: RangeError がスローされます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Array]）
 */

for (var i = 0, ii = resolutions.length; i < ii; ++i) {

 resolutions[i] = startResolution / Math.pow(2, i);
 /** Math.pow(base, exponent)
  * base を exponent 乗した値、つまり、base^exponent の
  * 値を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/pow]）
  */
}

layers['states'] = new ol.layer.Tile({
 source: new ol.source.TileWMS({
  url: 'http://demo.boundlessgeo.com/geoserver/wms',
  crossOrigin: '',
  params: {'LAYERS': 'topp:states', 'TILED': true},

  serverType: 'geoserver',
  /** serverType
   * The type of the remote WMS server. Currently 
   * only used when hidpi is true. Default is 
   * undefined.
   * リモート WMS サーバのタイプ。 現在、hidpi が true 
   * の場合のみ使用。デフォルトでは定義されていません。
　 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  tileGrid: new ol.tilegrid.TileGrid({
  /** tileGrid
   * Tile grid. Base this on the resolutions, 
   * tilesize and extent supported by the server. 
   * If this is not defined, a default grid will be 
   * used: if there is a projection extent, the 
   * grid will be based on that; if not, a grid 
   * based on a global extent with origin at 
   * 0,0 will be used.
   * タイルグリッド。サーバーがサポートしていル解像度、タイル
   * サイズと範囲に関してこれに基づいています。これが定義され
   * ていない場合、デフォルトのグリッドが使用されます：投影範
   * 囲が存在する場合、グリッドはそれに基づくことになります。
   * そうでない場合は、0, 0 を原点とするグローバルな範囲に基
   * づいたグリッドが使用されます。（ol3 API）
   */

  /** ol.tilegrid.TileGrid
   * Base class for setting the grid pattern for 
   * sources accessing tiled-image servers.
   * タイル画像サーバにアクセスするソースのグリッドパターンを
   * 設定するための基本クラス。（ol3 API）
   */

   extent: [-13884991, 2870341, -7455066, 6338219],
   /** extent
    * Extent for the tile grid. No tiles outside this 
    * extent will be requested by ol.source.Tile 
    * sources. When no origin or origins are 
    * configured, the origin will be set to the 
    * top-left corner of the extent.
    * タイルグリッドの範囲。この範囲外ではタイルは 
    * ol.source.Tile ソースによって要求されません。origin 
    * がない、または、origins が構成されていない場合には、原点
    * は exten の左上隅に設定されます。
 　 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   resolutions: resolutions,
   /** resolutions
    * Resolutions. The array index of each resolution 
    * needs to match the zoom level. This means that 
    * even if a minZoom is configured, the resolutions 
    * array will have a length of maxZoom + 1. Required.
    * 解像度。各解像度の配列インデックスは、ズームレベルを一
    * 致させる必要があります。これは minZoom が設定されている
    * 場合でも、解像度配列は maxZoom+1 の長さを有することを意
    * 味します。必須。（ol3 API）
    */

   tileSize: [512, 256]
  }),
  projection: 'EPSG:3857'
 })
});

var map = new ol.Map({
 layers: [
  layers['mapquest'],
  layers['bng']
 ],
 renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  projection: 'EPSG:3857',
  center: [0, 0],
  zoom: 2
 })
});

var baseLayerSelect = document.getElementById('base-layer');
var overlayLayerSelect = document.getElementById('overlay-layer');
var viewProjSelect = document.getElementById('view-projection');
var renderEdgesCheckbox = document.getElementById('render-edges');
var renderEdges = false;

function updateViewProjection() {
 var newProj = ol.proj.get(viewProjSelect.value);
 var newProjExtent = newProj.getExtent();
 var newView = new ol.View({
  projection: newProj,

  center: ol.extent.getCenter(newProjExtent || [0, 0, 0, 0]),
  /** ol.extent.getCenter(extent)
   * Get the center coordinate of an extent.
   * 範囲の中心座標を取得します。（ol3 API）
   */

  zoom: 0,
  extent: newProjExtent || undefined
 });

 map.setView(newView);
 /** setView(view)
  * Set the view for this map.
  * map の view を設定します。（ol3 API）
  */

  // Example how to prevent double occurence of 
  // map by limiting layer extent
  // レイヤの範囲を制限することで、マップの二重の発生を防止
  // する方法の例。

 if (newProj == ol.proj.get('EPSG:3857')) {
  layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]);
 } else {
  layers['bng'].setExtent(undefined);
 }
}

/**
 * @param {Event} e Change event.
 */
/** 「@param」
 * The @param tag provides the name, type, and 
 * description of a function parameter.
 * The @param tag requires you to specify the name of 
 * the parameter you are documenting. You can also 
 * include the parameter's type, enclosed in curly 
 * brackets, and a description of the parameter.
 * @paramタグは、関数パラメータの名前と型、説明を提供します。
 * @paramタグを使用すると、文書化されたパラメータの名前を
 * 指定する必要があります。また、パラメータのタイプと、中括
 * 弧で囲まれたおよびパラメータの説明を含めることができます。
 * （@use JSDoc [http://usejsdoc.org/tags-param.html]）
 */

viewProjSelect.onchange = function(e) {
/** GlobalEventHandlers.onchange()
 * The onchange property sets and returns the event handler 
 * for the change event.
 * onchange プロパティは、change イベントに対してイベントハ
 * ンドラを設定、および、返します。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/GlobalEventHandlers/onchange]）
 */

 updateViewProjection();
};

updateViewProjection();

var updateRenderEdgesOnLayer = function(layer) {

 if (layer instanceof ol.layer.Tile) {
 /** instanceof
  * instanceof 演算子は、オブジェクトが自身のプロトタイプに
  * コンストラクタの prototype プロパティを持っているかを確
  * 認します。
  * （MDN[https://developer.mozilla.org/ja/docs/
  * JavaScript/Reference/Operators/instanceof]）
  */

  var source = layer.getSource();
  /** getSource()
   * Return the associated tilesource of the the layer.
   * タイルレイヤの関連するタイルソースを返します。（ol3 API）
   */

  if (source instanceof ol.source.TileImage) {
  /** ol.source.TileImage 
   * Base class for sources providing images divided into 
   * a tile grid.
   * タイルグリッドに分割された画像を提供するソースの基本ク
   * ラス。（ol3 API）
   */

   source.setRenderReprojectionEdges(renderEdges);
   /** setRenderReprojectionEdges(render)
    * Sets whether to render reprojection edges or not 
    * (usually for debugging).
    * 再投影エッジをレンダリングするかしないか（通常はデバッ
    * グ用）を設定します。
 　 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

  }
 }
};

/**
 * @param {Event} e Change event.
 */
baseLayerSelect.onchange = function(e) {
 var layer = layers[baseLayerSelect.value];
 if (layer) {

  layer.setOpacity(1);
  /** setOpacity(opacity)
   * Set the opacity of the layer, allowed values range 
   * from 0 to 1.
   * レイヤの不透明度を設定します。許可される値は0から1まで
   * の範囲。（ol3 API）
   */

  updateRenderEdgesOnLayer(layer);

  map.getLayers().setAt(0, layer);
  /** getLayers()
   * Get the collection of layers associated with this 
   * map.
   * このマップと関連するレイヤのコレクションを取得します。
   * （ol3 API）
   */

  /** setAt(index, elem)
   * Set the element at the provided index
   * 提供されたインデックス位置にあるエレメントを設定します
   * （ol3 API）
   */

 }
};

/**
 * @param {Event} e Change event.
 */
overlayLayerSelect.onchange = function(e) {
 var layer = layers[overlayLayerSelect.value];
 if (layer) {
  layer.setOpacity(0.7);
  updateRenderEdgesOnLayer(layer);
  map.getLayers().setAt(1, layer);
 }
};

/**
 * @param {Event} e Change event.
 */
renderEdgesCheckbox.onchange = function(e) {
  renderEdges = renderEdgesCheckbox.checked;

  map.getLayers().forEach(function(layer) {
  /** forEach(f, opt_this)
   * Iterate over each element, calling the provided 
   * callback.
   * 提供されるコールバックを呼び出して、各エレメントを反復
   * 処理します。（ol3 API）
   */

  updateRenderEdgesOnLayer(layer);
 });
};