OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayersで
地図表示
鍋太郎@NSEG
OpenLayersで地図表示 Powered by Rabbit 2.1.2
自己紹介
プログラマー✓
Debian系翻訳者✓
http://about.me/nabetaro✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
今日のお題
JSでWebブラウザに地図を出す
OpenLayers✓
http://openlayers.org/✓
✓
ほんのさわりだけ
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers
各種地図を扱える
Google Map✓
Bing Map✓
OpenStreetMap✓
ArcGIS✓
他✓
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers
二条項BSDライセンス✓
最新安定版は 2.13.1✓
現在、3系を開発中✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
用語
longitude (経度) x軸✓
latitude (緯度) y軸✓
projection (投影)
EPSG:4326✓
EPSG:900913✓
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
今回のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
…略…
</hea...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
地図の生成
OpenLayers.Map オブジェクト
を生成
✓
DOMに割り当てる
今回はidがmap_canvasのdiv要素✓
✓
map = new Op...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenStreetMapを表示
レイヤーを生成して
OpenLayers.Map オブジェクト
に追加
✓
map.addLayer(new OpenLayers...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenStreetMapを表示
OpenLayersで地図表示 Powered by Rabbit 2.1.2
表示の中心を指定
OpenLayers.LonLat オブジェ
クトで点を生成
✓
setCenterメソッドで中心を指
定
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
カスタマイズ
OpenLayers.Mapの第2引数や
map.addLayersメソッドで
✓
OpenLayers.Control.Navigation :Dn...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
利用できるレイヤー
地図サービス
OpenLayers.Layer.OSM✓
OpenLayers.Layer.Bing✓
OpenLayers.Layer.Goo...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
利用できるレイヤー
OpenLayers.Layer.Boxes
矩形描画✓
✓
OpenLayers.Layer.Text
データをテキストファイルから読み
込み...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers.Layer.Text
タブ区切りテキストでデータを
指定してマーカー描画
✓
マーカーをクリックで名前や説
明を表示
✓
lat lon ti...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers.Layer.Text
テキストファイルに指定する列✓
point マーカーの位置「経度,緯度」の形
lat マーカー位置の緯度
lon マーカ...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers.Layer.Text
ファイルを読み込むレイヤーを
生成
✓
var pois = new OpenLayers.Layer.Text(
"レ...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
ここまででできること
OpenLayersで地図表示 Powered by Rabbit 2.1.2
ここに置いておきますね
触ってみてくださいまし
http://www.caldron.jp/~nabetaro/openlayers_sample/openlaye...
OpenLayersで地図表示 Powered by Rabbit 2.1.2
もっと
公式サンプルあります✓
http://openlayers.org/dev/examples/
OpenLayersで地図表示 Powered by Rabbit 2.1.2
まとめ
HTML上に地図を表示するJSラ
イブラリ
✓
各種地図を重ねて表示できる✓
お手軽にマーカーも表示できる✓
もっとOpenStreetMapを活用
しよう...
Upcoming SlideShare
Loading in …5
×

OpenLayersで地図表示

2,974 views

Published on

NSEG#53で話した際のスライドです。
OpenLayersについてのさわりだけ。

Published in: Internet
  • Be the first to comment

OpenLayersで地図表示

  1. 1. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayersで 地図表示 鍋太郎@NSEG
  2. 2. OpenLayersで地図表示 Powered by Rabbit 2.1.2 自己紹介 プログラマー✓ Debian系翻訳者✓ http://about.me/nabetaro✓
  3. 3. OpenLayersで地図表示 Powered by Rabbit 2.1.2 今日のお題 JSでWebブラウザに地図を出す OpenLayers✓ http://openlayers.org/✓ ✓ ほんのさわりだけ
  4. 4. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers 各種地図を扱える Google Map✓ Bing Map✓ OpenStreetMap✓ ArcGIS✓ 他✓ ✓
  5. 5. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers 二条項BSDライセンス✓ 最新安定版は 2.13.1✓ 現在、3系を開発中✓
  6. 6. OpenLayersで地図表示 Powered by Rabbit 2.1.2 用語 longitude (経度) x軸✓ latitude (緯度) y軸✓ projection (投影) EPSG:4326✓ EPSG:900913✓ ✓
  7. 7. OpenLayersで地図表示 Powered by Rabbit 2.1.2 今回のHTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> …略… </head> <body onload="init();"> <div id="map_canvas"></div> </body> </html>
  8. 8. OpenLayersで地図表示 Powered by Rabbit 2.1.2 地図の生成 OpenLayers.Map オブジェクト を生成 ✓ DOMに割り当てる 今回はidがmap_canvasのdiv要素✓ ✓ map = new OpenLayers.Map("map_canvas");
  9. 9. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenStreetMapを表示 レイヤーを生成して OpenLayers.Map オブジェクト に追加 ✓ map.addLayer(new OpenLayers.Layer.OSM());
  10. 10. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenStreetMapを表示
  11. 11. OpenLayersで地図表示 Powered by Rabbit 2.1.2 表示の中心を指定 OpenLayers.LonLat オブジェ クトで点を生成 ✓ setCenterメソッドで中心を指 定 ✓
  12. 12. OpenLayersで地図表示 Powered by Rabbit 2.1.2 カスタマイズ OpenLayers.Mapの第2引数や map.addLayersメソッドで ✓ OpenLayers.Control.Navigation :DnDで操作 OpenLayers.Control.Attribution :権利表示 OpenLayers.Control.LayerSwitcher :レイヤ切り替え表示 OpenLayers.Control.PanZoomBar :パンパネル・ズームバー表示 などなど
  13. 13. OpenLayersで地図表示 Powered by Rabbit 2.1.2 利用できるレイヤー 地図サービス OpenLayers.Layer.OSM✓ OpenLayers.Layer.Bing✓ OpenLayers.Layer.Google✓ OpenLayers.Layer.Google.v3✓ ✓
  14. 14. OpenLayersで地図表示 Powered by Rabbit 2.1.2 利用できるレイヤー OpenLayers.Layer.Boxes 矩形描画✓ ✓ OpenLayers.Layer.Text データをテキストファイルから読み 込み描画 ✓ ✓
  15. 15. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text タブ区切りテキストでデータを 指定してマーカー描画 ✓ マーカーをクリックで名前や説 明を表示 ✓ lat lon title description icon iconSize iconOffset 36.655929565 138.187515259 3号基 3号基 image/orange03.png 32,32 -16,-32 36.655368805 138.187473706 4号基 4号基 image/orange04.png 32,32 -16,-32 ……
  16. 16. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text テキストファイルに指定する列✓ point マーカーの位置「経度,緯度」の形 lat マーカー位置の緯度 lon マーカー位置の経度 icon または image マーカー画像のURL iconSize アイコンサイズ iconOffset マーカーの左上の点のオフセット title クリック時のポップアップに表示するタイトル description クリック時のポップアップに表示する文字 (テキストかHTML)
  17. 17. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text ファイルを読み込むレイヤーを 生成 ✓ var pois = new OpenLayers.Layer.Text( "レイヤー名", { location:"ファイル名", }); map.addLayer(pois);
  18. 18. OpenLayersで地図表示 Powered by Rabbit 2.1.2 ここまででできること
  19. 19. OpenLayersで地図表示 Powered by Rabbit 2.1.2 ここに置いておきますね 触ってみてくださいまし http://www.caldron.jp/~nabetaro/openlayers_sample/openlayers_sample.html
  20. 20. OpenLayersで地図表示 Powered by Rabbit 2.1.2 もっと 公式サンプルあります✓ http://openlayers.org/dev/examples/
  21. 21. OpenLayersで地図表示 Powered by Rabbit 2.1.2 まとめ HTML上に地図を表示するJSラ イブラリ ✓ 各種地図を重ねて表示できる✓ お手軽にマーカーも表示できる✓ もっとOpenStreetMapを活用 しよう! (アレ? ✓

×