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

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

2009年10月12日月曜日

OpenLayers 20b georss_nishitachikawa.xml の内容

georss_nishitachikawa.xml の内容


<?xml version='1.0' encoding='UTF-8'?>
<rss 
 xmlns:atom='http://www.w3.org/2005/Atom'
 xmlns:gphoto='http://schemas.google.com/photos/2007' 
 xmlns:media='http://search.yahoo.com/mrss/' 
 xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' 
 xmlns:gml='http://www.opengis.net/gml'
 xmlns:georss='http://www.georss.org/georss' version='2.0'>
<channel>
 <atom:id>
  http://picasaweb.google.co.jp/data/feed/base/user/[user_id]/albumid/5388317799181820769
 </atom:id>
 <lastBuildDate>Mon, 05 Oct 2009 05:54:44 +0000</lastBuildDate>
 <category domain='http://schemas.google.com/g/2005#kind'>
  http://schemas.google.com/photos/2007#album
 </category>
 <title>Keitai</title>
 <description>携帯カメラのテスト</description>
 <image>
  <url>
   http://lh5.ggpht.com/_hoHiidZPh8U/SscmfWUlo2E/AAAAAAAAAf4/IDq40oWopRw/s160-c/FiPgXD.jpg
  </url>
  <title>Keitai</title>
  <link>
   http://picasaweb.google.co.jp/[user_id]/FiPgXD?authkey=Gv1sRgCIPekYa995iu_wE
  </link>
 </image>
 <link>
  http://picasaweb.google.co.jp/[user_id]/FiPgXD?authkey=Gv1sRgCIPekYa995iu_wE
 </link>
 <managingEditor>Noboru</managingEditor>
 <generator>Picasaweb</generator>
 <openSearch:totalResults>1</openSearch:totalResults>
 <openSearch:startIndex>1</openSearch:startIndex>
 <openSearch:itemsPerPage>1000</openSearch:itemsPerPage>
 <gphoto:allowPrints>true</gphoto:allowPrints> 
 <gphoto:allowDownloads>true</gphoto:allowDownloads>
 <item>
  <guid isPermaLink='false'>
   http://picasaweb.google.co.jp/data/entry/base/user/[user_id]/albumid/5388317799181820769/photoid/5388317803734361330?alt=rss&hl=ja
  </guid>
  <pubDate>Sat, 03 Oct 2009 10:25:02 +0000</pubDate>
  <atom:updated>2009-10-03T10:25:02.802Z</atom:updated>
  <category domain='http://schemas.google.com/g/2005#kind'>
   http://schemas.google.com/photos/2007#photo
  </category>
  <title>NEC_0036a.JPG</title>
  <description>
   <table><tr><td style="padding: 0 5px"><a href="http://picasaweb.google.co.jp/[user_id]/FiPgXD?authkey=Gv1sRgCIPekYa995iu_wE#5388317803734361330"><img style="border:1px solid #5C7FB9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMJAUF6oU1FbubOFLgjwdmd70FFAMneqYrJsDe9lkCLo-sQPDSt4309Fm33d1LAEPIb3WYQg14aw1P6u-Pi7qlWolkU1fsqxyZ10EQe9sHVdt7YAR1M55gi5oBH2rL8hTaV7KqBr4ui-D/s288/NEC_0036a.JPG" alt="NEC_0036a.JPG"/></a></td><td valign="top"><font color="#6B6B6B">日付: </font><font color="#333333">2008/11/03 8:08</font><br/><font color=\"#6B6B6B\">写真のコメントの数:</font><font color=\"#333333\">0</font><br/><p><a href="http://picasaweb.google.co.jp/[user_id]/FiPgXD?authkey=Gv1sRgCIPekYa995iu_wE#5388317803734361330"><font color="#3964C2">写真を表示</font></a></p></td></tr></table>
  </description>
  <enclosure type='image/jpeg' url='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMJAUF6oU1FbubOFLgjwdmd70FFAMneqYrJsDe9lkCLo-sQPDSt4309Fm33d1LAEPIb3WYQg14aw1P6u-Pi7qlWolkU1fsqxyZ10EQe9sHVdt7YAR1M55gi5oBH2rL8hTaV7KqBr4ui-D/' length='0'/>
  <link>
   http://picasaweb.google.co.jp/[user_id]/FiPgXD?authkey=Gv1sRgCIPekYa995iu_wE#5388317803734361330
  </link>
  <media:group>
  <media:content url='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMJAUF6oU1FbubOFLgjwdmd70FFAMneqYrJsDe9lkCLo-sQPDSt4309Fm33d1LAEPIb3WYQg14aw1P6u-Pi7qlWolkU1fsqxyZ10EQe9sHVdt7YAR1M55gi5oBH2rL8hTaV7KqBr4ui-D/' height='480' width='640' type='image/jpeg' medium='image'/>
  <media:credit>Noboru</media:credit>
  <media:description type='plain'/>
  <media:keywords/>
  <media:thumbnail url='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMJAUF6oU1FbubOFLgjwdmd70FFAMneqYrJsDe9lkCLo-sQPDSt4309Fm33d1LAEPIb3WYQg14aw1P6u-Pi7qlWolkU1fsqxyZ10EQe9sHVdt7YAR1M55gi5oBH2rL8hTaV7KqBr4ui-D/s72/NEC_0036a.JPG' height='54' width='72'/>
  <media:thumbnail url='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMJAUF6oU1FbubOFLgjwdmd70FFAMneqYrJsDe9lkCLo-sQPDSt4309Fm33d1LAEPIb3WYQg14aw1P6u-Pi7qlWolkU1fsqxyZ10EQe9sHVdt7YAR1M55gi5oBH2rL8hTaV7KqBr4ui-D/s144/NEC_0036a.JPG' height='108' width='144'/>
  <media:thumbnail url='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMJAUF6oU1FbubOFLgjwdmd70FFAMneqYrJsDe9lkCLo-sQPDSt4309Fm33d1LAEPIb3WYQg14aw1P6u-Pi7qlWolkU1fsqxyZ10EQe9sHVdt7YAR1M55gi5oBH2rL8hTaV7KqBr4ui-D/s288/NEC_0036a.JPG' height='216' width='288'/>
  <media:title type='plain'>NEC_0036a.JPG</media:title>
 </media:group>
 <georss:where>
  <gml:Point>
   <gml:pos>35.703871 139.393716</gml:pos>
  </gml:Point>
 </georss:where>
</item>
</channel>
</rss>

OpenLayers 20a GeoRSS で Pisca ウェッブアルバムの写真を表示1

GeoRSS from Flickr in OpenLayers(georss-flickr.html)を参考に、Pisca ウェッブアルバムの写真を表示します。

1 Picasa ウェッブアルバムを使ってみます。
位置情報のある画像は、自動的にアルバムマップを作成します。
1-1 「RSS」ボタンをクリックします。（アルバム表示右下）
1-2 「RSS」の内容部分を右クリックして「ページのソースを表示」をクリックします。
1-3 表示されたソースをすべて選択してコピーします。
1-4 Eclipse の「openlayersTokyoproj」を右クリックして、新規->XML ファイルをクリックします。
1-5 「新規 XML ファイル」ウィンドウの「ファイル名」を入力して「完了」をクリックします。
1-6 コピーした RSS を張り付けて保存します（georss_nishitachikawa.xml）。

HTML ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> HTML ファイルをクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_s_bbox.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「example」の「georss-flickr.html」の内容をコピーして新規作成したファイルに貼り付けます。

次の様にコードを修正します。

ライブラリと CSS などのリンク


<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- 追加 -->
  <title>GeoRSS from Picasa Web Album in OpenLayers</title>　<!-- 追加 -->
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> <!-- href の修正 -->
  <link rel="stylesheet" href="./example/style.css" type="text/css" /> <!-- href の修正 -->
  <style type="text/css">
   .olPopupContent {
    font-size: smaller;
   }
  </style>
  <script src="./lib/OpenLayers.js"></script> <!-- src の修正 -->
<!-- ここから追加 -->
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>
<!-- ここまで -->

  <script type="text/javascript">
// ここから地図の表示
   var map, layer1, layer2, markerLayer, style, popup;

   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",
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/user/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/user/mapfile/tokyo_bmi_pgis_img2.map',
     layers: 'kukaku',
     transparent: true,
     format: 'image/png'
   });
  map.addLayers([layer1, layer2]);
            
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
  map.addControl(new OpenLayers.Control.ScaleLine());
  
  if (!map.getCenter()) {
   map.zoomToMaxExtent()
  };
// ここまで
// ここから画像検索ルール
// rss の項目のサムネイルの属性から、外部画像の url を読み込むプロパティスタイルの生成
  style = new OpenLayers.Style({externalGraphic: "${thumbnail}"});

// rss の item の子要素（<title>:Picasa ウェッブアルバムではファイル名になります）に「NEC」という文字列を含むとき、大きなサムネイルを作成するポイントシンボライザのルールを生成
  var rule = new OpenLayers.Rule({
   symbolizer: {pointRadius: 30},
   filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.LIKE,
    property: "title",
    value: "*NEC*"
   })
  });
  rule.filter.value2regex("*");

// 上記ルールが適用されないときは小さなものを使う。
   var elseRule = new OpenLayers.Rule({
    elseFilter: true,
    symbolizer: {pointRadius: 20}
   });

   style.addRules([rule, elseRule]);
// ここまで 
// GeoRSS フォーマットとスタイルマップにより GML を生成
// var rsslayerURL = "http://picasaweb.google.com/data/feed/base/user/[user_id]/albumid/5388317799181820769?alt=rss&kind=photo&hl=ja"; 直接 RSS を読み込む例

   markerLayer = new OpenLayers.Layer.GML("Some images from Flickr",
   "nishi_tachikawa.xml", {
    projection: new OpenLayers.Projection("EPSG:4326"),
    format: OpenLayers.Format.GeoRSS,
    formatOptions: {
      // フューチャにサムネイルの属性を追加
     createFeatureFromItem: function(item) {
      var feature = OpenLayers.Format.GeoRSS.prototype
       .createFeatureFromItem.apply(this, arguments);
      feature.attributes.thumbnail =
       this.getElementsByTagNameNS(item, "*", "thumbnail")[0].getAttribute("url");
      return feature;
      }
     },
    // Giving the style map keys for "default" and "select"
    // rendering intent, to make the image larger when selected
    styleMap: new OpenLayers.StyleMap({
     "default": style,
     "select": new OpenLayers.Style({pointRadius: 35})
    })
   });
  map.addLayer(markerLayer);
// ここまで
// サムネイルをクリックしたときの制御
   var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
    onSelect: function(feature) {
     var pos = feature.geometry;
     if (popup) {
      map.removePopup(popup);
      }
     popup = new OpenLayers.Popup("popup", 
      new OpenLayers.LonLat(pos.x, pos.y),
      new OpenLayers.Size(254,320),
      "<h3>" + feature.attributes.title + "</h3>" +
      feature.attributes.description,
      true);
     map.addPopup(popup);
     }
   }); 
   map.addControl(popupControl);
            
   popupControl.activate();
  }
 </script>
// ここまで

2009年10月6日火曜日

OpenLayers で東京都の地図表示 9 Google Pisca ウェッブアルバムの GeoRSS の表示

Google のサービスを使って画像を地図上に表示してみました。

1 Google Pisca ウェッブアルバムにログインします。

2 画像のないときはアップロードします。
2-1 「アップロード」ボタンをクリックします。
2-2 「新規アルバムを作成」リンクをクリックします。
2-3 「タイトル」を入力します。
「マップで場所を表示」は後で設定します。
「共有　マイギャラリーで」は「一般公開」にします。
「続行」ボタンをクリックします。
2-4 「アップロードする写真を選択」で「参照」ボタンをクリックして画像を選択します。
「アップロードを開始」ボタンをクリックしてアップロードします。

3 アルバムマップを作成します。
（位置情報がある画像は自動的に配置されるので確かめてみてください。）
3-1 「編集」をクリックして「アルバム　マップ」をクリックします。
3-2 「場所を検索」に位置を入力して実行します。
3-3 サムネイルを選択し、マップをクリックして配置するか、サムネイルをマップ上にドラッグアンドドロップします。
3-4 「完了」ボタンをクリックします。
3-5 「アルバム表示に戻る」をクリックします。
3-6 RSS ボタンをクリックします。（アルバム表示右下）
3-7 URL をコピーします。

4 Google Pisca ウェッブアルバムの RSS を読み込むには、tokyo_bmi_pgis_img03.html に次のコードを追加します。


---
// ここから追加
var rsslayerURL2 = "http://picasaweb.google.com/data/feed/base/user/[user_id]/albumid/5264350151050308177?alt=rss&kind=photo&hl=ja";
var rssLayer2 = new OpenLayers.Layer.GeoRSS("Nishi Tachikawa", rsslayerURL2, {
 visibility: false,
 projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(rssLayer2);
// ここまで

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

/usr/lib/cgi-bin/proxy.cgi を開いて次のように allowedHosts に
'picasaweb.google.com', 'picasaweb.google.co.jp' を追加します。
（ドメインが２つ [.com, .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', 'picasaweb.google.com',
                'picasaweb.google.co.jp']
---

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

登録: 投稿 (Atom)

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

ブログアーカイブ

自己紹介

2009年10月12日月曜日

OpenLayers 20b georss_nishitachikawa.xml の内容

OpenLayers 20a GeoRSS で Pisca ウェッブアルバムの写真を表示1

2009年10月6日火曜日

OpenLayers で東京都の地図表示 9 Google Pisca ウェッブアルバムの GeoRSS の表示

2009年10月5日月曜日

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

2009年10月4日日曜日

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

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

ブログ アーカイブ

自己紹介

2009年10月12日月曜日

OpenLayers 20b georss_nishitachikawa.xml の内容

OpenLayers 20a GeoRSS で Pisca ウェッブアルバムの写真を表示1

2009年10月6日火曜日

OpenLayers で東京都の地図表示 9 Google Pisca ウェッブアルバム の GeoRSS の表示

2009年10月5日月曜日

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

2009年10月4日日曜日

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

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

ブログアーカイブ

OpenLayers で東京都の地図表示 9 Google Pisca ウェッブアルバムの GeoRSS の表示