Download presentation
Presentation is loading. Please wait.
1
情報基礎 空間情報の利用 講義の資料は下記のＵＲＬを参照．
情報基礎 空間情報の利用 講義の資料は下記のＵＲＬを参照．
2
空間情報とは z (x, y, z) x ・実世界＝4次元の空間
・その空間の中に存在するすべてのもの（人，動物，地物）は何らかの情報を持っている。 ・すべてに共通する情報は位置 情報。 y z：標高（高さ） Ｔ : 時間 y：経度 x：緯度
3
空間情報を可視化するツール GPS（Global Positioning System）
GIS（Geographic Information System ：地理情報システム） 国土地理院パンフレットより （株）パスコHPより
4
空間情報（地理空間情報） 空間上の特定の地点又は区域の位置を示す情報。位置情報ともいう。 これらの情報に関連付けられた情報。
平成19年5月に「地理空間情報活用推進基本法」が施行された。 →空間情報の活用が促進される。
5
空間情報の利用例 ©SANYO カーナビ インターネット 地図サービス 携帯電話 位置情報取得 ©Acer
6
地図情報サービス Googleマップ Bingマップ Yahoo!マップ Mapion etc.
インターネット情報で、地図情報やルートの検索が行えるサービス。多くのサービスで地図データや検索機能を実装できるAPI（Application Programming Interface）を提供している。 Googleマップ Bingマップ Yahoo!マップ Mapion etc.
7
Googleマップ Googleの地図を用いた検索サービス
8
Yahoo!地図情報
9
地図を用いた検索サービス
10
Googleマップ ストリートビュー
11
Googleマップ マイマップ
12
Googleマップの欠点 場所によってはデータが少ない 情報の更新頻度 ライセンスに制約があり， 自由に複製や改変が行えない。（印刷も含め）
自由に複製や改変が行えない。（印刷も含め） 商用目的には使用できない。 （誰でもアクセスできるサイトでは使用OK） アクセス数が多いサイトには課金
13
OpenStreetMap（OSM） 2004年にイギリスでスタートした地図版Wikiプロジェクト Free and Open な地図
GPS端末や衛星・空中写真によりデータを追加 Yahoo! Japanが地図資産を提供 （2011年3月） Yahoo! JapanロコでOSMを採用 マイクロソフトからBingの地図（写真地図） ライセンスはODbL 1.0（Open Database License）
14
震災前後 仙台市 相馬市
15
Google Map APIをつかった 地図情報の表示と活用
16
API (Application Programming Interface)
APIとは、一般的には、OSの機能を利用するための関数のこと。または、ソフトウェアからOSの機能を利用するための仕様やインターフェイスのこと。 IT用語辞典バイナリ APIライブラリ Webページ
17
Maps JavaScript API をクリック
Googleマップ APIを使用した地図サイトを作成 Ver. 3 を使用し様々な機能を実装する。 Maps JavaScript API をクリック
18
サンプルコードをテキストエディタにコピーする。
19
コードの編集 オーストラリアのニューサウスウェールズ州のシドニーを中心とした地図が表示される。
<script type="text/javascript" src=" </script> 携帯端末のセンサ（GPSや電子コンパス等）の情報を、 Googleマップで使用するかどうかを設定。ここでは sensor=trueとする。 オーストラリアのニューサウスウェールズ州のシドニーを中心とした地図が表示される。
20
緯度経度（日本）、スケール、デフォルトマップの変更
コードの編集 <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(35.5, 135.6); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID, }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:800px; height:600px"></div> 緯度経度（日本）、スケール、デフォルトマップの変更
21
地図の切り替えの 表示位置を変更 function initialize() {
var latlng = new google.maps.LatLng(35.5, 135.6); var myOptions = { zoom: 8, disableDefaultUI:True, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER } }; 地図の切り替えの 表示位置を変更
23
Zoomの表示位置を変更 …. mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER } , zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_TOP } }; Zoomの表示位置を変更
24
縮尺の追加 …. mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER } , scaleControl: true, } }; 縮尺の追加
25
交通情報レイヤの追加 }, scaleControl: true, } };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var trafficLayer = new google.maps.TrafficLayer(); trafficLayer.setMap(map); 交通情報レイヤの追加
27
マーカーの追加
28
var map = new google.maps.Map(document.getElementById("map_canvas"),
…… var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Osaka</h1>'+ '<div id="bodyContent">'+ '<p><a href=" City</a></p>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map, title: 'Osaka City' google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);
29
Change map size, add more markers and explanation
…. </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:700px; height:600px"></div> <h1>Add Explanation about your Map</h1> </body> </html> Change map size, add more markers and explanation
30
今日やること どこか特定の場所に マーカーを立て、 吹きだしにその場所の 説明を追加する。
マーカーを立て、 吹きだしにその場所の 説明を追加する。 自分のpublic_htmlにファイルを置いて、そのGoogleマップをホームページとして表示する。 URLをメールに貼り付けて提出する。 件名は「情報基礎0713_学籍番号」とする。
Similar presentations
