OpenLayersで地図表示
Upcoming SlideShare
Loading in...5
×
 

OpenLayersで地図表示

on

  • 543 views

NSEG#53で話した際のスライドです。

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

Statistics

Views

Total Views
543
Views on SlideShare
462
Embed Views
81

Actions

Likes
2
Downloads
1
Comments
0

1 Embed 81

https://twitter.com 81

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

OpenLayersで地図表示 OpenLayersで地図表示 Presentation Transcript

  • 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" /> …略… </head> <body onload="init();"> <div id="map_canvas"></div> </body> </html>
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 地図の生成 OpenLayers.Map オブジェクト を生成 ✓ DOMに割り当てる 今回はidがmap_canvasのdiv要素✓ ✓ map = new OpenLayers.Map("map_canvas");
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenStreetMapを表示 レイヤーを生成して OpenLayers.Map オブジェクト に追加 ✓ map.addLayer(new OpenLayers.Layer.OSM());
  • 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 :DnDで操作 OpenLayers.Control.Attribution :権利表示 OpenLayers.Control.LayerSwitcher :レイヤ切り替え表示 OpenLayers.Control.PanZoomBar :パンパネル・ズームバー表示 などなど
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 利用できるレイヤー 地図サービス OpenLayers.Layer.OSM✓ OpenLayers.Layer.Bing✓ OpenLayers.Layer.Google✓ OpenLayers.Layer.Google.v3✓ ✓
  • 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 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 ……
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text テキストファイルに指定する列✓ point マーカーの位置「経度,緯度」の形 lat マーカー位置の緯度 lon マーカー位置の経度 icon または image マーカー画像のURL iconSize アイコンサイズ iconOffset マーカーの左上の点のオフセット title クリック時のポップアップに表示するタイトル description クリック時のポップアップに表示する文字 (テキストかHTML)
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text ファイルを読み込むレイヤーを 生成 ✓ var pois = new OpenLayers.Layer.Text( "レイヤー名", { location:"ファイル名", }); map.addLayer(pois);
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 ここまででできること
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 ここに置いておきますね 触ってみてくださいまし http://www.caldron.jp/~nabetaro/openlayers_sample/openlayers_sample.html
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 もっと 公式サンプルあります✓ http://openlayers.org/dev/examples/
  • OpenLayersで地図表示 Powered by Rabbit 2.1.2 まとめ HTML上に地図を表示するJSラ イブラリ ✓ 各種地図を重ねて表示できる✓ お手軽にマーカーも表示できる✓ もっとOpenStreetMapを活用 しよう! (アレ? ✓