OpenLayersを使ってみる。[Chapter 12]
OpenLayersのProjectionについて[Chapter 11] に引き続き、OpenLayersの投影座標系(Projection) Classについての基本を学んでおきます。
OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。
Projection Objectを作成する。
Projection objectを作成するには、
my_proj = new OpenLayers.Projection('EPSG:4326', {});
のように、OpenLayers.Mapなどと同じ形式になります。
Parameters
ここで、
-
projectionCode: {String}: 文字列で指定します。指定するのはEPSGでEPSG:4326の形になります。
-
options:{Object}: optional objectですが、ほとんど使用することはありません。
Function
次に、Projectionは以下のmethodを含んでいます。
とりえず、原文のまま載せておきます。 日本語に訳せば良いのでしょうが、それほど難しいものはないので、各自翻訳にtryしてみてください。こちらのOpenLayers.Projectionが非常に参考になります。先人に感謝です。
Function | Description | Parameters |
---|---|---|
getCode() | Returns a {String} containing the projection code, e.g., 'EPSG:4326' | – |
getUnits() | Returns a {String} the units string for the projection, e.g.,degrees'. If the Proj4js library is not included on your page, this will return null. | – |
addTransform(from, to, method) | Define a custom transformation function between two projections. This usually will not be necessary, especially if you are using Proj4js, unless you need to define a custom projection transformation. | from: {String} Source projection code to: {String} Destination projection code method:{Function} A function that transforms the source point to the destination point, leaving the original point unmodified. |
transform(point, source, destination) | Calling this function will transform the passed in point from the passed in source projection to the passed in estination projection. You can also pass in an {Object} as long as it contains x and y properties. This function will transform the point in place, meaning that the point you passed in will be transformed. If you need a copy of the point, you should first make a clone of it before calling transform() by calling the oint's clone() method. | point: {Geometry.Point} An object from the penLayers.Geometry.Point class, containing an x and y coordinate source:{OpenLayers.Projection} Projection object of the source projection destination:{OpenLayers.Projection} Projection object of the destination map projection. |
OpenLayersのProjection Check
OpenLayers.ProjectionをFireBugで実際にどのように機能しているかを見てみましょう。
まずは、以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter4¥にしておきます。
ファイル名は、chapter4_tranform.htmlで保存します。
[html]
<!DOCTYPE html>
<html lang=’ja’>
<head>
<meta charset=’utf-8′ />
<script type=’text/javascript’ src=’http://localhost/openlayers/OpenLayers.js’></script>
<script type=’text/javascript’>
var proj_4326 = new OpenLayers.Projection(‘EPSG:4326′);
var proj_3857 = new OpenLayers.Projection(‘EPSG:3857′);
var point_to_transform = new OpenLayers.LonLat(139.50, 35.50);
console.log(point_to_transform);
var point_to_transform_after = point_to_transform.transform(proj_4326, proj_3857);
console.log(point_to_transform_after);
</script>
</head>
<body></body>
</html>
[/html]
保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter3/chapter4_transform.htmlと入力して、FireBugを開いて、再度htmlをreloadします。
な感じで、Firebugが開きます。
次に、コンソールをClickして表示させると
のように、console.logで経度緯度が表示されます。
10行目は変換前:
lon=139.5,lat=35.5 { lon=139.5, lat=35.5, CLASS_NAME=“OpenLayers.LonLat”}
12行目はEPSG:3857に変換後:
lon=15529068.963499999,lat=4232038.461809766 { lon=15529068.963499999, lat=4232038.461809766, CLASS_NAME=“OpenLayers.LonLat”}
と表示されているはずです。
このように、transform(proj_4326, proj_3857)でProjectionの変換ができます。
非常に便利ですね。
proj4sについて
Projection変換については、proj4jsがあります。
proj4sは、座標系変換にもちいるJavaScript Libraryです。OpenLayersを利用せずとも座標系の変換ができます。
また、GIS勉強会:測地系変換JavaScriptライブラリ(Proj4js)を使うが参考になります。
まず、proj4js downloadから入手します。
解凍後、Aptanaに取り込みます。
私の環境では、
な感じの構成になっています。
それでは、次にprojectionのcheckをしてみます。
下記codeを入力して、proj4js_check.htmlとして保存します。
保存先は、どこでも構わないのですが、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter4¥にしておきます。
[html]
<!DOCTYPE html>
<html lang=’ja’>
<head>
<meta charset=’utf-8′ />
<script type=’text/javascript’ src="proj4js/lib/proj4js-combined.js"></script>
<script type=’text/javascript’>
var test_proj = new Proj4js.Proj(‘EPSG:2451′);
console.log(test_proj);
</script>
</head>
<body></body>
</html>
[/html]
保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter3/proj4js_check.htmlと入力して、FireBugを開いて、コンソールをClickして表示させると
のようにProjection objectの詳細が表示されます。
ここでは、JGD2000の9系 EPSG:2451の内容を表示しています。
また、独自のprojectionを定義することもできます。
今回のまとめ
OpenLayersによるProjection Classの基本を学びました。
次回は、基本的なOpenLayersでGoogle MapsやYahoo Mapなどの third party mapping APIsについて学んでいきます。
また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん!!とかいろんな意見をいただければと思います。
そこんところ ヨロシク~~!!
最近のコメント