OpenLayersで地図表示

OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayersで
地図表示
鍋太郎@NSEG

自己紹介
プログラマー✓
Debian系翻訳者✓
http://about.me/nabetaro✓

今日のお題
JSでWebブラウザに地図を出す
OpenLayers✓
http://openlayers.org/✓
✓
ほんのさわりだけ

OpenLayers
各種地図を扱える
Google Map✓
Bing Map✓
OpenStreetMap✓
ArcGIS✓
他✓
✓

OpenLayers
二条項BSDライセンス✓
最新安定版は 2.13.1✓
現在、3系を開発中✓

用語
longitude (経度) x軸✓
latitude (緯度) y軸✓
projection (投影)
EPSG:4326✓
EPSG:900913✓
✓

今回のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
…略…
</head>
<body onload="init();">
<div id="map_canvas"></div>
</body>
</html>

地図の生成
OpenLayers.Map オブジェクト
を生成
✓
DOMに割り当てる
今回はidがmap_canvasのdiv要素✓
✓
map = new OpenLayers.Map("map_canvas");

OpenStreetMapを表示
レイヤーを生成して
OpenLayers.Map オブジェクト
に追加
✓
map.addLayer(new OpenLayers.Layer.OSM());

OpenStreetMapを表示

表示の中心を指定
OpenLayers.LonLat オブジェ
クトで点を生成
✓
setCenterメソッドで中心を指
定
✓

カスタマイズ
OpenLayers.Mapの第2引数や
map.addLayersメソッドで
✓
OpenLayers.Control.Navigation :DnDで操作
OpenLayers.Control.Attribution :権利表示
OpenLayers.Control.LayerSwitcher :レイヤ切り替え表示
OpenLayers.Control.PanZoomBar :パンパネル・ズームバー表示
などなど

利用できるレイヤー
地図サービス
OpenLayers.Layer.OSM✓
OpenLayers.Layer.Bing✓
OpenLayers.Layer.Google✓
OpenLayers.Layer.Google.v3✓
✓

利用できるレイヤー
OpenLayers.Layer.Boxes
矩形描画✓
✓
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
……

テキストファイルに指定する列✓
point マーカーの位置「経度,緯度」の形
lat マーカー位置の緯度
lon マーカー位置の経度
icon または image マーカー画像のURL
iconSize アイコンサイズ
iconOffset マーカーの左上の点のオフセット
title クリック時のポップアップに表示するタイトル
description クリック時のポップアップに表示する文字 (テキストかHTML)

ファイルを読み込むレイヤーを
生成
✓
var pois = new OpenLayers.Layer.Text(
"レイヤー名", {
location:"ファイル名",
});
map.addLayer(pois);

ここまででできること

ここに置いておきますね
触ってみてくださいまし
http://www.caldron.jp/~nabetaro/openlayers_sample/openlayers_sample.html

もっと
公式サンプルあります✓
http://openlayers.org/dev/examples/

まとめ
HTML上に地図を表示するJSラ
イブラリ
✓
各種地図を重ねて表示できる✓
お手軽にマーカーも表示できる✓
もっとOpenStreetMapを活用
しよう! (ｱﾚ?
✓

OpenLayersで地図表示

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

More from Nozomu KURASAWA

More from Nozomu KURASAWA (16)

OpenLayersで地図表示