2 - ol3-beta.5ex 14b - Mouse position example 2

「mouse-position.js（214-ol3ex.js）」は、地図を表示するのに必要な javascript です。

あきる野市（EPSG:2451）の地図を表示したとき、EPSG:3857 のマウスポジションの数値が正しく表示されませんでした。（EPSG:2451 の数値が表示）

「214-ol3ex.js」

var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4), // 小数点以下
  projection: 'EPSG:4326',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  className: 'custom-mouse-position', // CSS クラス名
  target: document.getElementById('mouse-position'),
  undefinedHTML: ' '
});

// 追加
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([mousePositionControl]),

 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: '国土数値情報'
     html: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">' + // EPSG:2451<
      '国土地理院</a>' // EPSG:2451
    })],
//    params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
    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: 'EPSG:4326', // 追加
   projection: projection, // EPSG:2451
   extent: extent, // EPSG:2451
// center: [0, 0],
//   center: [139.42, 35.68],
   center: [-54250, -29350], // EPSG:2451
// zoom: 2
//   zoom: 10
   zoom: 6 // EPSG:2451
  })
});

var projectionSelect = new ol.dom.Input(document.getElementById('projection'));
// 'Input（ol3）' ol.Object を HTML input要素に接続するためのヘルパークラス

projectionSelect.bindTo('value', mousePositionControl, 'projection')
 .transform(
// 'bindTo（ol3）' source と target の間を接続するメソッド。
  function(code) {
   // projectionSelect.value -> mousePositionControl.projection
   return ol.proj.get(/** @type {string} */ (code));
  },
  function(projection) {
   // mousePositionControl.projection -> projectionSelect.value
   return projection.getCode();
});

var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function() {
  var format = ol.coordinate.createStringXY(precisionInput.valueAsNumber);
  mousePositionControl.setCoordinateFormat(format);
}, false);