1 | goog.require('ol.DeviceOrientation');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.View');
|
4 | goog.require('ol.control');
|
5 | goog.require('ol.layer.Tile');
|
6 | goog.require('ol.proj');
|
7 | goog.require('ol.source.OSM');
|
8 |
|
9 | var projection = ol.proj.get('EPSG:3857');
|
10 | var view = new ol.View({
|
11 | center: [0, 0],
|
12 | projection: projection,
|
13 | extent: projection.getExtent(),
|
14 | zoom: 2
|
15 | });
|
16 | var map = new ol.Map({
|
17 | layers: [
|
18 | new ol.layer.Tile({
|
19 | source: new ol.source.OSM()
|
20 | })
|
21 | ],
|
22 | target: 'map',
|
23 | controls: ol.control.defaults({
|
24 | attributionOptions: ({
|
25 | collapsible: false
|
26 | })
|
27 | }),
|
28 | view: view
|
29 | });
|
30 |
|
31 | var deviceOrientation = new ol.DeviceOrientation();
|
32 |
|
33 | function el(id) {
|
34 | return document.getElementById(id);
|
35 | }
|
36 |
|
37 | el('track').addEventListener('change', function() {
|
38 | deviceOrientation.setTracking(this.checked);
|
39 | });
|
40 |
|
41 | deviceOrientation.on('change', function() {
|
42 | el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]';
|
43 | el('beta').innerText = deviceOrientation.getBeta() + ' [rad]';
|
44 | el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]';
|
45 | el('heading').innerText = deviceOrientation.getHeading() + ' [rad]';
|
46 | });
|
47 |
|
48 |
|
49 | deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
|
50 | var center = view.getCenter();
|
51 | var resolution = view.getResolution();
|
52 | var beta = event.target.getBeta() || 0;
|
53 | var gamma = event.target.getGamma() || 0;
|
54 |
|
55 | center[0] -= resolution * gamma * 25;
|
56 | center[1] += resolution * beta * 25;
|
57 |
|
58 | view.setCenter(view.constrainCenter(center));
|
59 | });
|