2 - ol3-beta.5ex 12b - Scale line example 2

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

「212-ol3ex.js」

var scaleLineControl = new ol.control.ScaleLine();
// スケールラインコントロール
var map = new ol.Map({
 controls: ol.control.defaults().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: '国土数値情報'
    })],
    params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
    serverType: 'geoserver'
   }))
  })
 ],

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

var unitsSelect = new ol.dom.Input(document.getElementById('units'));
// 'Input（ol3）' ol.Object を HTML input要素に接続するためのヘルパークラス。
unitsSelect.bindTo('value', scaleLineControl, 'units');
// 'bindTo（ol3）' source と target の間を接続するメソッド。

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

var scaleLineControl = new ol.control.ScaleLine();
// スケールラインコントロール
// EPSG:2451
var projection = ol.proj.configureProj4jsProjection({
 code: 'EPSG:2451',
 extent: [-85044.6807, -406697.3730, 96656.4509, -8388.7498]
});
var extent = [-63100, -34500, -45400, -24200];

var map = new ol.Map({
 controls: ol.control.defaults().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'
   }))
  })
 ],

  // 'example-behavior.js' により URL にある renderer を返します
  renderer: exampleNS.getRendererFromQueryString(),
  target: 'map',
  view: new ol.View2D({
   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'));
// 'Input（ol3）' ol.Object を HTML input要素に接続するためのヘルパークラス。
unitsSelect.bindTo('value', scaleLineControl, 'units');
// 'bindTo（ol3）' source と target の間を接続するメソッド。