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.
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で地図表示

3,344 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を活用 しよう! (アレ? ✓

×