2014年6月18日水曜日

2 - ol3-beta.5ex 2a - Tiled WMS with Proj4js projection example 1

「Tiled WMS with Proj4js projection example(wms-custom-proj.html)」を参考に地図を表示してみます。

ここでは、Proj4js を使用するので、設定します。
「23 - OpenLayers で地図を重ねる 3 - 数値標高モデルの画像の地図を重ねる2」を参考にします。
(最新版は 1.5 ですが、インストールができないので 1.1.0 を使用します。)

OpenLayers and Proj4js
http://trac.openlayers.org/wiki/Documentation/Dev/proj4js

ここを参考にして、Proj4js を設定します。

1 ダウンロード
a Proj4js サイト
http://trac.osgeo.org/proj4js/

の「Download」をクリックします。
b Download-Proj4js
http://trac.osgeo.org/proj4js/wiki/Download

の「Proj4j 1.1.0」の「 http://download.osgeo.org/proj4js/proj4js-1.1.0.zip」をクリックします。

2 インストール
a ダウンロードした  proj4js-1.1.0.zip を解凍します。
user@debian7-vmw:~/ダウンロード$ unzip proj4js-1.1.0.zip
b proj4js フォルダを ol3proj に移動します。
user@debian7-vmw:~/ダウンロード$ mv proj4js ../mapsite/ol3proj
c 解凍されたフォルダの proj4js/lib/def/ に定義ファイルがあるので、EPSG:4326 と EPSG:2451 がないときは作成します。
EPSG4302.js を参考にします。
データは、/usr/share/proj のものを使用します。

user@debian7-vmw:/usr/share/proj$ grep -A1 4326 epsg
<4326> +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs  <>
# Anguilla 1957
user@debian7-vmw:/usr/share/proj$ grep -A1 2451 epsg
<2451> +proj=tmerc +lat_0=36 +lon_0=139.8333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs  <>
# JGD2000 / Japan Plane Rectangular CS X
--
(EPSG:4326 の定義は proj4js/lib/proj4js ありました。
'EPSG:4326': "+title=long/lat:WGS84 +proj=longlat +a=6378137.0 +b=6356752.31424518 +ellps=WGS84 +datum=WGS84 +units=degrees",)

EPSG:2451 の定義ファイル EPSG2451.js を 次の内容で proj4js/lib/defs/ に作成します。
Proj4js.defs["EPSG:2451"]= "+title=JGD2000/Japan Plane Rectangular CS IX +proj=tmerc +lat_0=36 +lon_0=139.8333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"

proj4js/index.html ファイルに次のように追加します。

---
<script src="lib/proj4js.js"></script>

<script src="lib/defs/EPSG27200.js"></script>
<script src="lib/defs/EPSG4272.js"></script>
<script src="lib/defs/EPSG54009.js"></script>
<script src="lib/defs/EPSG42304.js"></script>
<script src="lib/defs/EPSG25833.js"></script>
<script src="lib/defs/EPSG27563.js"></script>
<script src="lib/defs/EPSG4139.js"></script>
<script src="lib/defs/EPSG4302.js"></script>
<script src="lib/defs/EPSG31285.js"></script>
<script src="lib/defs/EPSG900913.js"></script>
<script src="lib/defs/EPSG2451.js"></script> <!-- 追加 -->
---

0 件のコメント: