OpenLayers で東京都の地図表示 7c ポイントの表示 - projection の変換

proj4js フォルダを openlayersTokyoproj/lib/ にインポートします。
0 OpenLayers の /sandbox/madair/lib ページ
http://trac.openlayers.org/browser/sandbox/madair/lib?rev=4572
で、インポートするディレクトリを確認します。
proj フォルダを作成して proj4js フォルダを入れます。
1 ファイル->インポートをクリックします
2 選択ウィンドウで 一般->ファイル・システム を選択して「次へ」ボタンをクリックします。
3 ファイル・システムウィンドウで 次のディレクトリからの「参照」ボタンをクリックします。
4 ディレクトリからインポートで解凍した proj フォルダを選んで「OK」ボタンをクリックします。
5 ファイル・システムウィンドウで proj をチェックします。
6 宛先フォルダーの「参照」ボタンをクリックします。
7 フォルダーにインポートウィンドウで「lib」をクリックして反転させ、「OK」ボタンをクリックします。
8 インポートウィンドウで「完了」ボタンをクリックします。


OpenLayers は projection（投影法）の変換に、transform 関数が用意されています。

次のメーリングリストを参考に、OpenLayers.Projection.tansform を試してみます。

Re: [OpenLayers-Users] OpenLayers.Projection and proj4js.js
http://www.mail-archive.com/users@openlayers.org/msg04620.html

tokyo_bmi_pgis_img02.html に次のコードを追加します。

---
<script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>

<script type="text/javascript">
 var p = new OpenLayers.Geometry.Point(139.5,35.70);
 var proj_src = new OpenLayers.Projection("EPSG:4326");
 var proj_tgt = new OpenLayers.Projection("EPSG:2456");

 document.write("Point p [before OpenLayers.Projection.transform] is: " + p + "<br />");
 OpenLayers.Projection.transform(p,proj_src,proj_tgt);
 document.write("Point p [after OpenLayers.Projection.transform] is: " + p + "<br />");
 document.write("proj_src is: " + proj_src + "<br />");
 document.write("proj_tgt is: " + proj_tgt + "<br />");
 document.write();
---

結果は次の様に変換されました。

---
Point p [before OpenLayers.Projection.transform] is: POINT(139.5 35.7)
Point p [after OpenLayers.Projection.transform] is: POINT(-226260.3162219112 1078195.254530467)
proj_src is: EPSG:4326
proj_tgt is: EPSG:2456
---

markers レイヤを次の様に修正します。

---
 var markers = new OpenLayers.Layer.Markers( "Markers" );
  map.addLayer(markers);
  size = new OpenLayers.Size(21,25);
  calculateOffset = function(size) {
   return new OpenLayers.Pixel(-(size.w/2), -size.h);
  };
  icon = new OpenLayers.Icon('./img/marker.png',size, null, calculateOffset);
  var point = new OpenLayers.LonLat(139.5,35.7);
  var proj_src = new OpenLayers.Projection("EPSG:4326"); //追加
  point.transform(proj_src,map.getProjectionObject());   //追加
  markers.addMarker(new OpenLayers.Marker(point, icon));
---

マウスポジションが度数表示になりました。
次の様にマップコントロールのスケールラインを追加したら表示されるようになりました。

  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
  map.addControl(new OpenLayers.Control.ScaleLine()); //追加

  map.zoomToMaxExtent();

}
</script>
---