2 - ol3.11ex 140b - Reprojection with EPSG.io database search 2

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

「2140-ol3ex.js」

var map = 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.MapQuest({layer: 'osm'})
 /** ol.source.MapQuest
  * Layer source for the MapQuest tile server.
  * MapQuest タイルサーバのレイヤソース。（ol3 API
  * 2 - ol3ex 23b - MapQuest example 2 参照）
  */
  })
 ],
 renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  projection: 'EPSG:3857',
  center: [0, 0],
  zoom: 1
 })
});

var queryInput = document.getElementById('epsg-query');
var searchButton = document.getElementById('epsg-search');
var resultSpan = document.getElementById('epsg-result');
var renderEdgesCheckbox = document.getElementById('render-edges');

function setProjection(code, name, proj4def, bbox) {
 if (code === null || name === null || proj4def === null || bbox === null) {
  resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...';

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

   projection: 'EPSG:3857',
   center: [0, 0],
   zoom: 1
  }));
  return;
 }

 resultSpan.innerHTML = '(' + code + ') ' + name;

 var newProjCode = 'EPSG:' + code;
 proj4.defs(newProjCode, proj4def);
 var newProj = ol.proj.get(newProjCode);

 var fromLonLat = ol.proj.getTransform('EPSG:4326', newProj);
/** ol.proj.getTransform(source, destination)
 * Given the projection-like objects, searches for a
 * transformation function to convert a coordinates 
 * array from the source projection to the destination 
 * projection.
 * projection 系オブジェクトを与えられると、変換関数のための
 * 検索は、ソース投影から宛先の投影にの座標の配列に変換します。
 * （ol3 API）
 */

 // very approximate calculation of projection extent
 // 投影範囲のより正確な近似計算

 var extent = ol.extent.applyTransform(
  [bbox[1], bbox[2], bbox[3], bbox[0]], fromLonLat);
 /** ol.extent.applyTransform(extent, transformFn, 
  * opt_extent)
  * Apply a transform function to the extent.
  * 範囲の transform 関数を適用します。（ol3 API）
  */

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

 var newView = new ol.View({
  projection: newProj
 });
 map.setView(newView);

 var size = map.getSize();
 /** getSize()
  * Get the size of this map.
  * Returns: The size in pixels of the map in the DOM.
  * マップのサイズを取得。（ol3 API）
  */

 if (size) {

  newView.fit(extent, size);
 /** fit(geometry, size, opt_options)
  * Fit the given geometry or extent based on the given map 
  * size and border. The size is pixel dimensions of the box 
  * to fit the extent into. In most cases you will want to 
  * use the map size, that is map.getSize(). Takes care of 
  * the map angle.
  * 指定されたマップのサイズと境界線に基づいて、指定されたジオメ
  * トリまたは範囲を合わせます。サイズは範囲に合わせてピクセル寸
  * 法のボックスです。ほとんどの場合、マップのサイズを使用します
  * が、それは map.getSize（）。マップアングルに注意してくださ
  * い。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 }
}

function search(query) {
 resultSpan.innerHTML = 'Searching...';

 $.ajax({
 /** jQuery.ajax()
  * Perform an asynchronous HTTP (Ajax) request.
  * 非同期 HTTP（Ajax）リエストを実行します。
  * （jQuery[http://api.jquery.com/jquery.ajax/]）
  */

 url: 'http://epsg.io/?format=json&q=' + query,
 dataType: 'jsonp',
 success: function(response) {
  if (response) {
   var results = response['results'];
   if (results && results.length > 0) {
    for (var i = 0, ii = results.length; i < ii; i++) {
     var result = results[i];
     if (result) {
      var code = result['code'], name = result['name'],
      proj4def = result['proj4'], bbox = result['bbox'];
      if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
       bbox && bbox.length == 4) {
        setProjection(code, name, proj4def, bbox);
        return;
       }
      }
     }
    }
   }
   setProjection(null, null, null, null);
  }
 });
}

/**
 * @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]）
 */

searchButton.onclick = function(e) {
 search(queryInput.value);

 e.preventDefault();
 /** Event.preventDefault()
  * Cancels the event if it is cancelable, without 
  * stopping further propagation of the event.
  * イベントのさらなる伝播を停止させることなく、解約された場合
  * に、イベントをキャンセルします。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/Event/preventDefault]）
  */

};

/**
 * @param {Event} e Change event.
 */

renderEdgesCheckbox.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]）
 */

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

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

   }
  }
 });
};