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」ボタンをクリックするとマーカが表示されます。
マーカをクリックすると「タイトル」と「説明」がポップアップ表示されます。

0 件のコメント: