1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Geolocation');
|
3 | goog.require('ol.Map');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.control');
|
6 | goog.require('ol.geom.Point');
|
7 | goog.require('ol.layer.Tile');
|
8 | goog.require('ol.layer.Vector');
|
9 | goog.require('ol.source.OSM');
|
10 | goog.require('ol.source.Vector');
|
11 | goog.require('ol.style.Circle');
|
12 | goog.require('ol.style.Fill');
|
13 | goog.require('ol.style.Stroke');
|
14 | goog.require('ol.style.Style');
|
15 |
|
16 | var view = new ol.View({
|
17 | center: [0, 0],
|
18 | zoom: 2
|
19 | });
|
20 |
|
21 | var map = new ol.Map({
|
22 | layers: [
|
23 | new ol.layer.Tile({
|
24 | source: new ol.source.OSM()
|
25 | })
|
26 | ],
|
27 | target: 'map',
|
28 | controls: ol.control.defaults({
|
29 | attributionOptions: {
|
30 | collapsible: false
|
31 | }
|
32 | }),
|
33 | view: view
|
34 | });
|
35 |
|
36 | var geolocation = new ol.Geolocation({
|
37 | projection: view.getProjection()
|
38 | });
|
39 |
|
40 | function el(id) {
|
41 | return document.getElementById(id);
|
42 | }
|
43 |
|
44 | el('track').addEventListener('change', function() {
|
45 | geolocation.setTracking(this.checked);
|
46 | });
|
47 |
|
48 |
|
49 | geolocation.on('change', function() {
|
50 | el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
|
51 | el('altitude').innerText = geolocation.getAltitude() + ' [m]';
|
52 | el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
|
53 | el('heading').innerText = geolocation.getHeading() + ' [rad]';
|
54 | el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
|
55 | });
|
56 |
|
57 |
|
58 | geolocation.on('error', function(error) {
|
59 | var info = document.getElementById('info');
|
60 | info.innerHTML = error.message;
|
61 | info.style.display = '';
|
62 | });
|
63 |
|
64 | var accuracyFeature = new ol.Feature();
|
65 | geolocation.on('change:accuracyGeometry', function() {
|
66 | accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
|
67 | });
|
68 |
|
69 | var positionFeature = new ol.Feature();
|
70 | positionFeature.setStyle(new ol.style.Style({
|
71 | image: new ol.style.Circle({
|
72 | radius: 6,
|
73 | fill: new ol.style.Fill({
|
74 | color: '#3399CC'
|
75 | }),
|
76 | stroke: new ol.style.Stroke({
|
77 | color: '#fff',
|
78 | width: 2
|
79 | })
|
80 | })
|
81 | }));
|
82 |
|
83 | geolocation.on('change:position', function() {
|
84 | var coordinates = geolocation.getPosition();
|
85 | positionFeature.setGeometry(coordinates ?
|
86 | new ol.geom.Point(coordinates) : null);
|
87 | });
|
88 |
|
89 | new ol.layer.Vector({
|
90 | map: map,
|
91 | source: new ol.source.Vector({
|
92 | features: [accuracyFeature, positionFeature]
|
93 | })
|
94 | });
|