@wemap/positioning 2.2.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/debug/arcore-absolute.html +16 -0
- package/package.json +1 -1
- package/src/PositioningHandler.js +45 -14
- package/src/PositioningHandler.spec.js +218 -0
- package/src/components/AbsoluteAttitudeComponent.jsx +2 -2
- package/src/components/ArCoreAbsoluteComponent.jsx +100 -0
- package/src/components/ArCoreComponent.jsx +3 -3
- package/src/components/GnssWifiPdrComponent.jsx +2 -2
- package/src/components/MapComponent.jsx +29 -18
- package/src/components/PdrComponent.jsx +3 -3
- package/src/components/PositioningPoseComponent.jsx +3 -3
- package/src/components/index.js +2 -0
- package/src/index.js +2 -1
- package/src/providers/Provider.js +2 -2
- package/src/providers/ProviderOptions.js +8 -2
- package/src/providers/attitude/AbsoluteAttitudeProvider.js +6 -6
- package/src/providers/others/MapMatchingProvider.js +19 -19
- package/src/providers/pose/ArCoreAbsoluteProvider.js +186 -0
- package/src/providers/pose/ArCoreProvider.js +31 -43
- package/src/providers/pose/GnssWifiPdrProvider.js +20 -20
- package/src/providers/pose/PoseProvider.js +1 -1
- package/src/providers/pose/pdr/PdrProvider.js +38 -38
- package/src/providers/pose/pdr/helpers/Smoother.js +33 -33
- package/src/providers/pose/pdr/helpers/Smoother.spec.js +7 -7
- package/src/providers/position/GnssWifiProvider.js +5 -5
- package/src/providers/position/IpProvider.js +2 -2
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
+
<title>Debug ARCore Absolute</title>
|
|
8
|
+
<script src="/js/positioning-components.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<div id="app"></div>
|
|
13
|
+
<script>createReactElement(ArCoreAbsoluteComponent, document.getElementById('app'));</script>
|
|
14
|
+
</body>
|
|
15
|
+
|
|
16
|
+
</html>
|
package/package.json
CHANGED
|
@@ -5,6 +5,9 @@ import PoseProvider from './providers/pose/PoseProvider';
|
|
|
5
5
|
import ProviderOptions from './providers/ProviderOptions';
|
|
6
6
|
import InclinationProvider from './providers/others/InclinationProvider';
|
|
7
7
|
import Logger from '@wemap/logger';
|
|
8
|
+
import ArCoreAbsoluteProvider from './providers/pose/ArCoreAbsoluteProvider';
|
|
9
|
+
import ArCoreProvider from './providers/pose/ArCoreProvider';
|
|
10
|
+
import GnssWifiProvider from './providers/position/GnssWifiProvider';
|
|
8
11
|
|
|
9
12
|
/**
|
|
10
13
|
* @private
|
|
@@ -31,9 +34,9 @@ class PositioningHandler {
|
|
|
31
34
|
*/
|
|
32
35
|
start(eventsType, onEvent, onError, options) {
|
|
33
36
|
|
|
34
|
-
this.options = Object.assign(ProviderOptions, options);
|
|
37
|
+
this.options = Object.assign({}, ProviderOptions, options);
|
|
35
38
|
|
|
36
|
-
const providerClass =
|
|
39
|
+
const providerClass = PositioningHandler.findProvider(eventsType, this.options);
|
|
37
40
|
|
|
38
41
|
if (!providerClass) {
|
|
39
42
|
throw new Error('No provider found');
|
|
@@ -49,23 +52,51 @@ class PositioningHandler {
|
|
|
49
52
|
/**
|
|
50
53
|
* @private
|
|
51
54
|
*/
|
|
52
|
-
findProvider(eventsType,
|
|
55
|
+
static findProvider(eventsType, _options) {
|
|
56
|
+
|
|
57
|
+
const options = Object.assign({}, ProviderOptions, _options);
|
|
58
|
+
const canUse = (provider, others = []) => {
|
|
59
|
+
return !options.ignoreProviders.includes(provider)
|
|
60
|
+
&& !others.some(elem => options.ignoreProviders.includes(elem))
|
|
61
|
+
&& provider.checkAvailabilityErrors().length === 0;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
if (eventsType.length === 1
|
|
65
|
+
&& eventsType.includes(EventType.Inclination)
|
|
66
|
+
&& InclinationProvider.checkAvailabilityErrors().length === 0) {
|
|
67
|
+
return InclinationProvider;
|
|
68
|
+
}
|
|
53
69
|
|
|
54
70
|
const wantPoseProvider = [EventType.AbsolutePosition, EventType.AbsoluteAttitude]
|
|
55
|
-
.every(elem => eventsType.includes(elem));
|
|
71
|
+
.every(elem => eventsType.includes(elem)) && eventsType.length === 2;
|
|
56
72
|
|
|
57
73
|
if (wantPoseProvider) {
|
|
58
|
-
|
|
74
|
+
|
|
75
|
+
if (options.waitInputPosition) {
|
|
76
|
+
if (canUse(ArCoreAbsoluteProvider, [ArCoreProvider])) {
|
|
77
|
+
return ArCoreAbsoluteProvider;
|
|
78
|
+
}
|
|
79
|
+
if (canUse(PdrProvider)) {
|
|
80
|
+
return PdrProvider;
|
|
81
|
+
}
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
if (canUse(GnssWifiPdrProvider, [PdrProvider])) {
|
|
86
|
+
return GnssWifiPdrProvider;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
if (canUse(PoseProvider)) {
|
|
59
91
|
return PoseProvider;
|
|
60
92
|
}
|
|
61
|
-
|
|
62
|
-
|
|
93
|
+
|
|
94
|
+
if (options.optionalEvents.includes(EventType.AbsoluteAttitude)
|
|
95
|
+
&& canUse(GnssWifiProvider)) {
|
|
96
|
+
return GnssWifiProvider;
|
|
63
97
|
}
|
|
64
|
-
return GnssWifiPdrProvider;
|
|
65
|
-
}
|
|
66
|
-
if (eventsType.includes(EventType.Inclination)) {
|
|
67
|
-
return InclinationProvider;
|
|
68
98
|
}
|
|
99
|
+
|
|
69
100
|
return null;
|
|
70
101
|
}
|
|
71
102
|
|
|
@@ -85,10 +116,10 @@ class PositioningHandler {
|
|
|
85
116
|
if (!provider) {
|
|
86
117
|
throw new Error('Unknown provider');
|
|
87
118
|
}
|
|
88
|
-
if (!provider.
|
|
89
|
-
Logger.warn('Cannot set
|
|
119
|
+
if (!provider.setPosition) {
|
|
120
|
+
Logger.warn('Cannot set position to ' + provider.constructor.name);
|
|
90
121
|
}
|
|
91
|
-
provider.
|
|
122
|
+
provider.setPosition(position);
|
|
92
123
|
}
|
|
93
124
|
|
|
94
125
|
/**
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
import chai from 'chai';
|
|
2
|
+
import 'jsdom-global/register';
|
|
3
|
+
|
|
4
|
+
import PositioningHandler from './PositioningHandler';
|
|
5
|
+
import EventType from './events/EventType';
|
|
6
|
+
import InclinationProvider from './providers/others/InclinationProvider';
|
|
7
|
+
import GnssWifiPdrProvider from './providers/pose/GnssWifiPdrProvider';
|
|
8
|
+
import PoseProvider from './providers/pose/PoseProvider';
|
|
9
|
+
import PdrProvider from './providers/pose/pdr/PdrProvider';
|
|
10
|
+
import ArCoreAbsoluteProvider from './providers/pose/ArCoreAbsoluteProvider';
|
|
11
|
+
import GnssWifiProvider from './providers/position/GnssWifiProvider';
|
|
12
|
+
import ArCoreProvider from './providers/pose/ArCoreProvider';
|
|
13
|
+
|
|
14
|
+
const expect = chai.expect;
|
|
15
|
+
|
|
16
|
+
function fakeUserAgent(userAgent) {
|
|
17
|
+
navigator.__defineGetter__('userAgent', () => userAgent);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function fakeNativeInterface(arcore = true) {
|
|
21
|
+
// We have to clear the cache here
|
|
22
|
+
ArCoreProvider._nativeProvider = null;
|
|
23
|
+
|
|
24
|
+
global.WemapProvidersAndroid = {getArCoreProvider: () => {
|
|
25
|
+
return { checkAvailability: () => arcore };
|
|
26
|
+
}};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function fakeGeolocation() {
|
|
30
|
+
navigator.__defineGetter__('geolocation', () => {
|
|
31
|
+
return {watchPosition: () => {}};
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function config(userAgent, nativeInterface = false, arcore = false) {
|
|
36
|
+
if (userAgent) {
|
|
37
|
+
fakeUserAgent(userAgent);
|
|
38
|
+
}
|
|
39
|
+
if (nativeInterface) {
|
|
40
|
+
fakeNativeInterface(arcore);
|
|
41
|
+
} else {
|
|
42
|
+
delete global.WemapProvidersAndroid;
|
|
43
|
+
}
|
|
44
|
+
fakeGeolocation();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const CHROME_ANDROID_USER_AGENT = 'Mozilla/5.0 (Linux; Android 9; SM-G960F Build/PPR1.180610.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.157 Mobile Safari/537.36';
|
|
48
|
+
|
|
49
|
+
const CHROME_DESKTOP_USER_AGENT = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36';
|
|
50
|
+
|
|
51
|
+
describe('PositioningHandler#findProvider', () => {
|
|
52
|
+
|
|
53
|
+
it('Inclination Desktop', () => {
|
|
54
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
55
|
+
const provider = PositioningHandler.findProvider([EventType.Inclination]);
|
|
56
|
+
expect(provider).to.be.null;
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it('Inclination Mobile', () => {
|
|
60
|
+
config(CHROME_ANDROID_USER_AGENT);
|
|
61
|
+
const provider = PositioningHandler.findProvider([EventType.Inclination]);
|
|
62
|
+
expect(provider).to.be.equals(InclinationProvider);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
it('Pose Desktop', () => {
|
|
66
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
67
|
+
const provider = PositioningHandler.findProvider([EventType.AbsolutePosition, EventType.AbsoluteAttitude]);
|
|
68
|
+
expect(provider).to.be.null;
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it('Pose without PDR Desktop', () => {
|
|
72
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
73
|
+
const provider = PositioningHandler.findProvider(
|
|
74
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
75
|
+
{ ignoreProviders: [PdrProvider] }
|
|
76
|
+
);
|
|
77
|
+
expect(provider).to.be.null;
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
it('Pose without ArCore Desktop', () => {
|
|
81
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
82
|
+
const provider = PositioningHandler.findProvider(
|
|
83
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
84
|
+
{ ignoreProviders: [ArCoreProvider] }
|
|
85
|
+
);
|
|
86
|
+
expect(provider).to.be.null;
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
it('Pose with optional attitude Desktop', () => {
|
|
90
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
91
|
+
const provider = PositioningHandler.findProvider([EventType.AbsolutePosition, EventType.AbsoluteAttitude]);
|
|
92
|
+
expect(provider).to.be.null;
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
it('Pose with optional attitude without PDR Desktop', () => {
|
|
96
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
97
|
+
const provider = PositioningHandler.findProvider(
|
|
98
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
99
|
+
{
|
|
100
|
+
ignoreProviders: [PdrProvider],
|
|
101
|
+
optionalEvents: [EventType.AbsoluteAttitude]
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
expect(provider).to.be.equals(GnssWifiProvider);
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
it('Pose with optional attitude without ArCore Desktop', () => {
|
|
108
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
109
|
+
const provider = PositioningHandler.findProvider(
|
|
110
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
111
|
+
{
|
|
112
|
+
ignoreProviders: [ArCoreProvider],
|
|
113
|
+
optionalEvents: [EventType.AbsoluteAttitude]
|
|
114
|
+
}
|
|
115
|
+
);
|
|
116
|
+
expect(provider).to.be.equals(GnssWifiProvider);
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
it('Pose with optional attitude without PDR and ArCore Desktop', () => {
|
|
120
|
+
config(CHROME_DESKTOP_USER_AGENT);
|
|
121
|
+
const provider = PositioningHandler.findProvider(
|
|
122
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
123
|
+
{
|
|
124
|
+
ignoreProviders: [PdrProvider, ArCoreProvider],
|
|
125
|
+
optionalEvents: [EventType.AbsoluteAttitude]
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
expect(provider).to.be.equals(GnssWifiProvider);
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
it('Pose Mobile Web', () => {
|
|
132
|
+
config(CHROME_ANDROID_USER_AGENT);
|
|
133
|
+
const provider = PositioningHandler.findProvider([EventType.AbsolutePosition, EventType.AbsoluteAttitude]);
|
|
134
|
+
expect(provider).to.be.equals(GnssWifiPdrProvider);
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
it('Pose without PDR Mobile Web', () => {
|
|
138
|
+
config(CHROME_ANDROID_USER_AGENT);
|
|
139
|
+
const provider = PositioningHandler.findProvider(
|
|
140
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
141
|
+
{ ignoreProviders: [PdrProvider] }
|
|
142
|
+
);
|
|
143
|
+
expect(provider).to.be.equals(PoseProvider);
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
it('Pose without ArCore Mobile Web', () => {
|
|
147
|
+
config(CHROME_ANDROID_USER_AGENT);
|
|
148
|
+
const provider = PositioningHandler.findProvider(
|
|
149
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
150
|
+
{ ignoreProviders: [ArCoreProvider] }
|
|
151
|
+
);
|
|
152
|
+
expect(provider).to.be.equals(GnssWifiPdrProvider);
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
it('Pose without PDR and ArCore Mobile Web', () => {
|
|
156
|
+
config(CHROME_ANDROID_USER_AGENT);
|
|
157
|
+
const provider = PositioningHandler.findProvider(
|
|
158
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
159
|
+
{ ignoreProviders: [PdrProvider, ArCoreProvider] }
|
|
160
|
+
);
|
|
161
|
+
expect(provider).to.be.equals(PoseProvider);
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
it('Pose with waitInputPosition Mobile Web', () => {
|
|
165
|
+
config(CHROME_ANDROID_USER_AGENT);
|
|
166
|
+
const provider = PositioningHandler.findProvider(
|
|
167
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
168
|
+
{ waitInputPosition: true }
|
|
169
|
+
);
|
|
170
|
+
expect(provider).to.be.equals(PdrProvider);
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
it('Pose with waitInputPosition Mobile Native with ArCore', () => {
|
|
174
|
+
config(CHROME_ANDROID_USER_AGENT, true, true);
|
|
175
|
+
const provider = PositioningHandler.findProvider(
|
|
176
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
177
|
+
{ waitInputPosition: true }
|
|
178
|
+
);
|
|
179
|
+
expect(provider).to.be.equals(ArCoreAbsoluteProvider);
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
it('Pose with waitInputPosition Mobile Native without ArCore', () => {
|
|
183
|
+
config(CHROME_ANDROID_USER_AGENT, true, false);
|
|
184
|
+
const provider = PositioningHandler.findProvider(
|
|
185
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
186
|
+
{
|
|
187
|
+
waitInputPosition: true,
|
|
188
|
+
ignoreProviders: [ArCoreProvider]
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
expect(provider).to.be.equals(PdrProvider);
|
|
192
|
+
});
|
|
193
|
+
|
|
194
|
+
it('Pose with waitInputPosition without PDR Mobile Web', () => {
|
|
195
|
+
config(CHROME_ANDROID_USER_AGENT, false);
|
|
196
|
+
const provider = PositioningHandler.findProvider(
|
|
197
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
198
|
+
{
|
|
199
|
+
waitInputPosition: true,
|
|
200
|
+
ignoreProviders: [PdrProvider]
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
expect(provider).to.be.null;
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
it('Pose with waitInputPosition without ArCore Mobile Native', () => {
|
|
207
|
+
config(CHROME_ANDROID_USER_AGENT, true, true);
|
|
208
|
+
const provider = PositioningHandler.findProvider(
|
|
209
|
+
[EventType.AbsolutePosition, EventType.AbsoluteAttitude],
|
|
210
|
+
{
|
|
211
|
+
waitInputPosition: true,
|
|
212
|
+
ignoreProviders: [ArCoreProvider]
|
|
213
|
+
}
|
|
214
|
+
);
|
|
215
|
+
expect(provider).to.be.equals(PdrProvider);
|
|
216
|
+
});
|
|
217
|
+
|
|
218
|
+
});
|
|
@@ -6,7 +6,7 @@ import AbsoluteAttitudeProvider from '../providers/attitude/AbsoluteAttitudeProv
|
|
|
6
6
|
import Utils from './Utils';
|
|
7
7
|
import EventType from '../events/EventType';
|
|
8
8
|
|
|
9
|
-
const
|
|
9
|
+
const userPosition = new WGS84(43.609275, 3.884236);
|
|
10
10
|
|
|
11
11
|
class AbsoluteAttitudeComponent extends React.Component {
|
|
12
12
|
|
|
@@ -20,7 +20,7 @@ class AbsoluteAttitudeComponent extends React.Component {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
this.absoluteAttitudeProvider = new AbsoluteAttitudeProvider(this.onEvent, this.onError);
|
|
23
|
-
this.absoluteAttitudeProvider.
|
|
23
|
+
this.absoluteAttitudeProvider.setPosition(userPosition);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
componentDidMount() {
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import isEmpty from 'lodash.isempty';
|
|
3
|
+
|
|
4
|
+
import EventType from '../events/EventType';
|
|
5
|
+
import Utils from './Utils';
|
|
6
|
+
import ArCoreAbsoluteProvider from '../providers/pose/ArCoreAbsoluteProvider';
|
|
7
|
+
import { deg2rad } from '@wemap/maths';
|
|
8
|
+
import {
|
|
9
|
+
WGS84UserPosition, Itinerary
|
|
10
|
+
} from '@wemap/geo';
|
|
11
|
+
import MapComponent from './MapComponent';
|
|
12
|
+
|
|
13
|
+
const INITIAL_POSITION = new WGS84UserPosition(43.6091955, 3.8841255);
|
|
14
|
+
const INITIAL_HEADING = 191.9;
|
|
15
|
+
const ITINERARY = Itinerary.fromPoints([
|
|
16
|
+
[INITIAL_POSITION.lat, INITIAL_POSITION.lng],
|
|
17
|
+
[43.6091883, 3.8841242],
|
|
18
|
+
[43.6091709, 3.8842382],
|
|
19
|
+
[43.6091288, 3.884226],
|
|
20
|
+
[43.6091461, 3.884112]
|
|
21
|
+
], false);
|
|
22
|
+
|
|
23
|
+
class ArCoreAbsoluteComponent extends React.Component {
|
|
24
|
+
|
|
25
|
+
constructor(props, context) {
|
|
26
|
+
super(props, context);
|
|
27
|
+
this.state = {
|
|
28
|
+
position: null,
|
|
29
|
+
attitude: null
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
this.arCoreAbsoluteProvider = new ArCoreAbsoluteProvider(this.onEvent, this.onError);
|
|
33
|
+
this.arCoreAbsoluteProvider.setPosition(INITIAL_POSITION);
|
|
34
|
+
this.arCoreAbsoluteProvider.setHeading(deg2rad(INITIAL_HEADING));
|
|
35
|
+
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
componentDidMount() {
|
|
39
|
+
this.arCoreAbsoluteProvider.start();
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
componentWillUnmount() {
|
|
43
|
+
this.arCoreAbsoluteProvider.stop();
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
onEvent = events => {
|
|
47
|
+
const newState = {};
|
|
48
|
+
events.forEach(event => {
|
|
49
|
+
if (event.dataType === EventType.AbsolutePosition) {
|
|
50
|
+
newState.position = event.data;
|
|
51
|
+
} else if (event.dataType === EventType.AbsoluteAttitude) {
|
|
52
|
+
newState.attitude = event.data;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
if (!isEmpty(newState)) {
|
|
56
|
+
this.setState(newState);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
if (this.map) {
|
|
60
|
+
this.map.parseEvents(events);
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
onError = events => {
|
|
65
|
+
const newState = {};
|
|
66
|
+
events.forEach(event => {
|
|
67
|
+
if (event.dataType === EventType.AbsolutePosition) {
|
|
68
|
+
newState.position = event.error;
|
|
69
|
+
} else if (event.dataType === EventType.AbsoluteAttitude) {
|
|
70
|
+
newState.attitude = event.error;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
if (!isEmpty(newState)) {
|
|
74
|
+
this.setState(newState);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
render() {
|
|
79
|
+
|
|
80
|
+
const attitudeRender = Utils.renderAttitude(this.state.attitude);
|
|
81
|
+
const positionRender = Utils.renderPosition(this.state.position);
|
|
82
|
+
|
|
83
|
+
return (
|
|
84
|
+
<div>
|
|
85
|
+
<h3>Position</h3>
|
|
86
|
+
{positionRender}
|
|
87
|
+
<h3>Attitude</h3>
|
|
88
|
+
{attitudeRender}
|
|
89
|
+
<h3>Map</h3>
|
|
90
|
+
<MapComponent
|
|
91
|
+
ref={map => (this.map = map)}
|
|
92
|
+
defaultZoom={21}
|
|
93
|
+
network={ITINERARY} />
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export default ArCoreAbsoluteComponent;
|
|
@@ -14,16 +14,16 @@ class ArCoreComponent extends React.Component {
|
|
|
14
14
|
attitude: null
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
-
this.
|
|
17
|
+
this.arCoreProvider = new ArCoreProvider(this.onEvent, this.onError);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
componentDidMount() {
|
|
22
|
-
this.
|
|
22
|
+
this.arCoreProvider.start();
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
componentWillUnmount() {
|
|
26
|
-
this.
|
|
26
|
+
this.arCoreProvider.stop();
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
onEvent = events => {
|
|
@@ -10,9 +10,9 @@ import EventType from '../events/EventType';
|
|
|
10
10
|
import GnssWifiPdrProvider from '../providers/pose/GnssWifiPdrProvider';
|
|
11
11
|
import MapComponent from './MapComponent';
|
|
12
12
|
|
|
13
|
-
const
|
|
13
|
+
const INITIAL_POSITION = new WGS84UserPosition(43.6091955, 3.8841255);
|
|
14
14
|
const ITINERARY = Itinerary.fromPoints([
|
|
15
|
-
[
|
|
15
|
+
[INITIAL_POSITION.lat, INITIAL_POSITION.lng],
|
|
16
16
|
[43.6091883, 3.8841242],
|
|
17
17
|
[43.6091709, 3.8842382],
|
|
18
18
|
[43.6091288, 3.884226],
|
|
@@ -25,7 +25,7 @@ const COMPASS_STYLE = {
|
|
|
25
25
|
'opacity': 0.5
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
const
|
|
28
|
+
const POSITION_STYLE = {
|
|
29
29
|
'width': '15px',
|
|
30
30
|
'height': '15px',
|
|
31
31
|
'top': '-7px',
|
|
@@ -38,14 +38,19 @@ const LOCATION_STYLE = {
|
|
|
38
38
|
|
|
39
39
|
class MapComponent extends React.Component {
|
|
40
40
|
|
|
41
|
-
static propTypes = {
|
|
41
|
+
static propTypes = {
|
|
42
|
+
network: PropTypes.instanceOf(Network),
|
|
43
|
+
defaultZoom: PropTypes.number
|
|
44
|
+
};
|
|
42
45
|
|
|
46
|
+
static defaultProps = {defaultZoom: 19};
|
|
43
47
|
|
|
44
48
|
componentDidMount() {
|
|
45
49
|
this.map = new mapboxgl.Map({
|
|
46
50
|
container: this.mapContainer,
|
|
47
51
|
style: 'mapbox://styles/mapbox/streets-v9'
|
|
48
52
|
});
|
|
53
|
+
this.renderNetwork();
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
componentWillUnmount() {
|
|
@@ -67,28 +72,28 @@ class MapComponent extends React.Component {
|
|
|
67
72
|
return marker;
|
|
68
73
|
}
|
|
69
74
|
|
|
70
|
-
|
|
75
|
+
createPositionMarker(position) {
|
|
71
76
|
const coreIcon = document.createElement('div');
|
|
72
|
-
this.applyStyleToDomElement(coreIcon,
|
|
77
|
+
this.applyStyleToDomElement(coreIcon, POSITION_STYLE);
|
|
73
78
|
|
|
74
|
-
this.
|
|
75
|
-
this.
|
|
79
|
+
this.positionIcon = document.createElement('div');
|
|
80
|
+
this.positionIcon.appendChild(coreIcon);
|
|
76
81
|
|
|
77
82
|
return this.createMarker({
|
|
78
|
-
dom: this.
|
|
83
|
+
dom: this.positionIcon,
|
|
79
84
|
iconAnchor: [0, 0],
|
|
80
|
-
latitude:
|
|
81
|
-
longitude:
|
|
85
|
+
latitude: position[1],
|
|
86
|
+
longitude: position[0]
|
|
82
87
|
});
|
|
83
88
|
}
|
|
84
89
|
|
|
85
90
|
createCompassElement() {
|
|
86
|
-
if (!this.
|
|
87
|
-
throw new Error('
|
|
91
|
+
if (!this.positionIcon) {
|
|
92
|
+
throw new Error('createPositionMarker() should be called before');
|
|
88
93
|
}
|
|
89
94
|
this.compassIcon = document.createElement('div');
|
|
90
95
|
this.applyStyleToDomElement(this.compassIcon, COMPASS_STYLE);
|
|
91
|
-
this.
|
|
96
|
+
this.positionIcon.appendChild(this.compassIcon);
|
|
92
97
|
}
|
|
93
98
|
|
|
94
99
|
applyStyleToDomElement(domElement, style) {
|
|
@@ -123,7 +128,7 @@ class MapComponent extends React.Component {
|
|
|
123
128
|
if (this.mapMarker) {
|
|
124
129
|
this.mapMarker.remove();
|
|
125
130
|
this.mapMarker = null;
|
|
126
|
-
this.
|
|
131
|
+
this.positionIcon = null;
|
|
127
132
|
}
|
|
128
133
|
return;
|
|
129
134
|
}
|
|
@@ -131,11 +136,11 @@ class MapComponent extends React.Component {
|
|
|
131
136
|
const lngLat = [position.lng, position.lat];
|
|
132
137
|
|
|
133
138
|
if (!this.mapMarker) {
|
|
134
|
-
this.mapMarker = this.
|
|
139
|
+
this.mapMarker = this.createPositionMarker(lngLat)
|
|
135
140
|
.addTo(this.map);
|
|
136
141
|
this.map.jumpTo({
|
|
137
142
|
center: lngLat,
|
|
138
|
-
zoom:
|
|
143
|
+
zoom: this.props.defaultZoom
|
|
139
144
|
});
|
|
140
145
|
} else {
|
|
141
146
|
this.mapMarker.setLngLat(lngLat);
|
|
@@ -145,13 +150,13 @@ class MapComponent extends React.Component {
|
|
|
145
150
|
|
|
146
151
|
updateAttitude(attitude) {
|
|
147
152
|
|
|
148
|
-
if (!this.
|
|
153
|
+
if (!this.positionIcon) {
|
|
149
154
|
return;
|
|
150
155
|
}
|
|
151
156
|
|
|
152
157
|
if (!(attitude instanceof Attitude)) {
|
|
153
158
|
if (this.compassIcon) {
|
|
154
|
-
this.
|
|
159
|
+
this.positionIcon.removeChild(this.compassIcon);
|
|
155
160
|
}
|
|
156
161
|
return;
|
|
157
162
|
}
|
|
@@ -160,7 +165,7 @@ class MapComponent extends React.Component {
|
|
|
160
165
|
this.createCompassElement();
|
|
161
166
|
}
|
|
162
167
|
|
|
163
|
-
this.
|
|
168
|
+
this.positionIcon.style.transform = 'rotate(' + attitude.headingDegrees + 'deg)';
|
|
164
169
|
}
|
|
165
170
|
|
|
166
171
|
renderNetwork() {
|
|
@@ -171,6 +176,11 @@ class MapComponent extends React.Component {
|
|
|
171
176
|
|
|
172
177
|
const network = this.props.network;
|
|
173
178
|
|
|
179
|
+
if (network === this.previousNetwork) {
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
this.previousNetwork = network;
|
|
183
|
+
|
|
174
184
|
if (!network) {
|
|
175
185
|
if (this.networkLayer) {
|
|
176
186
|
this.map.removeLayer(this.networkLayer);
|
|
@@ -207,6 +217,7 @@ class MapComponent extends React.Component {
|
|
|
207
217
|
]
|
|
208
218
|
);
|
|
209
219
|
}
|
|
220
|
+
|
|
210
221
|
this.map.on('load', () => {
|
|
211
222
|
this.networkLayer = this.map.addLayer(layer);
|
|
212
223
|
});
|
|
@@ -10,10 +10,10 @@ import PdrProvider from '../providers/pose/pdr/PdrProvider';
|
|
|
10
10
|
import EventType from '../events/EventType';
|
|
11
11
|
import MapComponent from './MapComponent';
|
|
12
12
|
|
|
13
|
-
const
|
|
13
|
+
const INITIAL_POSITION = new WGS84UserPosition(43.6091955, 3.8841255);
|
|
14
14
|
const INITIAL_HEADING = 191.9;
|
|
15
15
|
const ITINERARY = Itinerary.fromPoints([
|
|
16
|
-
[
|
|
16
|
+
[INITIAL_POSITION.lat, INITIAL_POSITION.lng],
|
|
17
17
|
[43.6091883, 3.8841242],
|
|
18
18
|
[43.6091709, 3.8842382],
|
|
19
19
|
[43.6091288, 3.884226],
|
|
@@ -31,7 +31,7 @@ class PdrComponent extends React.Component {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
componentDidMount() {
|
|
34
|
-
this.pdrProvider.
|
|
34
|
+
this.pdrProvider.setPosition(INITIAL_POSITION);
|
|
35
35
|
this.pdrProvider.setHeading(INITIAL_HEADING);
|
|
36
36
|
this.pdrProvider.enableMapMatching(ITINERARY);
|
|
37
37
|
this.pdrProvider.start();
|
|
@@ -11,10 +11,10 @@ import {
|
|
|
11
11
|
} from '@wemap/geo';
|
|
12
12
|
import MapComponent from './MapComponent';
|
|
13
13
|
|
|
14
|
-
const
|
|
14
|
+
const INITIAL_POSITION = new WGS84UserPosition(43.6091955, 3.8841255);
|
|
15
15
|
const INITIAL_HEADING = 191.9;
|
|
16
16
|
const ITINERARY = Itinerary.fromPoints([
|
|
17
|
-
[
|
|
17
|
+
[INITIAL_POSITION.lat, INITIAL_POSITION.lng],
|
|
18
18
|
[43.6091883, 3.8841242],
|
|
19
19
|
[43.6091709, 3.8842382],
|
|
20
20
|
[43.6091288, 3.884226],
|
|
@@ -47,7 +47,7 @@ class PositioningPoseComponent extends React.Component {
|
|
|
47
47
|
);
|
|
48
48
|
|
|
49
49
|
setTimeout(() => {
|
|
50
|
-
this.props.positioningHandler.setPosition(this.id,
|
|
50
|
+
this.props.positioningHandler.setPosition(this.id, INITIAL_POSITION);
|
|
51
51
|
this.props.positioningHandler.setHeading(this.id, INITIAL_HEADING);
|
|
52
52
|
this.props.positioningHandler.setItinerary(this.id, ITINERARY);
|
|
53
53
|
}, 3000);
|