OpenLayersで地図表示
Report
Nozomu KURASAWAFollow
Aug. 1, 2014•0 likes•4,299 views
3 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
OpenLayersで地図表示
Aug. 1, 2014•0 likes•4,299 views
3 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Internet
NSEG#53で話した際のスライドです。 OpenLayersについてのさわりだけ。
Nozomu KURASAWAFollow
OpenLayersで地図表示
- 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を活用 しよう! (ｱﾚ? ✓