c8985b9906
Any event target can be used to dispatch generic goog.events.Event instances with an arbitrary type. In cases where we dispatch custom events, we should not use type values that collide with those used for generic events (at least internally). This allows listeners a better chance of knowing what kind of argument they will receive. As subsequent change will clean up the enumeration and add a bit more consistency.
49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
goog.require('ol.DeviceOrientation');
|
|
goog.require('ol.Map');
|
|
goog.require('ol.RendererHints');
|
|
goog.require('ol.View2D');
|
|
goog.require('ol.dom.Input');
|
|
goog.require('ol.layer.Tile');
|
|
goog.require('ol.source.OSM');
|
|
|
|
var map = new ol.Map({
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.OSM()
|
|
})
|
|
],
|
|
renderers: ol.RendererHints.createFromQueryData(),
|
|
target: 'map',
|
|
view: new ol.View2D({
|
|
center: [0, 0],
|
|
zoom: 2
|
|
})
|
|
});
|
|
var view = map.getView();
|
|
|
|
var deviceOrientation = new ol.DeviceOrientation();
|
|
var track = new ol.dom.Input(document.getElementById('track'));
|
|
track.bindTo('checked', deviceOrientation, 'tracking');
|
|
|
|
deviceOrientation.on('propertychange', function(event) {
|
|
// event.key is the changed property name
|
|
var key = event.key;
|
|
var element = document.getElementById(key);
|
|
if (element) {
|
|
element.innerHTML = deviceOrientation.get(key);
|
|
}
|
|
});
|
|
|
|
// tilt the map
|
|
deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
|
|
var center = view.getCenter();
|
|
var resolution = view.getResolution();
|
|
var beta = event.target.getBeta() || 0;
|
|
var gamma = event.target.getGamma() || 0;
|
|
|
|
center[0] -= resolution * gamma * 25;
|
|
center[1] += resolution * beta * 25;
|
|
|
|
view.setCenter(center);
|
|
});
|