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

2009年12月14日月曜日

OpenLayers 40g WMC - OpenLayers で Map Context を試す4 地図の表示のテスト2 New Map

wmc.html の「read and merge」のボタンをクリックしたとき、次のコードが実行されます。

map = format.read(wmc_doc, {map: "map"});

これの動作は、id が map の <div> に新しい地図が挿入されるため、元の地図が表示されたままで、その下に表示されます。



元の地図を削除するためのコードを含んだ function loadSuccess のコードは次のようになります。

function loadSuccess(request){
var wmc_doc = request.responseText;
map.destroy();
map = format.read(wmc_doc, {map: "map"});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
map.zoomToMaxExtent();
}

マップコントロールの表示は、地図がどのように表示されているかを理解するために有効です。
レイヤは設定されていますが、スケールの単位はメータでマウスポジションの単位もメータです。
地図の範囲は、拡大されていますが、表示できる範囲です。
マップのオプションがほとんど設定されていないようです。

OpenLayers.Formt.WMC の Class Documentation の Function -> Parameter -> options に次のように記述されていました。

options {Object} The options object must contain a map property. If the map property is a string, it must be the id of a dom element where the new map will be placed. If the map property is an OpenLayers.Map, the layers from the context document will be added to the map.

訳してみると、

options {Object}
options オブジェクトは、map プロパティを含んでいなければなりません。map プロパティが文字列なら、新しい map が設置される DOM エレメントの id でなければなりません。map プロパティが OpenLayers.Map なら、context ドキュメントから作成されたレイヤは map に追加されます。

とあります。そこで、次のようにコードを修正したら地図が表示されました。

map = format.read(wmc_doc, {map: new OpenLayers.Map("map", options)});

2009年12月13日日曜日

OpenLayers 40f WMC - OpenLayers で Map Context を試す3 地図の表示のテスト1 Merge

wmc.html のコードを単純にして、地図を表示するためにいろいろ試してみました。
HTMLファイル全体のコードを次のようにしました。

openlayers40_wmc2.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers40 WMC 2</title>
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- OpenLayers ライブラリ -->
<script src="./lib/Firebug/firebug.js"></script>
<script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
<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>

<!-- WMC のコード -->

<script type="text/javascript">
// no pink please
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
var map, options; // 修正

function init() {
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);

// ここまで

// 出力した Map Context にマップファイルのディレクトリを追加して保存
var url = "./tokyo_map_context_ol.xml";
// tokyo_map_context_ol.xml をファイルを読み込み
OpenLayers.loadURL(url, null, null, loadSuccess);

} End of functin init()

// 読み込みが成功したときの処理
function loadSuccess(request){
var wmc_doc = request.responseText;
// map.destroy();
// map = format.read(wmc_doc, {map: new OpenLayers.Map("map", options)});
map = format.read(wmc_doc, {map: map});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
map.zoomToMaxExtent();
}

</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Tokyo Map Context</h1>
<div id="map" class="smallmap"></div>
</body>
</html>

wmc.html の「read and merge」のボタンをクリックしたとき、次のコードが実行されます。

map = format.read(wmc_doc, {map: map});

動作は、元の地図上に Map Context で設定された地図が合併(merge)されます。
この単純なコードの openlayers40_wmc2.html ファイルでも Map Context に設定された地図(だけ)表示されます。



次回は、New Map の動作

2009年12月12日土曜日

OpenLayers 40e WMC - OpenLayers で Map Context を試す2 地図の表示

「read as new map」ボタンをクリックするとタイルの区切りだけ表示されます。
(次のコードで画像が表示されないときのタイルは透明になります。
OpenLayers.Util.onImageLoadErrorColor = "transparent";)
レイヤ自体は設定できているようです。



再読み込みして「write」ボタン、「read and merge」ボタンの順にクリックします。
元の地図の上にタイルの区切りだけ表示されます。
レイヤ自体は設定できているようです。



MapServer と OpenLayers の Map Context を比較すると、OpenLayers の方の <OnlineResource> の xlink:href のリンクにマップファイルのディレクトリの指定がないので次のように修正しました。

height、kukaku レイヤ

<OnlineResource xlink:type="simple" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map"/>

gyoseikai レイヤ

<OnlineResource xlink:type="simple" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map"/>


再び、「read as new map」ボタンをクリックすると地図が表示されます。
しかし、拡大された地図が表示されます。



再読み込みして「write」ボタン、「read and merge」ボタンの順にクリックします。
地図が表示されます。

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 新しいアカウントでは、5枚以上アップロードする。
2 2、3日後正確なタグで検索する。

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

1 画像個別のウィンドウの Additional Infomation の2項目めが
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

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

2008年9月13日土曜日

OpenLayers 9cFeature Info 地図の表示

Eclipse を起動して examples フォルダ内の getfeatureinfo.html をコピーして getfeatureinfo_kanagawamlit.html ファイルを作成します。
0 getfeatureinfo.htmlをダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をgetfeatureinfo_kanagawamlit.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をFeature Info Kanagawa mlit Mapにします。
5 getfeatureinfo.html の内容ををコピーしてgetfeatureinfo_kanagawamlit.html ファイルに貼り付けます。
6 javascriptの一部を次のように修正します。
style.cssとOpenLayers.jsのパスを変えます。
gyoseikai(行政界)レイヤとpublic_facilities(公共施設)レイヤを設定します。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenLayers Feature Info Kanagawa mlit Example</title>
<script src="./lib/OpenLayers.js"></script>
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<style type="text/css">
ul, li { padding-left: 0px; margin-left: 0px; }

</style>
</head>
<body>
<h1 id="title">Feature Info Kanagawa mlit Map</h1>

<div id="tags"></div>

<p id="shortdesc">
Demonstrates sending a GetFeatureInfo query to an OWS. Returns information about a map feature in the side DIV.
</p>

<a id="permalink" href="">Permalink</a><br />

<!-- 結果表示欄 -->
<div style="float:right;width:28%">
<h1 style="font-size:1.3em;">Kanagawa Public Facilities</h1>
<p style="font-size:.8em;">Click a country to see statistics about the country below.</p>
<div id="nodeList"></div>
</div>
<div id="map" style="width:512px; height:512px"></div>

<!--地図表示 -->
<script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
var map = new OpenLayers.Map('map' /*, {'maxResolution':'auto'}*/);

//行政界(郡市区町村界)レイヤ
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/kanagawa_mlit_pgis.map',
layers: 'gyoseikai',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
map.addLayer(layer);

//公共施設レイヤ
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/kanagawa_mlit_pgis.map',
layers: 'public_facilities',
transparent: true,
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
map.addLayer(wms);
map.setCenter(new OpenLayers.LonLat(139.375, 35.4), 10);
map.addControl(new OpenLayers.Control.Permalink('permalink'));

map.events.register('click', map, function (e) {
OpenLayers.Util.getElement('nodeList').innerHTML = "Loading... please wait...";
var url = wms.getFullRequestString({
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: wms.map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: wms.params.LAYERS,
WIDTH: wms.map.size.w,
HEIGHT: wms.map.size.h});
OpenLayers.loadURL(url, '', this, setHTML);
OpenLayers.Event.stop(e);
});
function setHTML(response) {
OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText;
}
</script>

<div id="docs"></div>
</body>
</html>


クリックでイベントが発生したときに、その時の地図の範囲、クリックした位置、マップサーバーからの情報のフォーマット、レイヤのパラメータ(属性)、地図の縦横の長さを受け取ります。
このデータから該当するパラメータが表示されます。

2008年9月9日火曜日

OpenLayers 8c国土数値地図でWFSを試す

Eclipse を起動して examples フォルダ内の wfs.html をコピーして wfs_kanagawamlit.html ファイルを作成します。
0 wfs.htmlをダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をwfs_kanagawamlit.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をWFS Kanagawa mlit Mapにします。
5 wfs.html の内容ををコピーしてwfs_kanagawamlit.html ファイルに貼り付けます。
6 javascriptの一部を次のように修正します。
style.cssとOpenLayers.jsのパスを変えます。

---
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
---
<script src="./lib/OpenLayers.js"></script>
---
<script type="text/javascript">
var map, layer, layer2;

function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "Kanagawa mlit Gyoseikai WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/kanagawa_mlit_shp.map',
layers: 'gyoseikai',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);

layer2 = new OpenLayers.Layer.WFS( "Public Facilities Kanagawa WFS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/kanagawa_mlit_shp.map',
typename: "public_facilities",
maxfeatures: 10
},
{
featureClass: OpenLayers.Feature.WFS,
projection: 'EPSG:2451'
}
);
map.addLayer(layer2);
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(139.375, 35.4), 10);
}
</script>
---

maxFeatures パラメータは features(この場合は点)の数を制限します。

featureClass: OpenLayers.Feature.WFS は、古いタイプのマーカが作成されます。
この行を削除したら新しいマーカになります。ベージュの円ベクトルです。

7 example フォルダの proxy.cgi を開いて次のように allowedHosts に
'localhost', '127.0.0.1' を追加します。

---
allowedHosts = ['www.openlayers.org', 'openlayers.org',
'labs.metacarta.com', 'world.freemap.in',
'prototype.openmnnd.org', 'geo.openplans.org',
'www.openstreetmap.org', 'localhost', '127.0.0.1' ]
---

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

8 Webブラウザのアドレスバーに次のように入力して Enterキーを押します。
(HTMLエディタのデフォルトタブでは表示されません。)

http://localhost/openlayers/OpenLayersproj/wfs_kanagawamlit.html







画像が表示されないときは、次のように、WMSとWFSのリクエストをしてみてください。

WMS
http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/kanagawa_mlit_shp.map&request=GetMap&service=WMS&version=1.1.1&srs=EPSG:2451&format=image/png&bbox=138.91,35.12,139.84, 35.68&width=500&height=500&layers=gyoseikai

WFS
http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/kanagawa_mlit_shp.map&service=WFS&version=1.0.0&request=GetCapabilities

レイヤに対するWFS
http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/kanagawa_mlit_shp.map&service=WFS&version=1.0.0&request=GetFeature&typename=public_facilities

2008年9月3日水曜日

OpenLayers 4kamap_sampleで試す

kamap_sample.htmlをみてみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>kamap sample</title>

<!-- 基本のデザインを設定しています -->
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />

<!-- 地図のデザインを設定しています -->
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>

<!-- OpenLayersライブラリの読み込み -->
<script src="lib/OpenLayers.js"></script>

<!-- 地図の表示スクリプト -->
<script type="text/javascript">
var map; //宣言
function init(){ //ウィンドウを読み込んだときに実行される関数
map = new OpenLayers.Map('map'); //ページに地図を埋め込む

var gw_ka = new OpenLayers.Layer.KaMap("Global Weather",
"http://localhost/ka-map/tile.php", {g: "countries", map: "weather"});
/* ka-Mapの地図を埋め込みます。
*()の中は、("このレイヤの名前","tile.phpの場所",{g:"マップファイルのGROUP名", map:"ka-Mapの地図名"});
*/
map.addLayer(gw_ka); //地図にレイヤを追加
map.addControl(new OpenLayers.Control.LayerSwitcher()); //地図右上にある+、レイヤ切り替え
map.zoomToMaxExtent(); //
}
</script>
</head>
<body onload="init()">
<!-- init()関数の読み込み -->

<h1 id="title">KaMap Example</h1>

<div id="tags"></div>

<!-- 地図表示の場所 -->
<div id="map"></div>

<div id="docs"></div>
</body>
</html>

2008年7月15日火曜日

国土数値地図で東京を表示 3地図の表示

最初に、マップデータN03-071001_13の情報を知るために管理ツールをインストールします。
Synapticパッケージマネージャでgdal-binを検索してインストールします。
mapdataフォルダへ移動しtokyoフォルダ内の利用可能なレイヤ名を表示します。

~/mapdata$ ogrinfo tokyo
INFO: Open of `tokyo'
using driver `ESRI Shapefile' successful.
1: N03-071001_13 (Polygon)

次に、N03-071001_13レイヤのデータを表示します。

~/mapdata$ ogrinfo -summary tokyo N03-071001_13
INFO: Open of `tokyo'
using driver `ESRI Shapefile' successful.

Layer name: N03-071001_13
Geometry: Polygon
Feature Count: 3299
Extent: (136.069482, 20.425119) - (153.986900, 35.898424)
Layer SRS WKT:
(unknown)
TODOFUKEN: String (8.0)
SHICHO: String (8.0)
GUN_SEIREI: String (10.0)
SHIKUCHOSO: String (14.0)
CODE: String (5.0)

このレイヤは、Geometry: Polygonからポリゴンデータであることが分かります。
また、Extent: (136.069482, 20.425119) - (153.986900, 35.898424)は座標で緯度経度を表し、レイヤの範囲が分かります。

これをもとに、マップファイルを作成します。

MAP
 NAME tokyo_shp_map #任意の名前
 STATUS ON
 SIZE 600 300
 EXTENT 136.069482 20.425119 153.986900 35.898424 #ogrinfoで得た情報から
 UNITS DD
 IMAGECOLOR 255 255 255
 IMAGETYPE png

 WEB
  IMAGEPATH "/home/nob61/ka-map/htdocs/tmp/kacache/"
  IMAGEURL "/ka-map/tmp/kacache/"
 END

 LEGEND
  TRANSPARENT TRUE
 END

 SCALEBAR
  TRANSPARENT TRUE
 END

 LAYER
  NAME gyoseikai #任意の名前
  TYPE POLYGON #ogrinfoで得た情報から
  STATUS ON
  DATA "../mapdata/tokyo/N03-071001_13.shp" #シェイプファイルの相対位置
  CLASS
   NAME "City Boundaries" #任意の名前
   STYLE
    OUTLINECOLOR 153 153 153 #面の外周の色(灰色)
   END
  END
 END
END #MAP END

shp2imgで地図を確認します。(2008-7-15現在 セグメンテーション違反で画像が生成できません。)

~/mapfile$shp2img -m tokyo_shp.map -o tokyo_shp.png

画像ビューワで確認すると、範囲が広すぎるのが分かります。
(ウィンドウを開くとアイコンがプレビューで表示されます。)
今回は、諸島部分を除いた範囲にします。

---
EXTENT 138.85 35.4 140 35.975
---

全体は次の様になります。

MAP
 NAME tokyo_shp_map
 STATUS ON
 SIZE 600 300
 EXTENT 138.85 35.4 140 35.975 #変更
 UNITS DD
 IMAGECOLOR 255 255 255
 IMAGETYPE png

 WEB
  IMAGEPATH "/home/nob61/ka-map/htdocs/tmp/kacache/"
  IMAGEURL "/ka-map/tmp/kacache/"
 END

 LEGEND
  TRANSPARENT TRUE
 END

 SCALEBAR
  TRANSPARENT TRUE
 END

 LAYER
  NAME gyoseikai
  TYPE POLYGON
  STATUS ON
  DATA "../mapdata/tokyo/N03-071001_13.shp"
  CLASS
   NAME "City Boundaries"
   STYLE
    OUTLINECOLOR 153 153 153
   END
  END
 END
END


shp2imgで地図を確認します。(2008-7-15現在 セグメンテーション違反で画像が生成できません。)


~/mapfile$shp2img -m tokyo_shp.map -o tokyo_shp.png

ka-Mapのconfig.phpに次のように追加します。

---
$aszWeather = array (
'title' => 'Global Weather',
'path' => '/home/nob61/ka-map/htdocs/global.map',
'scales' => array( 100000000, 50000000, 15000000 ),
'format' =>'PNG'
);

//ここを追加
$aszTokyo = array (
'title' => 'Tokyo',
'path' => '/home/nob61/mapfile/tokyo_shp.map',
'scales' => array( 500000, 250000, 100000 ),
'format' =>'PNG'
);

$aszMapFiles = array( /* 'gmap' => $aszGMap */
'weather' => $aszWeather, //カンマを
'tokyo' => $aszTokyo //ここを追加
/* Add more elements to this array to offer multiple mapfiles */

);
---

ka-Mapを表示して、tokyoを選択します。