Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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件だけ表示されるので、それをクリックする。

すると、こんな感じの画面が表示される。
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 使い方メモ

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away