電子国土Part2

電子国土Webを使ってコピペでWebGISを作る

〜OpenLayers編〜

Part２

電子国土Webとは？
前回の復習

WebGISを使って情報を発信しようとすると・・・

・GISソフトウェアや背景となる地図の準備が必要
それを解
・GISソフトの購入や地図データの維持管理に費用がかかる
決！

あなたが発信する情報と国土地理院が発信する背景地図

を重ねて表示できる！

電子国土WebのPoint！
前回の復習

電子国土を背景地図にした、自作のWebGISが簡単に構築できる

電子国土を使っている例（国土地理院）

h5p://psgsv.gsi.go.jp/koukyou/G-‐award/list_award1.html

そもそもWebはどのように動いているの？

インターネットとWeb
概要：１９９０年代前半、インターネットが商用化され、インターネットの代表的なアプ
リケーションである電子メールをWWW（World
Wide
Web）が爆発的に普及した。

つまり、個々のPCがネットワークでつながり合うことにより、

「自分の情報を公開できる」⇒もっている“地図情報”を公開できる！

Webの種類
Webの機能を３つの機能に大別できる

v  読む・・・テキストを読ませる

v  見る・・・写真や映像など見せる

v  使う・・・検索や予約など操作を伴う

使う

見る

見る
読む

読む

WebGISではどうなる？
WebGISの機能を３つの機能に大別すると・・・

v  読む・・・テキストを読ませる

v  見る・・・地図を見せる

v  使う・・・地図の検索や操作させる

　
　
　
　
　
使う
　
使う
　
　
　見る
読む
　
　

歴史的農業環境閲覧システム

h5p://habs.dc.aﬀrc.go.jp/habs_map.html?zoom=13&lat=35.68428&lon=139.75339&layers=B0

どうやって動いている？
これらのWebページの裏側ではHTMLという技術が使われている

Webページ

HTML

どうやって作る？
人がPCが理解できる言語に変換する
HTMLをブラウザと呼ばれる

アプリケーションを使って読み込む
読み込む端末

読み込むアプリ

（ブラウザ）

Webブラウザ
＝知識・ノウハウ

HTML
＝標準技術
※HTML以外にもCSSやJavaScript,PHP,DBなどの
Web技術のノウハウも必要になってくる。このあ
たりの技術は村尾先生の授業にて

電子国土Web.NEXTで使われている技術

電子国土はFOSS4G（オープンソース）
オープンソースとは、言葉とおりに言えばソフトウェアのソースが公開されているもの。

詳しくは

h5p://www.opensource.jp/osd/osd-‐japanese.html　を参照

電子国土は、

・OpenLayers

・PostgreSQL/PostGIS

・Proj4.js

などのオープンソースが使われている。

→ソースが公開されているということは、同じようなWebGISを構築することができ、

さらにソースが共有されていることにより、様々な機能を自分用にカスタマイズできる。

OpenStreetMapもOpenLayersの技術が使われている。

OpenLayersが使われている例：h5p://openlayers.org/dev/examples/

OpenLayersの基本機能から

Chap1.html

HTMLファイルを確認してみる。
OpenLayersは基本的にHTMLとJavaScriptで構成されている。
<html>

<meta
h5p-‐equiv="Content-‐Type"
content="text/html;
charset=uh-‐8"
/>

<head>

<itle>20130116_地理情報システムⅡ</itle>

<script
src="h5p://www.openlayers.org/api/OpenLayers.js"></script>

<script>

funcion
init()
{

var
map;

map
=
new
OpenLayers.Map("canvas");

var
mapink
=
new
OpenLayers.Layer.OSM();
map.addLayer(mapink);

//地図の中心に奈良大学を設定 

var
lonLat
=
new
OpenLayers.LonLat(135.783162,34.71516).transform(
new
OpenLayers.Projecion("EPSG:4326"),

new
OpenLayers.Projecion("EPSG:900913"));

map.setCenter(lonLat,
15);

}

</script>

</head>

<body
onload="init();">

<div
id="canvas">mapArea</div>
<br
/>

</body>

</html>

テキストファイルに記述するだけでOpenLayersの表示が可能。

>>Chapter1.htmlをテキストエディターで開いてみる。

Chap2.html
他の地図に切り替えてみる

<html>

<meta
h5p-‐equiv="Content-‐Type"
content="text/html;
charset=uh-‐8"
/>

<head>

<itle>20130116_地理情報システムⅡ</itle>

GoogleMapsに切り替えることもできる
<script
src="h5p://www.openlayers.org/api/OpenLayers.js"></script>

<script
src="h5p://maps.google.com/maps/api/js?v=3&sensor=false"></script>

<script>

funcion
init()
{

var
map;

←ここでは地図の選択ツールを呼び出す処理をしている

map
=
new
OpenLayers.Map("canvas");

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

var
mapink
=
new
OpenLayers.Layer.OSM();

map.addLayer(mapink);

var
gsat
=
new
OpenLayers.Layer.Google("Google
Satellite",
{

type
:
google.maps.MapTypeId.SATELLITE,

numZoomLevel
:
15

})

map.addLayer(gsat);

var
ghyb
=
new
OpenLayers.Layer.Google("Google
Hybrid",
{

type
:
google.maps.MapTypeId.HYBRID,

numZoomLevels
:
22,

visibility
:
false

})

map.addLayer(ghyb);

//地図の中心に奈良大学を設定

var
lonLat
=
new
OpenLayers.LonLat(135.783162,34.71516).transform(
new

OpenLayers.Projecion("EPSG:4326"),

new
OpenLayers.Projecion("EPSG:900913"));

map.setCenter(lonLat,
15);

}

</script>

</head>

<body
onload="init();">

<div
id="canvas">mapArea</div>

<br
/>

</body>

</html>

ベースマップ切り替えのタブがでてくる

電子国土に実装できる様々な機能を知る

電子国土ポータルにあるサンプル集を使う

まずは、電子国土ポータルにあるサンプル集を使うことで、WebGISとは何かを知ろう！

OpenLayersサンプル集（電子国土ポータルより）

h5p://portal.cyberjapan.jp/portalsite/sample/index2.html

Chap3.html

経度・緯度・ズームレベルを指定して表示する

Chap3.htmlをテキストエディターで開いて以下の部分を探そう！
//初期の経度
var
initCX
=
138.7313889;

//初期の緯度
var
initCY
=
35.3622222;

//初期のズームレベル
//※ここで設定するズームレベルはデータセットの最小ズームレベルが0になる
//※デフォルトデータセットでは「ズームレベル0」が0になる
var
initZoomLv
=
15;

奈良大学の場所（10進経緯度）

34.714772,135.782948

奈良大学の場所を指定するために赤字のように変更して、上書き保存。
//初期の経度
var
initCX
=
135.782948;

//初期の緯度
var
initCY
=
34.714772;

//初期のズームレベル
//※ここで設定するズームレベルはデータセットの最小ズームレベルが0になる
//※デフォルトデータセットでは「ズームレベル0」が0になる
var
initZoomLv
=
15;

⇒再度、Internet
Explorerで再度Chap3.htmlダブルクリック

Chap４.html

ズームレベルを変更する
わからなかったら

chap.4.htmlを開く

Chap3.htmlをテキストエディターで開いて以下の部分を探そう！
</script>

</head>

<body
onload="init();">

<div
id="map"
name="map"
style="width:500px;height:500px;"></div>

<!-‐-‐
これより下に追加 -‐-‐>

<!-‐-‐
これより上に追加 -‐-‐>

</body>

</html>

<table>

<tr><td><input
type="bu5on"
onclick="changeScale(0)"
value="ズームレベル 0"
/></td></tr>

<tr><td><input
type="bu5on"
/></td></tr>

<tr><td><input
type="bu5on"
/></td></tr>

<tr><td><input
type="bu5on"
/></td></tr>

</table>
奈良大学の場所を指定するために赤字のように変更して、上書き保存。
</head>

<body
onload="init();">

<div
id="map"
name="map"
style="width:500px;height:500px;"></div>

<!-‐-‐
これより下に追加 -‐-‐>

<table>

<tr><td><input
type="bu5on"
/></td></tr>

<tr><td><input
type="bu5on"
/></td></tr>

<tr><td><input
type="bu5on"
/></td></tr>

<tr><td><input
type="bu5on"
/></
td></tr>

</table>

<!-‐-‐
これより上に追加 -‐-‐>

</body>

</html>
このようなボタンが出れば成功！
⇒再度、Internet
Explorerで再度Chap3.htmlダブルクリック

応用編：あとは難しいので、ファイルをみて確認していきましょう！

Chap5.html

距離・面積計測モードを使用する

Chap3.htmlと比較してみよう！

こういうコマンドが追加されている。
//
計測コントロールを作成
measureControls
=
{

//
距離計測

line:
new
OpenLayers.Control.Measure(

OpenLayers.Handler.Path,
{

persist:
true,

handlerOpions:
{

layerOpions:
{styleMap:
styleMap}

}

}

),

//
面積計測

polygon:
new
OpenLayers.Control.Measure(

OpenLayers.Handler.Polygon,
{

persist:
true,

handlerOpions:
{

layerOpions:
{styleMap:
styleMap}

}

}

)

};

//
計測コントロールに各種設定を行い、mapに追加
var
control;

for(var
key
in
measureControls)
{

control
=
measureControls[key];

//投影により切り替える
control.geodesic
=
true;

//クリックで確定する前にも計測結果を表示し続ける
control.setImmediate(true);

//
イベントを追加
control.events.on({

"measure":
handleMeasurements,

"measureparial":
handleMeasurements

});

map.addControl(control);

}

//
計測して、計測結果を書き出す
funcion
handleMeasurements(event)
{

var
measure
=
event.measure;

//
計測結果
var
units
=
event.units;

//
単位
var
order
=
event.order;

var
element
=
window.document

.getElementById('output');

var
out
=
"";

if(order
==
1)
{

//
距離
out
+=
measure.toFixed(3)
+
"
"
+
units;

}
else
{

//
面積
out
+=
measure.toFixed(3)
+
"
"
+
units

+
"<sup>2</sup>";

}

element.innerHTML
=
out;

}

Chap6.html
地図画面中心の座標(経度・緯度)を表示する

GISに初期設定があるように

OpenLayersにも地図の初期設定を指定できる。

←これがあるところまでが

OpenLayersの初期設定のコマンド

↓こいつを初期表示設定のところに追加
//
Mapにmoveイベントを登録し、初期表示のためにイベント起動
map.events.register('move',
map,
handleMapMove);

map.events.triggerEvent('move');

Mapにmoveイベントを登録し、地図画面の内容が変更（移動、拡大・
縮小）される毎に、指定した命令を実行するように設定できる。

地図の中心を求めるのは初期設定であ
る必要がないので、その下に追加
//
moveイベント
funcion
handleMapMove()
{

//
地図の中心を取得
var
center
=
map.getCenter();

//
地図座標に変換
center.transform(projecion900913,
projecion4326);

//
「度、分、秒」に変換
var
lon
=
ToLatLonString(center.lon);

var
lat
=
ToLatLonString(center.lat);

document.sample.boxLon.value
=
lon;

document.sample.boxLat.value
=
lat;

}

//
「度」単位から「度、分、秒」の文字列に変換
funcion
ToLatLonString(value){

var
degree
=
parseInt(value);

var
minute
=
parseInt((value-‐degree)*60);

var
secondRest
=
(value-‐degree-‐(minute/60))*3600;

var
second
=
(Math.round(secondRest));

if(second
==
60){

second
=
0;

minute
=
minute
+
1;

}

if(minute
==
60){

minute
=
0;

degree
=
degree
+
1;

}

経緯度表示が追加される！

var
str
=
(degree
+
'度'

+
minute
+
'分'

+
second
+
'秒');

Chap７.html
クリックした場所の座標を計測する

以下のコマンドで追加機能される。

//
座標計測モードに切り替え
funcion
set_mode(){

//
イベントが登録済みか調べる

var
listeners=map.events.listeners['click'];

if(listeners!=null){

for(var
i=0,len=listeners.length;i<len;i++){

if(listeners[i].obj
==
map
&&
listeners[i].func
==
handleMapClick){

//
登録済み

return;

}

}

}

//
Mapにクリックイベントを登録

map.events.register('click',
map,
handleMapClick);

}

//
座標計測モード終了
funcion
end_mode(){

//
Mapからクリックイベントを削除

map.events.unregister('click',
map,
handleMapClick);

}

//
clickイベント
funcion
handleMapClick(evt)
{

//
クリック地点の座標を取得

var
lonlat
=
map.getLonLatFromViewPortPx(evt.xy);

//
地図座標に変換

lonlat.transform(projecion900913,
projecion4326);

//
「度、分、秒」に変換して表示

document.sample.boxLon.value
=
ToLatLonString(lonlat.lon);

document.sample.boxLat.value
=
ToLatLonString(lonlat.lat);

}

//
「度」単位から「度、分、秒」の文字列に変換
funcion
ToLatLonString(value){

var
degree
=
parseInt(value);

var
minute
=
parseInt((value-‐degree)*60);

var
secondRest
=
(value-‐degree-‐(minute/60))*3600;

var
second
=
(Math.round(secondRest));

if(second
==
60){

second
=
0;

minute
=
minute
+
1;

}

if(minute
==
60){

minute
=
0;

degree
=
degree
+
1;

}

var
str
=
(degree
+
'度'
+
minute
+
'分'
+
second
+
'秒');

return
str;

}

わからなくても良い！

まずは、コピペから機能を追加していこう！！

座標計測モードをクリック！
OpenLayersマスターへの道は真似るところから

最難関：先週作成したKML教材を電子国土に載せる

Chap8.html
例えば、以前作成したアフリカのKMLを載せた例

Chap8.html
テキストエディターでKMLを読み込む作業

①Chap8.htmlをテキストエディターで開き、以下の部分を探す。

//KMLからレイヤーを作成

var
kmlLayer
=
new
OpenLayers.Layer.Vector(

"KMLレイヤー",
{

projecion:
projecion4326,
//
KMLは緯度経度

strategies:
[new
OpenLayers.Strategy.Fixed()],

protocol:
new
OpenLayers.Protocol.HTTP({

url:
"./test.kml",
←この部分がKMLを読み込みをおこなっている

format:
new
OpenLayers.Format.KML({

extractStyles:
true,

extractA5ributes:
true,

maxDepth:
2

})

})

}

);

Chap8.html
読み込みたいKMLに変更したあと

②保存しているKMLの名前に変更して保存。（例えば、nara.kmlなら）

//KMLからレイヤーを作成

var
kmlLayer
=
new
OpenLayers.Layer.Vector(

"KMLレイヤー",
{

projecion:
projecion4326,
//
KMLは緯度経度

strategies:
[new
OpenLayers.Strategy.Fixed()],

protocol:
new
OpenLayers.Protocol.HTTP({

url:
"./nara.kml",
←この部分を保存しているKML名に変更

format:
new
OpenLayers.Format.KML({

extractStyles:
true,

extractA5ributes:
true,

maxDepth:
2

})

})

}

);

Chap8.html
読み込むKMLを同じフォルだ内にいれる

Chap8.htmlとnara.kmlが同じフォルダの中にはいっていることを確認する！

Chap8.html
最後にchap.htmlを開く

表示されればOK!!!
ダブルクリック！

さらに自分で経緯度やズームレベルを設定してみよう！

このスライドに出てくるHTMLファイルは

以下よりダウンロード可能

h5p://www.kenyat-‐geo.org/digitaljapan.zip

資料に誤りがあれば、ご指摘ください。

電子国土Part2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 電子国土Part2

Ähnlich wie 電子国土Part2 (20)

Mehr von Inoshachu, NPO

Mehr von Inoshachu, NPO (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

電子国土Part2