OpenLayers3のイベント †
OpenLayers3 のほぼすべてのオブジェクトは ol.Obserbable を継承している。→ イベントを貼り付けることが可能
ol.Observable http://openlayers.org/en/v3.8.1/apidoc/ol.Observable.html
Returns Method Summary/Args goog.events.Key on(type, listener, opt_this) イベントリスナを設定する type イベントタイプ(種類は後述) listener イベント発行時に起動される function() opt_this (省略可) listener 内で使われる this goog.events.Key once(type, listener, opt_this) 一回しか実行されないイベントリスナを設定する type イベントタイプ(種類は後述) listener イベント発行時に起動される function() opt_this (省略可) listener 内で使われる this un(type, listener, opt_this) イベントリスナを解除する type イベントタイプ(種類は後述) listener イベント発行時に起動される function() opt_this (省略可) listener 内で使われる this unByKey? (key) イベントリスナを解除する key on(), once() の返り値
イベントタイプ
ol.Object と ol.Object を継承したクラスには、それぞれ固有のイベントを発行 (Fire) する
どんなイベントを発行するかは API Doc の 「Fires:」を参照する
ol.Object http://openlayers.org/en/v3.8.1/apidoc/ol.Object.html?stableonly=true
propertychange (ol.ObjectEvent? ) - Triggered when a property is changed.
ol.Map http://openlayers.org/en/v3.8.1/apidoc/ol.Map.html?stableonly=true
change:layerGroup (ol.ObjectEvent? )
change:size (ol.ObjectEvent? )
change:target (ol.ObjectEvent? )
change:view (ol.ObjectEvent? )
click (ol.MapBrowserEvent? ) - A click with no dragging. A double click will fire two of this.
dblclick (ol.MapBrowserEvent? ) - A true double click, with no dragging.
moveend (ol.MapEvent? ) - Triggered after the map is moved.
pointermove (ol.MapBrowserEvent? ) - Triggered when a pointer is moved. Note that on touch devices this is triggered when the map is panned, so is not the same as mousemove.
propertychange (ol.ObjectEvent? ) - Triggered when a property is changed.
singleclick (ol.MapBrowserEvent? ) - A true single click with no dragging and no double click. Note that this event is delayed by 250 ms to ensure that it is not a double click.
他は API Doc 参照 (まぁ使わんと思うけど...) サンプル †
Your borwser is not supporting object tag. Please use one of the latest browsers./OL3Exam/04_Event.html
マウスクリック・イベントで、クリックした位置に座標が表示される
<!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 04 Event</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]
});
map.on('click', function(event) {
// event is ol.MapBrowserEvent
// see http://openlayers.org/en/v3.8.1/apidoc/ol.Map.html -> Fires -> click
// see http://openlayers.org/en/v3.8.1/apidoc/ol.MapBrowserEvent.html
var coord = event.coordinate;
var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
var hdms = ol.coordinate.toStringHDMS(degrees);
var element = overlay.getElement();
element.innerHTML = hdms;
overlay.setPosition(coord);
// map.addOverlay(overlay);
});
</script>
</body>
</html>ol.Object の KVS (Key-Value Observable) は 3.5.0 で廃止 †
3.4.x までは、2つの ol.Object 同士でプロパティを自動同期する仕組み (bindTo()) が有った
ol.Map のプロパティ (例えばレイヤの表示・非表示) と、外部の Checkbox の状態を双方向で同期したりできた
3.5.0 で廃止 https://github.com/openlayers/ol3/releases/tag/v3.5.0
双方向バインディングをサポートするのに 16KB のコードをメンテする必要がある
でも普通のアプリで、双方向バインディング要らんだろ
16KB のコードを取り除くのもそれはそれで大変だけど、これを機に後顧の憂いを断つ
3.5.0 からは、片方向でやれ
ol.Map でレイヤの表示非表示が変わった → propertychange イベントが発行されるので、そのイベントリスナで Checkbox を変えろ
Checkbox が変わった → DOM の change イベントが発行されるので、そのイベントリスナで ol.Map を変更しろ GIS
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
