OpenLayers3 概略 †
- http://openlayers.org/en/v3.1.1/doc/tutorials/introduction.htm
- OpenLayers3 は 2 を全面的に書き換えた
- 当面 OpenLayers? 2 と同等の機能の実装が目的
- 将来リリースで 3D map や WebGL による高速レタリングを予定
- ソフトウェアの基盤は Google's Closure Tools
- アプリ作る人は Closure Tools を意識しなくていいよ 公開API をたたけばよろしい
- 公開APIは、ol オブジェクトの function。ol.layer, ol.animation, ol.view, ol.renderer, ...
- API Docs http://openlayers.org/ → API Doc
- 描画方法は３つ
| raster image | vector image |
| DOM renderer | ○ | × |
| Canvas renderer | ○ | ○ |
| WebGL renderer | ○ | × |
- 測地系は EPSG:3857
- 平面地図上の地点を示すデータ扱いやすい。Spherical Mercator
- GoogleMap? や OpenStreetMap? の測地系。昔、非公式に EPSG:900913 (googlз) と呼ばれていたもの
- (E,N) で表す。
- 正距円筒図法で実物大の地球を平面に投影した2次元地図を作ったと仮定する
- (E,N) はその地図上の地点 Easting、Northing。単位はメートル
- 球面上の地点を示すデータでよくつかわれる EPSG:4326 (＝WGS84 ≒JGD2000) 形式のデータは EPSG:3857 に変換して OpenLayers3 に渡す
- EPSG:4329 は、球上の位置を (緯度, 経度) で表す
- 変換
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
EPSG:4326 形式の (x,y)=(37.41, 8.82) "東経37.41度、北緯8.82度" を EPSG:3857 形式に変換して、View の中心座標として設定する
実行環境 †
- http://openlayers.org/ から、v3.8.2-dist.zip をダウンロードする
- ol.js, ol-debug.js, ol.css を js/ css/ に配置する
- ol.js はリリース時に使う。圧縮 (改行やスペースの削除、変数名の省略) がされている。 → デバック時に何が何やら
- ol-debug.js は開発時に使う。元のソースコード → デバック時に人間が分かる形で表示される
QuickStart? †
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 01 Quick Start</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body>
</html>
.map {
width: 100%;
background-color: ghostwhite;
border: 1px gray;
}
.full-map {
width: 100%;
height: 100%;
position:fixed
}
.ol-full-screen {
position: fixed;
top: 10px;
right: 50px;
}
.ol-mouse-position {
top: 10px;
right: 100px;
font-size: 13px;
color: white;
background-color: rgba(0,60,136,0.5);
padding: 2px 10px;
border-radius: 5px;
}
- ol.Map に <div id="map"><div> を関連付ける
- ol.Map のコンストラクタで、target、layers、view などの属性を設定する → 何を指定できるかは GIS OpenLayers3 Cheat Sheet にまとめた
- 座標の指定の仕方が (経度,緯度) であることに注意
- 人間は 北緯21度25分、東経39度49分 という言い方をする。英語でも 21°25′0″N, 39°49′0″E
- 地理空間情報を扱うAPIでは、概ね (経度,緯度) の並びになる
Windowサイズに追随して地図の大きさを変える †
- OpenLayer2 のときには、「[GIS OpenLayers2 最大化]」みたいなことをしなきゃいけなかった
- OpenLayer3 では、map が格納されている div の大きさが変わると勝手に追随する。 → 特に何もやらなくていいv
Mapにコンポーネントを追加する †
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 02 Components</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
}),
// Create Interaction (extends default)
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
// Create Control (extends default)
controls: ol.control.defaults().extend([new ol.control.FullScreen()])
});
</script>
</body>
</html>
- GIS OpenLayers3 Cheat Sheet にも有るように ol.Map の interactions と controls には、デフォルト値 ol.interaction.defaults()、ol.control.defaults() が設定されている
- 通常は、デフォルトの動作＋αを実現したいので ol.interaction.defaults()、ol.control.defaults() を拡張したものを ol.Map に設定する
- 一旦、暗黙のデフォルトを設定しておいて、後でコントロールを足しても同じことができる
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
map.addInteraction(new ol.interaction.DragRotateAndZoom());
map.addControl(new ol.control.FullScreen());
- 通常の動作を止めたければ、ol.interaction.defaults()、ol.control.defaults() を拡張せずに、いちから Array を作っても良い
- DragRotateAndZoom? は、Shift+Mouse で地図を回転させる
- FullScreen? は、フルスクリーン表示 (⇔アイコン)
※この記事では地図を iframe で表示しているのでこれ以上大きくならない。試す場合は → http://hondou.homedns.org/OL3Exam/02_Components.html で直接ブラウザに表示して
Map に DOM を表示する †
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 03 Overlay</title>
</head>
<body>
<div id="map" class="map"></div>
<div id="overlay" style="background-color:white; border: 1px solid black; padding: 5px 10px;">Makkah</div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var makkah = ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857');
var overlay = new ol.Overlay({
element: document.getElementById('overlay'),
position: makkah,
positioning: 'bottom-center'
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: makkah,
zoom: 4
}),
// Create Interaction (extends default)
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
// Create Control (extends default)
controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
// Add Overlay
overlays : [overlay]
});
</script>
</body>
</html>
GIS
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
ol3.png
od3-download.png
