Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

電子国土Part2

2,536 views

Published on

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

Published in: Education
  • Be the first to comment

電子国土Part2

  1. 1. 電子国土Webを使ってコピペでWebGISを作る   〜OpenLayers編〜   Part2
  2. 2. 電子国土Webとは? 前回の復習 WebGISを使って情報を発信しようとすると・・・   ・GISソフトウェアや背景となる地図の準備が必要   それを解 ・GISソフトの購入や地図データの維持管理に費用がかかる 決! あなたが発信する情報と国土地理院が発信する背景地図   を重ねて表示できる!
  3. 3. 電子国土WebのPoint! 前回の復習 電子国土を背景地図にした、自作のWebGISが簡単に構築できる 電子国土を使っている例(国土地理院)   h5p://psgsv.gsi.go.jp/koukyou/G-­‐award/list_award1.html  
  4. 4. そもそもWebはどのように動いているの?
  5. 5. インターネットとWeb 概要:1990年代前半、インターネットが商用化され、インターネットの代表的なアプリケーションである電子メールをWWW(World  Wide  Web)が爆発的に普及した。 つまり、個々のPCがネットワークでつながり合うことにより、   「自分の情報を公開できる」⇒もっている“地図情報”を公開できる!
  6. 6. Webの種類 Webの機能を3つの機能に大別できる  v  読む・・・テキストを読ませる  v  見る・・・写真や映像など見せる  v  使う・・・検索や予約など操作を伴う   使う 見る 見る 読む 読む
  7. 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. 8. どうやって動いている? これらのWebページの裏側ではHTMLという技術が使われている   Webページ HTML
  9. 9. どうやって作る? 人がPCが理解できる言語に変換する HTMLをブラウザと呼ばれる   アプリケーションを使って読み込む 読み込む端末 読み込むアプリ   (ブラウザ) Webブラウザ =知識・ノウハウ   HTML =標準技術 ※HTML以外にもCSSやJavaScript,PHP,DBなどの Web技術のノウハウも必要になってくる。このあ たりの技術は村尾先生の授業にて
  10. 10. 電子国土Web.NEXTで使われている技術
  11. 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. 12. OpenLayersの基本機能から
  13. 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. 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. 15. ベースマップ切り替えのタブがでてくる  
  16. 16. 電子国土に実装できる様々な機能を知る
  17. 17. 電子国土ポータルにあるサンプル集を使う  まずは、電子国土ポータルにあるサンプル集を使うことで、WebGISとは何かを知ろう! OpenLayersサンプル集(電子国土ポータルより)   h5p://portal.cyberjapan.jp/portalsite/sample/index2.html  
  18. 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. 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. 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. 21. 応用編:あとは難しいので、ファイルをみて確認していきましょう!
  22. 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. 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. 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. 25. 最難関:先週作成したKML教材を電子国土に載せる
  26. 26. Chap8.html 例えば、以前作成したアフリカのKMLを載せた例  
  27. 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. 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. 29. Chap8.html 読み込むKMLを同じフォルだ内にいれる  Chap8.htmlとnara.kmlが同じフォルダの中にはいっていることを確認する!
  30. 30. Chap8.html 最後にchap.htmlを開く   表示されればOK!!! ダブルクリック! さらに自分で経緯度やズームレベルを設定してみよう!
  31. 31. このスライドに出てくるHTMLファイルは   以下よりダウンロード可能   h5p://www.kenyat-­‐geo.org/digitaljapan.zip   資料に誤りがあれば、ご指摘ください。

×