Debianでka-MapのメモプラスOpenLayers とGeoExt: 再投影

ラベル 再投影 の投稿を表示しています。すべての投稿を表示

2010年2月2日火曜日

OpenLayers 反省

OpenLayers の例を試しはじめた頃は、WFS の再投影の設定が間違っていました。
MapServer の WFS サーバの設定で再投影していたのに、OpenLayers でも設定していました。

ところで、去年はコメントを頂いたのですが、役にたてたか、もっと良い回答があったかなど考えています。
OpenLayers を使うので、文字コードに気を使わなくていいように環境を UTF-8 に合わせました。
そのため、数値地図情報をUTF-8 に文字コードを変換して使うことを決めてました。
列名は日本語で問題が起こる心配が漠然とあったので、アルファベットにかえました。
このとき、OpenOfficeorg の Calc で修正した後、保存できなかったので、列名の文字列に文字コードに問題がある可能性があることに気がつきました。
このように、偶然に不具合に対応していることもあります。

Editing Tools に作業工程を戻すボタンを独自に追加する方法は、コメントを頂いた時点では具体的なものが思いつきませんでした。
今、思いつくものは、フィーチャを描画する直前のレイヤを保存しておき、やり直すときは保存しておいたレイヤを表示させる方法を試します。
描画する直前のレイヤを保存するタイミングは、描画のイベントが発生するときに設定します。
また、Feature Server を使用すれば、描画した個々のフィーチャを削除できます。OpenLayers を使っていくうちにいい考えがもっと出てくるかもしれません。

2009年10月5日月曜日

OpenLayers で東京都の地図表示 8b Google Maps の GeoRSS 直接読み込む

直接、Google マップの GeoRSS を読み込むには次のコードを追加します。


---
function init(){
 OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; // ここを追加
---
// ここから追加
var rsslayerURL = "http://maps.google.co.jp/maps/ms?hl=ja&ie=UTF8&vps=1&jsv=177f&msa=0&output=georss&msid=111036970844883899404.000460cf33070afb09a7a";
var rssLayer = new OpenLayers.Layer.GeoRSS("Tachikawa", rsslayerURL, {
 visibility: false,
 projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(rssLayer);
// ここまで

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
---

example フォルダの proxy.cgi を開いて次のように allowedHosts に
'maps.google.co.jp' を追加します。


---
allowedHosts = ['www.openlayers.org', 'openlayers.org', 
                'labs.metacarta.com', 'world.freemap.in', 
                'prototype.openmnnd.org', 'geo.openplans.org',
                'sigma.openplans.org', 'demo.opengeo.org',
                'www.openstreetmap.org', 'sample.avencia.com',
                'maps.google.co.jp']
---

root で proxy.cgi を /usr/lib/cgi-bin にコピーします。


debian:/home/user# cp workspace/openlayersTokyoproj/examples/proxy.cgi /usr/lib/cgi-bin/

権限を次の様に変更します。


debian:/home/user# ls -l /usr/lib/cgi-bin/
合計 1156
-rwxr-xr-x 1 root root 1172312 2008-07-23 01:10 mapserv
-rwxr--r-- 1 root root    2534 2009-09-26 10:50 proxy.cgi
debian:/home/user# chmod 755 /usr/lib/cgi-bin/proxy.cgi 
debian:/home/user# ls -l /usr/lib/cgi-bin/
合計 1156
-rwxr-xr-x 1 root root 1172312 2008-07-23 01:10 mapserv
-rwxr-xr-x 1 root root    2534 2009-09-26 10:50 proxy.cgi

Eclipse では表示しないので、Webブラウザで確認します。

2009年10月4日日曜日

OpenLayers で東京都の地図表示 8a Google Maps の GeoRSS の表示

GeoRSS は、インターネットのコンテンツ配信に地理情報を埋め込むための規格です。
Atom1.0, RSS2.0, RSS1.0 で使えます。

GeoRSS の例
GeoRSS-Simple: 単純な GeoRSS


<georss:point>35.7 139.5</georss:point>

GeoRSS-GML: GML 形式の GeoRSS


<georss:where>
 <gml:Point>
  <gml:pos>35.7 139.5</gml:pos>
 </gml:Point>
</georss:where>

GeoRSS のホームページを参考に試してみました。
OpenLayers の example サイトにある GeoRSS 関連の地図は

GeoRSS Example（georss.html） georss.xmlファイルはPlatial地図投稿サービスサイトのRDF Site Summary（RSS 0.9とRSS 1.0）。現在はRSS2.0。
GeoRSS Marker Example（georss-markers.html）yelp-georss.xmlファイルはyelp地図検索サイトのAtom + georss.xml。
GeoRSS from Flickr in OpenLayers（georss-flickr.html）georss-flickr.xmlはflickr写真共有サイトのRSS2.0。GeoFeedのリンクがある。
（GeoRSS Point Track in OpenLayers は track1.xml のデータの元が分かりませんでした。）

です。

今回は Google マップを使って RSS2.0 の地図を描画してみました。

1 Google マップの RSS
1-1 Google マップで「マイマップ」を作成して「タイトル」と「説明」を入力します。
（公開しないと思うので「限定公開」にしてください。）
1-2 「目印」を追加して「タイトル」と「説明」を入力します。
1-3 「マイマップ」を「保存」、「完了」します。
1-4 「RSS」ボタンをクリックします。
1-5 「RSS」の内容部分を右クリックして「ページのソースを表示」をクリックします。
1-6 表示されたソースをすべて選択してコピーします。
1-7 Eclipse の「openlayersTokyoproj」を右クリックして、新規->XML ファイルをクリックします。
1-8 「新規 XML ファイル」ウィンドウの「ファイル名」を入力して「完了」をクリックします。
1-9 コピーした RSS を張り付けて保存します。

tokyo_bmi_pgis_img02.html をコピーして tokyo_bmi_pgis_img03.html を作成します。
examples フォルダの georss.html（OpenLayers GeoRSS Example）を参考に、次のコードを追加します。


---
// ここから追加
 function addUrl() {
  var urlObj = OpenLayers.Util.getElement('url');
  var value = urlObj.value;
  var parts = value.split("/");
  var newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value,
   {
    'projection': new OpenLayers.Projection("EPSG:4326") // ここがポイントです
   });
  map.addLayer(newl);
  urlObj.value = "";
 }
// ここまで
</script>
</head>
<body onload="init()">
 <h1 id="title">Tokyo BMI Pgis Map 03</h1>
 <div id="tags"></div>
 <p id="shortdesc">
  Shows the basic use of openlayers using a WMS layer
 </p>

 <div id="map" class="smallmap"></div>
 <div id="docs">
  This is an example of how to add an WMS layer to the OpenLayers window. The images are tiled in this instance if you wanted to not use a tiled WMS
  please use this example and pass the option �singleTile� as true.
 </div>
<!-- ここから追加 -->
 <form onsubmit="return false;">
  GeoRSS URL: <input type="text" id="url" size="50" value="georss_tachikawa.xml" />
  <input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
 </form>
<!-- ここまで -->
</body>
</html>

試したGeoRSS


<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml">
<channel>
  <link>http://maps.google.com</link>
  <title>立川</title>
  <description><![CDATA[多摩の拠点]]></description>
  <item>
    <guid isPermaLink="false">0004744981490166741bb</guid>
    <pubDate>Thu, 24 Sep 2009 02:22:37 +0000</pubDate>

    <title>国営昭和記念公園</title>
    <description><![CDATA[<div dir="ltr">四季折々の花が咲く公園</div>]]></description>
    <author>user</author>
    <georss:point>
      35.703041 139.410461
    </georss:point>
    <georss:elev>0.000000</georss:elev>
  </item>

</channel>
</rss>

「Load Feed」ボタンをクリックするとマーカが表示されます。
マーカをクリックすると「タイトル」と「説明」がポップアップ表示されます。

2009年10月1日木曜日

OpenLayers で東京都の地図表示 7b Proj4js のインポート

変換には、Proj4js が必要です。
このメーリングリストにもありますが、次のサイトにも情報があります。

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

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

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

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

の「Attachments」の「proj4js-1.0.0-RC2.zip」をクリックします。
1-3 Download: proj4js-1.0.0-RC2.zip
http://trac.osgeo.org/proj4js/attachment/wiki/Download/proj4js-1.0.0-RC2.zip

の「download the file」をクリックしてダウンロードします。

2 インストール
2-1 ダウンロードした proj4js-1.0.0-RC2.zip を解凍します。
~/$ unzip proj4js-1.0.0-RC2.zip
2-2 解凍されたフォルダの proj4js/lib/def/ に定義ファイルがあるので、EPSG:4326 と EPSG:2456 がないときは作成します。

EPSG4302.js を参考にします。
データは、/usr/share/proj のものを使用します。


nob61@debian:/usr/share/proj$ grep -A1 4326 epsg
<4326> +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs  <>
# Anguilla 1957
nob61@debian:/usr/share/proj$ grep -A1 JGD2000 epsg
---
# JGD2000 / Japan Plane Rectangular CS XIV
<2456> +proj=tmerc +lat_0=26 +lon_0=142 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs  <>
---

定義ファイルの内容


EPSG4326.js
Proj4js.defs["EPSG:4326"]= "+title= WGS84 EPSG:4326 +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
EPSG2456.js
Proj4js.defs["EPSG:2456"]= "+title= JGD2000 Japan Plane Rectangular CS IX EPSG:4326 +proj=tmerc +lat_0=26 +lon_0=142 +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/defs/EPSG900913.js"></script>
<script src="lib/defs/EPSG2456.js"></script><!-- ここを追加 -->

<script type="text/javascript">
---

このファイルをブラウザで開いて、
「source」を「WGS84 - long/lat:WGS84」、
「dest」を「EPSG:2456　- JGD2000 Japan Plane Rectangular CS IX」
にして変換してみます。

2009年9月30日水曜日

OpenLayers で東京都の地図表示 7a 投影法の違うポイントの表示

1 tokyo_bmi_pgis_img02.html の地図の layer2 だけ表示するように戻します。


---
<script type="text/javascript">
 var map, layer2; //layer1, layer3, layer4
 function init(){
  map = new OpenLayers.Map('map',  {
   projection: new OpenLayers.Projection("EPSG:2456"),//<-1
   displayProjection: new OpenLayers.Projection("EPSG:4326"),//<-1
   maxResolution: 'auto',
   units: 'meters',
   maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
  });
---
 layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
  "http://localhost/cgi-bin/mapserv?",
  {
   map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map',
   layers: 'kukaku',
//   transparent: true,
   format: 'image/png'
 });
 map.addLayer(layer2);
---

投影法の違うポイントを表示するため、次のように markers レイヤを追加します。


---
 var markers = new OpenLayers.Layer.Markers( "Markers" );
  map.addLayer(markers);
  size = new OpenLayers.Size(21,25);
  calculateOffset = function(size) {
   return new OpenLayers.Pixel(-(size.w/2), -size.h);
  };
  icon = new OpenLayers.Icon('./img/marker.png',size, null, calculateOffset);
  var point = new OpenLayers.LonLat(139.5,35.7);
  markers.addMarker(new OpenLayers.Marker(point, icon));

  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());

  map.zoomToMaxExtent();

}
</script>
---

ポイントは表示されませんでした。
次回は、ポイントの投影法を変換する方法を試します。
（レイヤの投影法の変換はできませんでした。）

2009年9月29日火曜日

OpenLayers で東京都の地図表示 6 再投影のテスト

レイヤの緯度経度の単位が度数のデータは、単位が度数の地図上で表示します。
レイヤと基本地図の単位（投影法）が違う場合は再投影をします。
投影法の設定がないときはどうなるか試してみました。

1 tokyo_bmi_pgis_img.html をコピーして tokyo_bmi_pgis_img02.html を作成します。
2 layer2 と layer3 だけ表示するようにします。
3 マップファイルの "wms_srs" をコメントアウトします。

tokyo_bmi_pgis_img02.html


---
<script type="text/javascript">
 var map, layer2, layer3; //layer1, layer4 <-2
 function init(){
  map = new OpenLayers.Map('map',  {
   projection: new OpenLayers.Projection("EPSG:2456"),
   displayProjection: new OpenLayers.Projection("EPSG:4326"),
   maxResolution: 'auto',
   units: 'meters',
   maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
  });

/*layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS", //<-2
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/nob61/mapfile/tokyo_bmi_pgis_img.map',
    layers: 'height',
    format: 'image/png'
  });
*/
  layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/nob61/mapfile/tokyo_bmi_pgis_img.map',
    layers: 'kukaku',
    transparent: true,
    format: 'image/png'
  });

  layer3 = new OpenLayers.Layer.WMS( "Tokyo Gyoseikai mlit WMS",
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
    layers: 'gyoseikai',
    transparent: true,
    format: 'image/png'
  });

/*layer4 = new OpenLayers.Layer.WMS( "Tokyo Public Facilities WMS", //<-2
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
    layers: 'pf_tokyo',
    transparent: true,
    format: 'image/png'
  });
*/
  map.addLayers([layer2, layer3]); //<-2
//map.addLayers([layer1, layer2, layer3, layer4]); //<-2
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
  map.zoomToMaxExtent()

 }
</script>
---

tokyo_pf_pgis_map


MAP
 NAME tokyo_pf_pgis_map
---
 PROJECTION         # 投影法 （OpenLayers のため追加）
   "init=epsg:4326" #
 END                #

 WEB
   IMAGEPATH "/home/nob61/ka-map/htdocs/tmp/kacache/"
   IMAGEURL "/ka-map/tmp/kacache/"
   METADATA
     "wms_title" "Tokyo mlit Map WFS Server" # WMS サーバ設定
#     "wms_srs" "EPSG:2456 EPSG:4326"        #<-3
   END
 END
---

tokyo_bmi_pgis_img.map


MAP
 NAME tokyo_bmi_pgis_img_map
---
 WEB
   IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
   IMAGEURL "/ka-map/tmp/kacache/"
   METADATA
     "wms_title" "Tokyo Map WMS Server" # WMS サーバ設定
#     "wms_srs" "EPSG:2456 EPSG:4326"   #<-3
   END
 END
---

tokyo_bmi_pgis_img02.html の地図を表示すると、layer2 だけ表示されて、layer3 はエラーが表示されます。

layer3 に projection を追加しても同様に表示されません。


---
  layer3 = new OpenLayers.Layer.WMS( "Tokyo Gyoseikai mlit WMS",
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
    layers: 'gyoseikai',
    transparent: true,
    format: 'image/png'
   },{
    projection: 'EPSG:4326'
  });
---

tokyo_bmi_pgis_img02.html の map オプションの projection を EPSG:4326 にすると layer2 が表示されません。
（layer3 は元に戻しておきます。）


---
<script type="text/javascript">
 var map, layer2, layer3; //layer1, layer4
 function init(){
  map = new OpenLayers.Map('map',  {
   projection: new OpenLayers.Projection("EPSG:4326"),
// displayProjection: new OpenLayers.Projection("EPSG:4326"),
   maxResolution: 'auto',
   units: 'dd',
   maxExtent: new OpenLayers.Bounds(138.85,35.4,140,35.975)
  });
---
  layer3 = new OpenLayers.Layer.WMS( "Tokyo Gyoseikai mlit WMS",
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
    layers: 'gyoseikai',
    transparent: true,
    format: 'image/png'
  });
---

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2010年2月2日火曜日

OpenLayers 反省

2009年10月5日月曜日

OpenLayers で東京都の地図表示 8b Google Maps の GeoRSS 直接読み込む

2009年10月4日日曜日

OpenLayers で東京都の地図表示 8a Google Maps の GeoRSS の表示

2009年10月1日木曜日

OpenLayers で東京都の地図表示 7b Proj4js のインポート

2009年9月30日水曜日

OpenLayers で東京都の地図表示 7a 投影法の違うポイントの表示

2009年9月29日火曜日

OpenLayers で東京都の地図表示 6 再投影のテスト

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ

自己紹介

2010年2月2日火曜日

OpenLayers 反省

2009年10月5日月曜日

OpenLayers で東京都の地図表示 8b Google Maps の GeoRSS 直接読み込む

2009年10月4日日曜日

OpenLayers で東京都の地図表示 8a Google Maps の GeoRSS の表示

2009年10月1日木曜日

OpenLayers で東京都の地図表示 7b Proj4js のインポート

2009年9月30日水曜日

OpenLayers で東京都の地図表示 7a 投影法の違うポイントの表示

2009年9月29日火曜日

OpenLayers で東京都の地図表示 6 再投影のテスト

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ