LoginSignup
6
7

More than 5 years have passed since last update.

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

Posted at

はじめに

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コードを調べ、実行する

↑このサイトにアクセスし、EPSGを入力する。
今回の例で言えば、「2454」と入力して[SEARCH]をクリックする。
結果が1件だけ表示されるので、それをクリックする。

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

画面を下にスクロールすると、[Export]という項目が見えるので、そこの[Proj4js]をクリックする。
image.png
[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 使い方メモ

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7