2 - ol3ex 11b - Scale line example 2

「scale-line-layer.js（211-ol3ex.js）」は、地図を表示するのに必要な javascript です。最初は、座標系が EPSG:4326 のコードです。

「211-ol3ex.js」

var scaleLineControl = new ol.control.ScaleLine();
/** ol.control.ScaleLine
 * A control displaying rough x-axis distances, calculated 
 * for the center of the viewport. No scale line will be 
 * shown when the x-axis distance cannot be calculated in 
 * the view projection (e.g. at or beyond the poles in 
 * EPSG:4326). By default the scale line will show in the 
 * bottom left portion of the map, but this can be changed 
 * by using the css selector .ol-scale-line.
 * 粗いx軸の距離を表示するコントロール、ビューポートの中心に
 * 対して計算します。 x軸距離がビュー投影（例えば、
 * EPSG：4326 の極で、または、超えて）で計算することができ
 * ないときにスケールラインは表示されません。デフォルトでは、
 * スケールラインがマップの左下部分に表示されますが、これは 
 * CSSセレクタ .ol-scale-line を使用して変更することが
 * できます。（ol3 API）
 */

var map = new ol.Map({

 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 // 折りたたみ
  })
 }).extend([
  scaleLineControl
 ]),

 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()
 * }),
 */
  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://localhost:8080/geoserver/wms?',
    attributions: [new ol.Attribution({
   /** ol.Attribution
    * An attribution for a layer source.
    * レイヤソースの属性（ol3 API）
    */
     html: '国土交通省 国土数値情報'
    })],
    params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
    serverType: 'geoserver'
   }))
  })
 ],

  renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
  target: 'map',
  view: new ol.View({
   projection: 'EPSG:4326', // 追加
// center: [0, 0],
   center: [139.42, 35.68],
// zoom: 2
   zoom: 10
  })
});

var unitsSelect = new ol.dom.Input(document.getElementById('units'));
/** ol.dom.Input
 * Helper class for binding HTML input to an ol.Object.
 * ol.Object に HTML input要素を接続するためのヘルパークラス。
 * （ol3 API）
 */

unitsSelect.bindTo('value', scaleLineControl, 'units');
/** bindTo()
 * The bindTo method allows you to set up a two-way 
 * binding between a `source` and `target` object. 
 * The method returns an object with a `transform` 
 * method that you can use to provide `from` and 
 * `to` functions to transform values on the way 
 * from the source to the target and on the way back.
 * bindTo メソッドは、`source` と ` target` オブジェク
 * ト間の結合を双方向に設定することができます。メソッド
 * は、ソースからターゲットに、および、その逆方向に値を
 * 変換する、 `from` と ` to` ファンクションを提供する
 * ために使用することがでる `transform` メソッドをとも
 * なった、オブジェクトを返します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

次は、座標系が EPSG:2451 のコードです。
「211-ol3ex.js」

var scaleLineControl = new ol.control.ScaleLine();
// スケールラインコントロール
// EPSG:2451

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

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

var extent = [-63100, -34500, -45400, -24200];

var map = new ol.Map({

 controls: ol.control.defaults({
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
   collapsible: false
  })

 }).extend([
  scaleLineControl
 ]),

 layers: [

/*
 * new ol.layer.Tile({
 *  source: new ol.source.OSM()
 * }),
 */

  new ol.layer.Tile({
   source: new ol.source.TileWMS(({
    url: 'http://localhost:8080/geoserver/wms?',
    attributions: [new ol.Attribution({

     html: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">' + // EPSG:2451
      '国土地理院</a>' // EPSG:2451

    })],

    params: {'LAYERS': 'npn:akiruno_kukaku', 'TILED': true, 'VERSION': '1.1.1'}, // EPSG:2451

    extent: extent, // EPSG:2451
    serverType: 'geoserver'
   }))
  })
 ],

  renderer: exampleNS.getRendererFromQueryString(),
  target: 'map',
  view: new ol.View({
   projection: projection, // EPSG:2451
   extent: extent, // EPSG:2451
// center: [0, 0],
   center: [-54250, -29350], // EPSG:2451
// zoom: 2
   zoom: 6 // EPSG:2451
  })
});

var unitsSelect = new ol.dom.Input(document.getElementById('units'));

unitsSelect.bindTo('value', scaleLineControl, 'units');