Debianでka-MapのメモプラスOpenLayers とGeoExt: 10月 2009

2009年10月31日土曜日

OpenLayers 21l FeatureServer で地図の表示 Flickr

flickrlayers は何も表示されませんでした。
Firebug には空の WFS ツリーが表示されました。
Firebug に表示される URL をブラウザのアドレス欄に入力しても空の WFS ツリーが表示されました。


http://localhost/openlayersTokyoproj/featureserver-1.12/featureserver.cgi/flickr?format=WFS&maxfeatures=10&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&SRS=EPSG%3A4326&BBOX=138.31229577194503,35.227550723802125,140.54908672504484,36.17489902852169

BBOX の部分を削除すると自分のデータが表示されました。
featureserver.cfg の flickr の user_id をコメントアウトして BBOX を元に戻すと内容があるWFS ツリーが表示されました。


http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[your_api_key]4750b8cf0a0683b86dba5b084b0cb061&bbox=139.233,35.421,139.234,35.422&tags=nishi-tachikawa

検索で自分の画像が検索できないので調べてみたら、次のような文章が見つかりました。

Why aren't my photos appearing in searches or groups?

そこにある条件を要約すると、

1 新しいアカウントでは、５枚以上アップロードする。
2 ２、３日後正確なタグで検索する。

この条件に合っていても検索されないときは、

1 画像個別のウィンドウの Additional Infomation の２項目めが
Only you...
Only Friends...
Only Family...
になっていたら、
Any one can...
にする。

2 You -> Your Account の Privacy & Permission タブの Hide your stuff from public searches の edit をクリックしてチェックを外す。

3 画像の中のいくつかが検索できないときは、画像個別のウィンドウの右下の Flag your photo で Hide this photo from public searches のチェックを外す。

4 Flag your photo の他の条件を、
Safe
Photo
にする。

Flickr の設定を変えて、数日後表示してみましたが、検索できませんでした。


http://localhost/openlayersTokyoproj/featureserver-1.12/featureserver.cgi/flickr?format=WFS&maxfeatures=10&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&SRS=EPSG%3A4326&BBOX=138.31229577194503,35.227550723802125,140.54908672504484,36.17489902852169

では、都心の画像がヒットしたのですが、郊外の画像がヒットしません。
画像数が多いと何か制限があるのかもしれません。

2009年10月29日木曜日

OpenLayers 21k FeatureServer で地図の表示 Open Street Map

osmlayers は表示されませんでした。
Firebug には、


An error occurred: syntax error: line 1, column 0
  File "/home/nob61/workspace/openlayersTokyoproj/featureserver-1.12/FeatureServer/Server.py", line 298, in cgiHandler
    format, content = service.dispatchRequest( params, path_info, host, post_data, request_method, accepts )
---

と出力されました。
「パラメータ」（タブ）には次の様に表示さていました。


BBOX 138.31229577194503,35.227550723802125,140.54908672504484,36.17489902852169
REQUEST GetFeature
SERVICE WFS
SRS EPSG:4326
VERSION 1.0.0
format WFS
maxfeatures 10

ブラウザのアドレスに次の様に入力して表示させました。


http://openstreetmap.org/api/0.6/map?bbox=138.31229577194503,35.227550723802125,140.54908672504484,36.17489902852169

すると次のようなエラーが表示されました。

The maximum bbox size is 0.25, and your request was too large. Either request a smaller area, or use planet.osm

表示エリアが広いようなので拡大してみました。
「+」（拡大ボタン）を５回クリックして表示されました。
style を指定していないのでデフォルトのスタイルで描画されました。

2009年10月28日水曜日

OpenLayers 21j FeatureServer で地図の表示 PostGIS

Openlayers で地図を表示してみます。

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

次の様にコードを修正します。
<title> などは任意に修正してください。


<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>FeatureServer Example in OpenLayers</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />
  <script src="./lib/OpenLayers.js"></script>

  <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>

// map ベースレイヤ部分


  <script type="text/javascript">
  var map, baselayer, postgislayer1, postgislayer2, osmlayer, flickrlayer;

  function init(){
   OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
   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)
   });
   baselayer = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
    "http://localhost/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_bmi_pgis_img.map',
     layers: 'height',
     format: 'image/png'
    });

// PostGIS 部分

  
   postgislayer1 = new OpenLayers.Layer.WFS( "Tokyo Kukaku Sen WFS",
    "featureserver-1.12/featureserver.cgi/gyoseisen?format=WFS",
    {
     maxfeatures: '5' //すべて描画すると時間がかかるので５個まで表示
    },{
     extractAttributes: true,
     displayInLayerSwitcher: true,
     visibility: false //すべて描画すると時間がかかるので初めは非表示
    });
   postgislayer1.style = {
    fillColor:'#FF0000',
    fillOpacity: 0.2,
    strokeColor: "#FF0000",
    strokeOpacity: 1,
    strokeWidth: 1
   };

   postgislayer2 = new OpenLayers.Layer.WFS( "Tokyo Gyosei-Kai WFS",
    "featureserver-1.12/featureserver.cgi/gyoseikai?format=WFS",
    {
     maxfeatures: '1'
    },{
     extractAttributes: true,
     displayInLayerSwitcher: true,
     visibility: false,
     projection: new OpenLayers.Projection('EPSG:4326')
     //projection を指定すると描画される
    });
   postgislayer2.style = {
    fillColor:'#FF00cc',
    fillOpacity: 0.2,
    strokeColor: "#FF00cc",
    strokeOpacity: 1,
    strokeWidth: 1
   };

// Open Street Map 部分

  
   osmlayer = new OpenLayers.Layer.WFS( "Tokyo OSM WFS",
    "featureserver-1.12/featureserver.cgi/osm?format=WFS",
    {
     maxfeatures: '10'
    },{
     extractAttributes: true,
     displayInLayerSwitcher: true,
     projection: new OpenLayers.Projection('EPSG:4326')
    });

// Flickr 部分

  
    flickrlayer = new OpenLayers.Layer.WFS( "Tokyo Flickr WFS",
    "featureserver-1.12/featureserver.cgi/flickr?format=WFS",
    {
     maxfeatures: '10'
    },{
     extractAttributes: true,
     displayInLayerSwitcher: true,
     projection: new OpenLayers.Projection('EPSG:4326')
   });

// Map 表示と <body> 部分

  
   map.addLayers([baselayer, postgislayer1, postgislayer2, osmlayer, flickrlayer]);

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

   if (!map.getCenter()) {
    map.zoomToMaxExtent()
   };
  }
  </script>
 </head>
 <body onload="init()">
  <h1 id="title">FeatureServer Example in OpenLayers</h1>
   <div id="map" class="smallmap"></div>
  </body>
</html>

postgislayer1 だけ表示されました。
Proj4js で再投影するためか、表示に時間がかかりました。
「警告：応答の内スクリプト」ウィンドウが表示されるので、「処理を続行」ボタンをクリックしてください。

レイヤが表示されないときは、Firebug で出力されるメッセージを参考にしました。

postgislayer2 は、空の WFS ツリーが出力されました。
map と投影（projection）が違うので指定してみました。
projection: new OpenLayers.Projection('EPSG:4326')

2009年10月27日火曜日

OpenLayers 21i FeatureServer Twitter の確認

twitter のコメントを外します。
ブラウザに次のアドレスを入力して確認します。


http://localhost/featureserver112/featureserver.cgi/twitter/all.gml

An error occurred: No JSON object could be decoded
---

featureserver-1.12/FeatureServer/DataSource/Twitter.py
をみてみると、twittervision のAPI を使っていました。


---
data = urllib.urlopen("http://api.twittervision.com/user/current_status/%s.json" % self.username).read()
---

次のコマンドを使ってデータをみてみると


user@debian:~$ curl http://api.twittervision.com/user/current_status/nobmobtw.xml
---
<h1>The page you were looking for doesn't exist.</h1>
---

と出力されましたが、データがないようです。

twittervision の API を twitter の API に替えて試してみましたがエラーが表示されたのでここまでにしました。


---
data = urllib.urlopen("http://twitter.com/users/show/%s.json" % self.username).read()
---

エラー内容


An error occurred: string indices must be integers
---

次のコマンドでデータは取得できました。


user@debian:~$ curl http://twitter.com/users/show/[user_id].xml

2009年10月26日月曜日

OpenLayers 21h FeatureServer Flickr の確認

flickr のコメントを外します。
user_id は、owner_id のことで、確認するところが分からなかったので Your photostream ページの下の RSS ボタンをクリックし、表示されたページのソース表示から探しました。
ブラウザに次のアドレスを入力して確認します。


http://localhost/featureserver112/featureserver.cgi/flickr/all.gml

自分のアップロードした画像の情報が表示されます。

最初、レイヤの名前（flickr）を間違えてエラーが表示されました。
もし原因が分からないときは、外部 API を試してみてください。
基本 URL （http://api.flickr.com/services/rest/?）にパラメータを続けます。
例えば、


http://api.flickr.com/services/rest/?method=flickr.test.echo&api_key=[your_api_key]

なら api_key が表示されます。
（[your_api_key] には、取得した api_key を入力してください。）
他にも


http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[your_api_key]&bbox=139.395,35.705,139.4,35.71&tags=flower

なら画像が検索されます。詳しくは、API の Documents をみてください。
また、取得した api_key と secret は、


featureserver-1.12/FeatureServer/DataSource/Flickr.py

の api_key と secret の値と交換できます。


---
FLICKR_API_KEY = "4750b***************************"
FLICKR_SECRET = "4b671***********"
---
def __init__(self, api_key = "4750b***************************", secret = "4b671***********", url_base = "http://api.flickr.com/services/rest/"):
---

2009年10月25日日曜日

OpenLayers 21g FeatureServer Open Street Map の確認

open street map のコメントを外します。
ブラウザに次のアドレスを入力して確認します。


http://localhost/featureserver112/featureserver.cgi/osm/all.gml?bbox=139.395,35.705,139.4,35.71

空の WFS のツリーが表示されました。
ブラウザに次のアドレスを入力しするとデータが表示されるので FeatureServer に OSM からデータを受け取れないようです。


http://api.openstreetmap.org/api/0.6/map?bbox=139.395,35.705,139.4,35.71

featureserver-1.12/FeatureServer/DataSource/OSM.py の次の部分を修正して試すと表示されました。
（api のバージョンを 0.5 を 0.6 にします。）


---
class OSM (DataSource):
 osmxapi_url = "http://www.informationfreeway.org/api/0.6/"
---
def select_main(self, action):
 if action.id:
  u = urllib.urlopen("http://openstreetmap.org/api/0.6/way/%s/full" % action.id)
 elif action.bbox: 
  u = urllib.urlopen("http://openstreetmap.org/api/0.6/map?bbox=%s" % ",".join(map(str, action.bbox)))
---

ボックス内の道路の情報が表示されます。

Eclipse に Aptana の Python plugin を設定する
1 ヘルプ -> Install Aptana Features をクリックします。
2 「Customize Aptana Studio」ウィンドウで Aptana PyDev をチェックして「インストール」ボタンをクリックします。
3 「使用可能なソフトウェア」ウィンドウで「PyDev」をチェックして「次へ」ボタンをクリックします。
4 「インストール詳細」ウィンドウで「次へ」をクリックします。
5 「ライセンスのビュー」ウィンドウで「使用条件の条項に同意します」をチェックし、「完了」ボタンをクリックします。
（英語で認証確認ウィンドウが表示されたら「OK」ボタンをクリックします。）

2009年10月24日土曜日

OpenLayers 21f FeatureServer PostGIS の確認

featureserver.cfg に追加した部分のうち「postgis layer 1」以外をコメントアウトして確認します。


http://localhost/featureserver112/featureserver.cgi/gyoseisen/1.gml

次のようなエラーが表示されました。


An error occurred: No module named psycopg
---

Synaptic パッケージマネージャで、「Python PostGIS」を検索したら何もヒットしなかったので、「Python Postgresql」を検索してヒットした中に「python-psycopg」と「python-psycopg2」があったので、「python-psycopg2」をインストールしました。

再度、ブラウザに次のアドレスを入力して確認します。


http://localhost/featureserver112/featureserver.cgi/gyoseisen/1.gml

WFS のツリーが表示されました。

2009年10月22日木曜日

OpenLayers 21e FeatureServer shapefile の確認

ブラウザに次のアドレスを入力して確認します。


http://localhost/featureserver112/featureserver.cgi/railroad/1.gml

次のようなエラーが表示されました。


An error occurred: No module named ogr
---

featureserver.cfg に追加した部分のうち「shapefile 1」以外をコメントアウトして確認します。
同じエラーが表示されたので、Google で検索すると
「Debian -- sid の python-gdal パッケージに関する詳細」
がヒットしたので Synaptic パッケージマネージャで次のモジュールをインストールします。
python-gdal（OGR）

再度、ブラウザに次のアドレスを入力して確認します。


http://localhost/featureserver112/featureserver.cgi/railroad/1.gml

次のようなエラーが表示されました。


An error occurred: 'utf8' codec can't decode byte 0x82 in position 0: unexpected code byte
---

シェイプファイルが Shift-JIS なので今回はテストしないことにします。
（どうやってもエラーが出て変換できなかったので。）

2009年10月21日水曜日

OpenLayers 21d FeatureServer configration ファイル

featureserver-1.12/featureserver.cfg ファイルを次の様に修正します。


# Metadata section allows you to define the default
# service type to be created, and location for error logging
[metadata]
default_service=JSON
# error_log=error.log
error_log=/home/user/workspace/openlayersTokyoproj/featureserver-1.12/trunk/error.log

# each additional section is a 'layer', which can be accessed.
# see DataSources.txt for more info on configuring.
[scribble]
type=DBM
# file=/tmp/featureserver.scribble
file=/home/user/fs_tmp/featureserver.scribble
gaping_security_hole=yes


#shapefile 1
[railroad]
type=OGR
dsn=/home/user/mapdata/tokyo/N02-08_EB02.shp
layer=N02-08_EB02
 
#shapefile 2
[river]
type=OGR
dsn=/home/user/mapdata/tokyo_bmi/WL.shp
layer=suigaisen
 
#postgis layer 1
[gyoseisen]
type=PostGIS
dsn=host=localhost dbname=tokyo_bmi user=user password=balanced
layer=gyoseisen
fid=gid
geometry=the_geom 
srid=-1
 
#postgis layer 2
[gyoseikai]
type=PostGIS
dsn=host=localhost dbname=tokyo user=user password=balanced
layer=gyoseikai
fid=gid
geometry=the_geom
srid=-1
 
#open street map
[osm]
type=OSM
osmxapi=no
 
#flickr
[flickr]
type=Flickr
user_id=12345678@N09
#ダミーです。
#tags=newyork
 
#twitter
[twitter]
type=Twitter
username=anytwitteruser
#twitter のユーザID

2009年10月20日火曜日

OpenLayers 21c FeatureServer で、Shapefile PostGIS OpenStreetMap Flickr Twitter の準備

FeatureServer で、Shapefiles、PostGis layers、OpenStreetMap、Flickr、Twitter　を使ってみます。

Paolo Corti さんのブログの

Thinking in GIS
A day with FeatureServer #2
http://www.paolocorti.net/2008/05/03/a-day-with-featureserver-2/

を参考にします。

1 シェープファイル Shapefile
以前、基盤地図情報の G-XML から作成した東京都のシェープファイルを使用します。

2 PostGIS
現在使用している東京都のデータを使用します。

3 オープンストリートマップ Open Street Map
OpenStreetMap(略称OSM)は道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクトです。（OpenStreetMap Japan より引用）
ここでは西立川駅付近のデータを利用します。
FeatureServer で OSM サービスを設定します。
クエリは bbox か id がサポートされています。

アクセス例: New York の場合


http://localhost/featureserver112/featureserver.cgi/osm/all.gml?bbox=-124.1,47.2,-123.9,47.5
http://localhost/featureserver112/featureserver.cgi/osm/8551622.gml

詳しくは、

OpenStreetMap Japan ホームページ
http://www.openstreetmap.jp/

をみてください。

4 Flickr
今回のデモを試すため Flickr のアカウントを取得します。
Flickr は Web2.0 世代の画像管理アプリケーションです。
無料のアカウントで毎月数千枚アップロードできます。
画像には EXIF 形式の location フィールドにジオタグをつけますが、これには４つの方法があります。
1 GPS 機能のついたカメラ
2 ジオタグのついた画像を作成するソフトウェアのついた GPS
3 カメラに装着できるGPSデバイス
4 Flickr のウェブサイトを使う

アクセス例：このままではすべての画像にアクセスしてしまうので実際にはオプションをつけます。


http://localhost/featureserver112/featureserver.cgi/flickr/all.gml

Flickr の使い方が次のサイトにあります。

Flickrの使い方
http://www14.atwiki.jp/flickr_freak/pages/4.html

このサイトは日本語ですが、Flickr のホームページは英語です。

Flickr で位置情報のついた画像を認識させるには、

Flickr の API key を取得するには、
（質問に答える必要があるので、よく分からないときは flickr の設定はしないようにしてください。
既に、featureserver-1.12/featureServer/DataSource/Flickr.py に API Key が設定されています。）

1 Flickr Services ページ
http://www.flickr.com/services/
または、Help -> FAQ -> The Flickr API ページの services page リンクをクリック。

内の、Developing on the Flickr API の 4.Apply for an API Key をクリック。
2 テストで自分自身の画像を使うので、Apply for a Non-Commercial API Key ボタンをクリック。
3 「Step 2 of 3: Tell us about your Non-Commercial API project」に戻るので、必要事項を入力して「Submit Application」をクリック。
4 「Step 3 of 3: Done! Here is your brand new Non-Commercial API key」に key が表示。
key:4750b8**************************
secret:4b671f***********

画像のジオタグを有効にするには、

1 You（タブ）-> Your Account をクリック
2 Privacy & Permissions（タブ）をクリックして「Import EXIF location data [?] No」となっていたら「edit」をクリック。
3 「Automagically import GPS information as geo data」ページ内の「Yes please, that would be lovely.」にチェックをつけて「SAVE」ボタンをクリック。

Map に追加します。

4 You（タブ）-> Your Photostream をクリック。
5 画像をクリック。
6 ページ右中段の「Add to your map」をクリック。
7 「SAVE TO MAP」ボタンをクリック。
（住所と地図が表示されますが、地図が表示されないときはスケールや「Map, Hybrid, Satellite」を操作してみてください。）

5 Twitter（Map）
Twitter は、最近ユーザが増えているミニブログです。
IT関係者も実際ユーザになっています。

アクセス例：複数の twitter ユーザは設定できませんでした。


http://localhost/featureserver112/featureserver.cgi/twitter/all.gml

Twitter に位置情報を追加するには、プロフィールの現在地に、緯度経度、地名、駅名などを入れます。
また、
http://twittermap.com/maps/faq.html
に位置情報を追加する方法が記載されています。
ここの方法で実際に twittermap に表示されたものはありませんでした。
L:35.70359,139.39368 L:spark=35.70359,139.39368 をテキスト中に挿入する方法で、twitter の検索「near:西立川駅 within:1mi」（"西立川駅" を中心に半径１マイル（1.6km）内のつぶやき）を検索すると表示されました。
他にも twitter 用のソフトウェアが色々あるので、興味のある方はみてください。

curl を使った更新の方法は次の通りです。


curl -X PUT  -u username:password -d location="Via Berto, Rome, Italy" http://twitter.com/account/update_location.json

2009年10月19日月曜日

OpenLayers 21b OpenLayers を使った FeatureServer のデモ

最初に確認することは、scribble レイヤにアクセスし gml を取得するため、次の様にタイプします：


http://localhost/featureserver112/featureserver.cgi/scribble/all.gml

まだデモアプリケーションを使用しない限り、空の WFS：FeatureCollectionツリーが取得されます。

次に、featureserver-1.12 にある index.html ファイルをみてください。


http://localhost/featureserver112/

次のようなエラーメッセージ


Your browser does not support vector rendering. Currently supported renderers are:
SVG
VML

が表示された場合は featureserver-1.12/index.html の次のコードを修正してください。


---
<!-- 
<script src="http://openlayers.org/api/2.5-rc5/OpenLayers.js"></script>
-->
<script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
---

ベクトル図をいくつか追加してから再度レイヤのGML（またはJSONまたはGeoJSONまたはatomまたは他のすべてのもの）を取得することを試します。


http://localhost/featureserver112/featureserver.cgi/scribble/all.gml

上記の例では、データのある WFS：FeatureCollection ツリーが取得されます。
上記 URL の gml（format）の部分を JSON など他の形式に変えると出力されるデータの形式が変わります。
all（id）の部分は feature の id を指定します。all は feature がすべて出力されます。
URL をクエリパラメタでフィルタができます。
詳しくは、featureserver-1.12/doc/Querying.txt を参照してください。

FeatureServer はデモのデータを curl を使って編集できます。

curl は、各種プロトコルを使用しているサーバからファイルを取得するためのクライアントプログラムです。コマンドは、ユーザがマシンと一切対話しなくても済むように設計されています。（Debian curl パッケージサイトから引用。）

Synaptic パッケージマネージャでインストールします。

フィーチャ（id = 2）を削除し、再度挿入してみます。

削除する前に、JSONにフィーチャを保存します（ブラウザのアドレスに入力）：


http://localhost/featureserver112/featureserver.cgi/scribble/2.json

表示されたデータを　"2.json" というファイル名でホームディレクトリに保存します。
削除します：

user@debian:~$ curl -X DELETE http://localhost/featureserver112/featureserver.cgi/scribble/2.json
{"features": []}

FeatureServer Demo ページの　「GML」や「Edit JSON」リンクをクリックして削除されていることを確認します。
ブラウザの「戻る」ボタンで Demo ページに戻ります。

再挿入します：

user@debian:~$ curl -d @2.json http://localhost/featureserver112/featureserver.cgi/scribble/create.json
{"features": [{"geometry": {"type": "Polygon", "coordinates": [[[17.578125, 54.4921875], [-5.625, 21.4453125], [35.15625, 16.5234375], [17.578125, 54.4921875]]]}, "id": 5, "properties": {"strokeColor": "red", "title": "Feature 4", "author": "Your Name Here"}}]}

2009年10月18日日曜日

OpenLayers 21a FeatureServer を使ってみるインストール編

BBOX Strategy Example(strategy-bbox.html)を参考に、BBOX Strategy を試すために FeatureSrever を設定します。

FeatureServer ホームページ
http://featureserver.org/

の Getting Started With FeatureServer
http://featureserver.org/doc/Readme.html

を参考にインストールします。

*****
Getting Started With FeatureServer ページの DESCRIPTION より（意訳）

FeatureServer は、Python ベースのジオグラフィック（地理的）フィーチャサーバです。
いくかの異なったバックエンド（サーバ）の地理的なベクトルフィーチャを蓄積し、RESTベースのAPI経由で、作成と更新、削除など、相互に使用できます。
FeatureServer は、Python CGI や mod_python、または独立サーバとして動作します。
FeatureServer は OpenLayers と使用することを前提に、BSD ライセンスのウェッブマッピングインターフェイスとして設計されています。
FeatureServer を OpenLayers と共に設定するときの問い合わせは、irc.freenode.net の #featureserver か、featureserver@featureserver.org にメールしてください。
FeatureServer は、BSD ライセンスに近いオープンソースライセンスの著作権でリリースされています。
*****

1 featureserver-1.12-full.tar.gz をダウンロードします。

2 解凍したフォルダを Eclipse にインポートします。
2-1 featureserver-1.12-full.tar.gz を解凍します。
user@debian:~Desktop$tar xvzf featureserver-1.12-full.tar.gz
2-2 ファイル->インポートをクリックします
2-3 選択ウィンドウで一般->ファイル・システムを選択して「次へ」ボタンをクリックします。
2-4 ファイル・システムウィンドウで次のディレクトリからの「参照」ボタンをクリックします。
2-5 ディレクトリから Desktop を選んで「OK」ボタンをクリックします。
2-6 ファイル・システムウィンドウで featureserver-1.12 をチェックして「完了」ボタンをクリックします。

ここからは Paolo Corti さんのブログの


Thinking in GIS
A day with FeatureServer #1
http://www.paolocorti.net/2008/02/21/a-day-with-featureserver-1/
A day with FeatureServer #2
http://www.paolocorti.net/2008/05/03/a-day-with-featureserver-2/

を参考にしました。

3 CGI で動作させます
3-1 Eclipse の featureserver-1.12/featureserver.cfg を編集します。


# Metadata section allows you to define the default
# service type to be created, and location for error logging
[metadata]
default_service=JSON　#FeatureServer が扱うデータのフォーマット
error_log=/home/user/workspace/openlayersTokyoproj/featureserver-1.12/trunk/error.log #修正

# each additional section is a 'layer', which can be accessed.
# see DataSources.txt for more info on configuring.
[scribble]
type=DBM #dbm 形式のファイル
file=/home/user/fs_tmp/featureserver.scribble #修正 httpdのユーザー（通常はwww-data）が書き込み可能にする
gaping_security_hole=yes

3-2 FeatureServer ディレクトリの CGI execution （実効）を許可します。
Apache のサイト設定ファイル（例えば /etc/apache2/sites-available/kamap）に次の様に追加します。


root@debian:/home/user# a2dissite kamap
root@debian:/home/user# vim /etc/apache2/sites-available/kamap
---
Alias /featureserver112/ "/home/user/workspace/openlayersTokyoproj/featureserver-1.12/"
<Directory /home/user/workspace/openlayersTokyoproj/featureserver-1.12/>
 AddHandler cgi-script .cgi
 Options +ExecCGI
</Directory>
---
root@debian:/home/user# a2ensite kamap

3-3 次の様にウェッブブラウザにアドレスを入力します。


http://localhost/featureserver112/featureserver.cgi/scribble/all.atom

空の 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月11日日曜日

OpenLayers で東京都の地図表示 10d Google Pisca で位置情報のある写真を表示4

ポップアップ表示をするため、KML Layer Example（sundials.html）を参考に次のコードを追加します。
前述のコードは削除してください。


---
var sundials = new OpenLayers.Layer.Vector("西立川駅", {
 projection: map.displayProjection,
 strategies: [new OpenLayers.Strategy.Fixed()], //一度だけ feature を要求
 protocol: new OpenLayers.Protocol.HTTP({ //ベクトルレイヤのための基本的な HTTP プロトコル
  url: "西立川駅.kml",
   format: new OpenLayers.Format.KML({
    extractStyles: true, //スタイルの週出
    extractAttributes: true //属性の抽出
    })
  })
});
            
map.addLayer(sundials);
            
select = new OpenLayers.Control.SelectFeature(sundials);
            
sundials.events.on({
 "featureselected": onFeatureSelect, // ポップアップ表示時のPointの色
 "featureunselected": onFeatureUnselect // ポップアップを閉じたとき元に戻す
});

map.addControl(select);
select.activate();   

map.addControl(new OpenLayers.Control.LayerSwitcher());
---
function onPopupClose(evt) {
 select.unselectAll();
}
function onFeatureSelect(event) {
 var feature = event.feature;
 // Since KML is user-generated, do naive protection against
 // Javascript.
var content = "<h2>"+feature.attributes.firstChild.name + "</h2>" + feature.attributes.description; // Placemark の子要素 name と description の表示
if (content.search("<script") != -1) {
 content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "<");
}
popup = new OpenLayers.Popup.FramedCloud("chicken", 
 feature.geometry.getBounds().getCenterLonLat(),
 new OpenLayers.Size(100,100),
 content,
 null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(event) {
 var feature = event.feature;
 if(feature.popup) {
  map.removePopup(feature.popup);
  feature.popup.destroy();
  delete feature.popup;
 }
}

</script>
---

2009年10月10日土曜日

OpenLayers で東京都の地図表示 10c Google Pisca で位置情報のある写真を表示3

KML ファイルを Eclipse にインポートして OpenLayers で表示します。

1 Eclipse のメニューバーの　ファイル->インポートをクリックします。
2 「選択」ダイアログで「ファイルシステムをクリックして「次へ」ボタンをクリックします。
3 「次のディレクトリーから」右側の「参照」ボタンクリックします。
4 KML ファイルがあるフォルダをクリックして「OK」ボタンをクリックします。
5 「ファイル・システム」ダイアログで KML ファイルをチェックして「宛先」を確認し、「完了」ボタンをクリックします。
6 画像も同じようにインポートします。

Eclipse で KML ファイルを開くときは、ファイルを右クリックして　アプリケーションから開く->テキストエディタをクリックします。
画像（NEC_0036.JPG）の位置を修正します。


---
<img src="NEC_0036.JPG">
---

tokyo_bmi_pgis_img03.html に次のコードを追加します。


---
// ここから追加   
 map.addLayer(new OpenLayers.Layer.GML("西立川駅", "西立川駅.kml", 
  {
   format: OpenLayers.Format.KML, 
   formatOptions: {
    extractStyles: true, 
    extractAttributes: true
   }
  }));
 // ここまで

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

このレイヤを表示すると、前回設定した GeoRSS で表示したマーカをクリックしてもポップアップ表示しません。
レイヤスイッチャーでどちらかだけ表示してください。

2009年10月8日木曜日

OpenLayers で東京都の地図表示 10b Google Pisca で位置情報のある写真を表示2

Google Earth から KML ファイルの出力

私の debian では Google Earth が起動できなかったので、ここからの操作は Mac で操作しました。
iPhoto に KMZ ファイルを出力するプラグインをインストールして KMZ ファイルを出力し、Google Earth で表示しました。
文字化けしたので修正しました。
（Linux 版には、tool -> Geotag -> View in Google Earth... がありますが動作するか確かめられませんでした。
Windows 版の Picasa には「ジオタグ」ボタンがあり、Google Earth に表示できます。）

KMZ ファイルを Google Earth で表示すると、「保留」にフォルダが作成されます。
そのフォルダを右クリックして「名前をつけて場所を保存」をクリックします。
「フォーマット」を「kml」にして「保存」ボタンをクリックします。

フォルダ（西立川駅）と画像（NEC_0036）の KML は次の様になりました。

西立川駅.kml の内容


<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Folder creator="iPhotoToGoogleEarth http://craig.stanton.net.nz">
 <name>西立川駅</name>
 <open>1</open>
 <description>JR青梅線</description>
 <Placemark>
  <name>NEC_0036.JPG</name>
  <snippet></snippet>
  <Snippet maxLines="0"></Snippet>
  <description><![CDATA[<center><img src="西立川駅.kmz/images/NEC_0036.JPG"><br></center>]]></description>
  <Point>
   <coordinates>139.393723,35.703873,0</coordinates>
  </Point>
 </Placemark>
</Folder>
</kml>

NEC_0036.kml の内容


<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Placemark>
 <name>NEC_0036.JPG</name>
 <snippet></snippet>
 <Snippet maxLines="0"></Snippet>
 <description><![CDATA[<center><img src="西立川駅.kmz/images/NEC_0036.JPG"><br></center>]]></description>
 <Point>
  <coordinates>139.393723,35.703873,0</coordinates>
 </Point>
</Placemark>
</kml>

2009年10月7日水曜日

OpenLayers で東京都の地図表示 10a Google Pisca で位置情報のある写真を表示1

携帯などで写した位置情報のある写真を Google Pisca -> Google Earth -> KML ファイル出力という手順で表示します。
今回は、Picasa3 と Google Earth をインストールをします。

Picasa3 のインストール
1「Picasa ウェブアルバム」のページの「Picasa 3 のダウンロード」リンクをクリックします。
2 「Picasa for Linux」ページの「Download Picasa 3 for Linux (beta)」ボタンをクリックします。
3 「Picasa 3.0 for Linux (beta)」ページの「●deb, for Debian/Ubuntu i386:
http://dl.google.com/linux/deb/pool/non-free/p/picasa/picasa_3.0-current_i386.deb」リンクをクリックします。
4 「picasa_3.0-current_i386.deb を開く」で「ファイルを保存」をクリックします。
5 root で次の様に実行します。
user@debian:~/Desktop# dpkg -i picasa_3.0-current_i386.deb

Picasa の起動
Debian では、アプリケーション -> その他 -> Picasa で起動します。
Debian を再起動したら、アプリケーション -> グラフィックス -> Picasa -> Picasa で起動するようになってました。
使用承諾で I Agree ボタンをクリックすると起動して、Debian 内の画像検索を始めます。

Picasa のフォント
文字化けしているところがあるので、検索してみるとみなさんが対処法を載せていました。
私もみなさんのお力をお借りしました。

1 次の様にリンクを作成。


debian:/home/user# ln -s /usr/share/fonts/truetype/ /opt/google/picasa/3.0/wine/drive_c/windows/fonts
debian:/home/user# ls -l /opt/google/picasa/3.0/wine/drive_c/windows/fonts/
---
lrwxrwxrwx 1 root root    26 2009-09-29 19:18 truetype -> /usr/share/fonts/truetype/
---

2 system.reg を編集。


user@debian:~$ vim .google/picasa/3.0/system.reg
---
[Software\\Microsoft\\Windows NT\\CurrentVersion\\Fonts] 1254213771
---
"VLPGothic"="VL-PGothic-Regular.ttf" <-追加
---

3 アプリケーション -> グラフィックス -> Picasa -> Picasa Font Configure を起動して、「Font Linking」タブの「Linked Fonts」に「Add」ボタンをクリックして「VLPGthic」を追加。

4 ダイアログの「キャンセル」「適用」「ヘルプ」が化けるとき。


[Software\\Microsoft\\Windows NT\\CurrentVersion\\FontSubstitutes] 1254124511
---
"MS Shell Dlg"="Tahoma" -> "MS Shell Dlg"="VLPGothic"
"MS Shell Dlg 2"="Tahoma" -> "MS Shell Dlg 2"="VLPGothic"
---

Pisca ウェッブアルバムに接続
1 Picasa 右上の「Sign in to Web Album」をクリックします。
2 ユーザ名とパスワードを入力して「Sign In」ボタンをクリックします。
3 Picasa 右上の「Web Album」をクリックすると Pisca ウェッブアルバムが起動します。
4 Pisca3 の File -> Import from Web Album ... をクリックします。
5 Import Albums from Web Album で「Import all album not ...」のチェックをはずし、必要なアルバムをチェックしたら「OK」ボタンをクリックします。
（日本語が表示されませんでした。）

Google Earth をインストール

1 Synaptic パッケージマネージャで「googleearth-package」をクリックしてインストール指定をクリックします。
2 「適用」ボタンをクリックします。
3 ターミナルで make-googleearth-package --force を実行します。

4 インストールします。
debian:/home/user# dpkg -i googleearth_5.1.3509.4636+0.5.4-1_i386.deb

5 文字化けしているので次のファイルを別の場所に移動します。
/usr/lib/google-earth/libQtCore.so.4
/usr/lib/google-earth/libQtGui.so.4
/usr/lib/google-earth/libQtNetwork.so.4
/usr/lib/google-earth/libQtWebKit.so.4

6 次のパッケージがなければSynaptic パッケージマネージャで次のパッケージをインストールします。
libqtcore4
libqtgui4
libqt4-network
libqt4-webkit

7 「アプリケーション」->「インターネット」->「Google Earth」をクリックします。

私の debian では Google Earth が起動できませんでした。

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

2009年10月3日土曜日

OpenLayers で東京都の地図表示 7c ポイントの表示 - projection の変換

proj4js フォルダを openlayersTokyoproj/lib/ にインポートします。
0 OpenLayers の /sandbox/madair/lib ページ
http://trac.openlayers.org/browser/sandbox/madair/lib?rev=4572
で、インポートするディレクトリを確認します。
proj フォルダを作成して proj4js フォルダを入れます。
1 ファイル->インポートをクリックします
2 選択ウィンドウで一般->ファイル・システムを選択して「次へ」ボタンをクリックします。
3 ファイル・システムウィンドウで次のディレクトリからの「参照」ボタンをクリックします。
4 ディレクトリからインポートで解凍した proj フォルダを選んで「OK」ボタンをクリックします。
5 ファイル・システムウィンドウで proj をチェックします。
6 宛先フォルダーの「参照」ボタンをクリックします。
7 フォルダーにインポートウィンドウで「lib」をクリックして反転させ、「OK」ボタンをクリックします。
8 インポートウィンドウで「完了」ボタンをクリックします。

OpenLayers は projection（投影法）の変換に、transform 関数が用意されています。

次のメーリングリストを参考に、OpenLayers.Projection.tansform を試してみます。

Re: [OpenLayers-Users] OpenLayers.Projection and proj4js.js
http://www.mail-archive.com/users@openlayers.org/msg04620.html

tokyo_bmi_pgis_img02.html に次のコードを追加します。


---
<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 p = new OpenLayers.Geometry.Point(139.5,35.70);
 var proj_src = new OpenLayers.Projection("EPSG:4326");
 var proj_tgt = new OpenLayers.Projection("EPSG:2456");

 document.write("Point p [before OpenLayers.Projection.transform] is: " + p + "<br />");
 OpenLayers.Projection.transform(p,proj_src,proj_tgt);
 document.write("Point p [after OpenLayers.Projection.transform] is: " + p + "<br />");
 document.write("proj_src is: " + proj_src + "<br />");
 document.write("proj_tgt is: " + proj_tgt + "<br />");
 document.write();
---

結果は次の様に変換されました。


---
Point p [before OpenLayers.Projection.transform] is: POINT(139.5 35.7)
Point p [after OpenLayers.Projection.transform] is: POINT(-226260.3162219112 1078195.254530467)
proj_src is: EPSG:4326
proj_tgt is: EPSG:2456
---

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);
  var proj_src = new OpenLayers.Projection("EPSG:4326"); //追加
  point.transform(proj_src,map.getProjectionObject());   //追加
  markers.addMarker(new OpenLayers.Marker(point, icon));
---

マウスポジションが度数表示になりました。
次の様にマップコントロールのスケールラインを追加したら表示されるようになりました。


  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
  map.addControl(new OpenLayers.Control.ScaleLine()); //追加

  map.zoomToMaxExtent();

}
</script>
---

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」
にして変換してみます。

登録: 投稿 (Atom)

ブログ アーカイブ

自己紹介

2009年10月31日土曜日

2009年10月29日木曜日

2009年10月28日水曜日

2009年10月27日火曜日

2009年10月26日月曜日

2009年10月25日日曜日

2009年10月24日土曜日

2009年10月22日木曜日

2009年10月21日水曜日

2009年10月20日火曜日

2009年10月19日月曜日

2009年10月18日日曜日

2009年10月12日月曜日

2009年10月11日日曜日

2009年10月10日土曜日

2009年10月8日木曜日

2009年10月7日水曜日

2009年10月6日火曜日

2009年10月5日月曜日

2009年10月4日日曜日

2009年10月3日土曜日

2009年10月1日木曜日

ブログアーカイブ