Your SlideShare is downloading. ×
電子国土Part2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

電子国土Part2

1,774
views

Published on

Part2です。 …

Part2です。
初心者向きで考えると難しくなったので、コピペベースになってます。
電子国土Webってこんな風にカスタマイズできるんだ〜とわかってもらえればOK!!

Published in: Education

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,774
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 電子国土Webを使ってコピペでWebGISを作る   〜OpenLayers編〜   Part2
  • 2. 電子国土Webとは? 前回の復習 WebGISを使って情報を発信しようとすると・・・   ・GISソフトウェアや背景となる地図の準備が必要   それを解 ・GISソフトの購入や地図データの維持管理に費用がかかる 決! あなたが発信する情報と国土地理院が発信する背景地図   を重ねて表示できる!
  • 3. 電子国土WebのPoint! 前回の復習 電子国土を背景地図にした、自作のWebGISが簡単に構築できる 電子国土を使っている例(国土地理院)   h5p://psgsv.gsi.go.jp/koukyou/G-­‐award/list_award1.html  
  • 4. そもそもWebはどのように動いているの?
  • 5. インターネットとWeb 概要:1990年代前半、インターネットが商用化され、インターネットの代表的なアプリケーションである電子メールをWWW(World  Wide  Web)が爆発的に普及した。 つまり、個々のPCがネットワークでつながり合うことにより、   「自分の情報を公開できる」⇒もっている“地図情報”を公開できる!
  • 6. Webの種類 Webの機能を3つの機能に大別できる  v  読む・・・テキストを読ませる  v  見る・・・写真や映像など見せる  v  使う・・・検索や予約など操作を伴う   使う 見る 見る 読む 読む
  • 7. WebGISではどうなる? WebGISの機能を3つの機能に大別すると・・・   v  読む・・・テキストを読ませる   v  見る・・・地図を見せる   v  使う・・・地図の検索や操作させる            使う   使う       見る 読む     歴史的農業環境閲覧システム   h5p://habs.dc.affrc.go.jp/habs_map.html?zoom=13&lat=35.68428&lon=139.75339&layers=B0  
  • 8. どうやって動いている? これらのWebページの裏側ではHTMLという技術が使われている   Webページ HTML
  • 9. どうやって作る? 人がPCが理解できる言語に変換する HTMLをブラウザと呼ばれる   アプリケーションを使って読み込む 読み込む端末 読み込むアプリ   (ブラウザ) Webブラウザ =知識・ノウハウ   HTML =標準技術 ※HTML以外にもCSSやJavaScript,PHP,DBなどの Web技術のノウハウも必要になってくる。このあ たりの技術は村尾先生の授業にて
  • 10. 電子国土Web.NEXTで使われている技術
  • 11. 電子国土はFOSS4G(オープンソース) オープンソースとは、言葉とおりに言えばソフトウェアのソースが公開されているもの。   詳しくは   h5p://www.opensource.jp/osd/osd-­‐japanese.html を参照   電子国土は、   ・OpenLayers   ・PostgreSQL/PostGIS   ・Proj4.js   などのオープンソースが使われている。 →ソースが公開されているということは、同じようなWebGISを構築することができ、  さらにソースが共有されていることにより、様々な機能を自分用にカスタマイズできる。 OpenStreetMapもOpenLayersの技術が使われている。   OpenLayersが使われている例:h5p://openlayers.org/dev/examples/  
  • 12. OpenLayersの基本機能から
  • 13. 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をテキストエディターで開いてみる。
  • 14. 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&amp;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>  
  • 15. ベースマップ切り替えのタブがでてくる  
  • 16. 電子国土に実装できる様々な機能を知る
  • 17. 電子国土ポータルにあるサンプル集を使う  まずは、電子国土ポータルにあるサンプル集を使うことで、WebGISとは何かを知ろう! OpenLayersサンプル集(電子国土ポータルより)   h5p://portal.cyberjapan.jp/portalsite/sample/index2.html  
  • 18. 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ダブルクリック
  • 19. 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ダブルクリック
  • 20. Chap4.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"  onclick="changeScale(4)"  value="ズームレベル 4"  /></td></tr>    <tr><td><input  type="bu5on"  onclick="changeScale(8)"  value="ズームレベル 8"  /></td></tr>    <tr><td><input  type="bu5on"  onclick="changeScale(13)"  value="ズームレベル 13"  /></td></tr>   </table> 奈良大学の場所を指定するために赤字のように変更して、上書き保存。 </head>   <body  onload="init();">   <div  id="map"  name="map"  style="width:500px;height:500px;"></div>   <!-­‐-­‐  これより下に追加 -­‐-­‐>   <table>    <tr><td><input  type="bu5on"  onclick="changeScale(0)"  value="ズームレベル 0"  /></td></tr>    <tr><td><input  type="bu5on"  onclick="changeScale(4)"  value="ズームレベル 4"  /></td></tr>    <tr><td><input  type="bu5on"  onclick="changeScale(8)"  value="ズームレベル 8"  /></td></tr>    <tr><td><input  type="bu5on"  onclick="changeScale(13)"  value="ズームレベル 13"  /></ td></tr>   </table>   <!-­‐-­‐  これより上に追加 -­‐-­‐>   </body>   </html>   このようなボタンが出れば成功! ⇒再度、Internet  Explorerで再度Chap3.htmlダブルクリック
  • 21. 応用編:あとは難しいので、ファイルをみて確認していきましょう!
  • 22. 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;   }
  • 23. 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  +  秒);  
  • 24. Chap7.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マスターへの道は真似るところから
  • 25. 最難関:先週作成したKML教材を電子国土に載せる
  • 26. Chap8.html 例えば、以前作成したアフリカのKMLを載せた例  
  • 27. 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          })        })      }    );
  • 28. 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          })        })      }    );
  • 29. Chap8.html 読み込むKMLを同じフォルだ内にいれる  Chap8.htmlとnara.kmlが同じフォルダの中にはいっていることを確認する!
  • 30. Chap8.html 最後にchap.htmlを開く   表示されればOK!!! ダブルクリック! さらに自分で経緯度やズームレベルを設定してみよう!
  • 31. このスライドに出てくるHTMLファイルは   以下よりダウンロード可能   h5p://www.kenyat-­‐geo.org/digitaljapan.zip   資料に誤りがあれば、ご指摘ください。