Debianでka-MapのメモプラスOpenLayers とGeoExt: サムネイル

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>
// ここまで

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

ブログアーカイブ

自己紹介

2009年10月12日月曜日

OpenLayers 20b georss_nishitachikawa.xml の内容

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

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

ブログ アーカイブ

自己紹介

2009年10月12日月曜日

OpenLayers 20b georss_nishitachikawa.xml の内容

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

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

ブログアーカイブ