【OpenLayers4】ol.proj.transform()で任意の座標系へ変換

【OpenLayers4】ol.proj.transform()で任意の座標系へ変換:

はじめに

APIリファレンスによれば、ol.proj.transform()では任意の座標系間で座標値を変換できる関数である。

例えば、WGS84 緯度経度（EPSG:4326）で与えられた座標をOpenLayers上で取り扱うために、Web Mercator（EPSG:3857）に変換するには、以下のように記述すればよい。

// JR札幌駅あたりの座標 
var latitude = 43.068; 
var longitude = 141.350; 
 
ol.proj.transform( 
    [longitude, latitude], 
    'EPSG:4326', 'EPSG:3857' 
); // [15735010.02362922, 5322327.874481014] 

ところで、上記の2つ以外の座標系への変換を行おうとすると、エラーが生じる。

ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:2454');  // error 

ちなみに、EPSG:2454は日本の平面直角座標系で札幌市が含まれるもの。

参考：
平面直角座標系の対応市区町村とEPSGの対応表 - SengokuLAB Note
わかりやすい平面直角座標系｜国土地理院

エラーの原因

エラーは、OpenLayers4のデフォルト状態ではEPSG:4326およびEPSG:3857以外について座標系が定義されていないことに起因する。

以下に、任意の座標系の定義を追加し、その座標系への座標変換ができるようにする方法を示す。

座標系定義の追加

proj4.jsを読み込む

任意の座標系定義を追加するには、proj4.jsが必要となる。これを利用可能とする。

例えばhtmlファイルからproj4.jsを読み込むには、以下のように記述する。

（このURLはOpenLayers4公式サイトの例Raster Reprojectionから引用した）

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script> 

座標系定義の追加に必要なJavaScriptコードを調べ、実行する

http://epsg.io/

↑このサイトにアクセスし、EPSGを入力する。

今回の例で言えば、「2454」と入力して[SEARCH]をクリックする。

結果が1件だけ表示されるので、それをクリックする。

すると、こんな感じの画面が表示される。

画面を下にスクロールすると、[Export]という項目が見えるので、そこの[Proj4js]をクリックする。

[Definition: JavaScript (Proj4js)]という項目が右に表示され、その下にJavaScriptのコードスニペットが表示される。

今回の例では、以下のように表示された。

proj4.defs("EPSG:2454","+proj=tmerc +lat_0=44 +lon_0=142.25 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"); 

このコードスニペットを、ol.proj.transform()の利用に先立って実行する。

定義した座標系への変換

ここまでくれば、エラーとならずに座標変換ができる。

ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:2454'); 
// 出力: [-73298.76942772052, -103144.64579808652] 

まとめ

• OpenLayers4でデフォルトで提議されている座標系はEPSG:4326とEPSG:3857の2種である。
• 任意の座標系定義を追加するにはproj4.jsが必要となる。
• 座標系定義の追加に必要なJavaScriptコードはepsg.ioで得られる。

参考

空間参照系変換ライブラリ Proj4js 使い方メモ