phyks/cygnal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Heading is provided by browser in degrees but consumed by Leaflet in radians

Browse Source
This commit is contained in:
Lucas Verney 2018-07-09 18:37:55 +02:00
parent ae9f3892c7
commit 1f9c0bd623
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Map.vue
View File

@ -3,7 +3,7 @@
<v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @click="handleClick" @movestart="onMoveStart" @zoomstart="onZoomStart"> <v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @click="handleClick" @movestart="onMoveStart" @zoomstart="onZoomStart">
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer> <v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
<v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts> <v-lts v-if="heading !== null" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
<v-lcirclemarker v-else :lat-lng="positionLatLng" :color="markerOptions.color" :fillColor="markerOptions.fillColor" :fillOpacity="1.0" :weight="markerOptions.weight" :radius="markerRadius"></v-lcirclemarker> <v-lcirclemarker v-else :lat-lng="positionLatLng" :color="markerOptions.color" :fillColor="markerOptions.fillColor" :fillOpacity="1.0" :weight="markerOptions.weight" :radius="markerRadius"></v-lcirclemarker>
<v-lcircle v-if="shouldDisplayAccuracy" :lat-lng="positionLatLng" :radius="radiusFromAccuracy"></v-lcircle> <v-lcircle v-if="shouldDisplayAccuracy" :lat-lng="positionLatLng" :radius="radiusFromAccuracy"></v-lcircle>
@ -56,7 +56,7 @@ export default {
type: Number, type: Number,
default: null, default: null,
}, },
heading: Number, heading: Number, // in degrees, clockwise wrt north
markers: Array, markers: Array,
onPress: Function, onPress: Function,
polyline: Array, polyline: Array,
@ -84,7 +84,7 @@ export default {
return { return {
fillColor: '#00ff00', fillColor: '#00ff00',
color: '#000000', color: '#000000',
heading: this.heading, heading: this.heading * (Math.PI / 180),
weight: 1, weight: 1,
}; };
}, },

5
src/views/Map.vue
View File

@ -140,7 +140,10 @@ export default {
} }
this.latLng = [position.coords.latitude, position.coords.longitude]; this.latLng = [position.coords.latitude, position.coords.longitude];
this.positionHistory.push(this.latLng); this.positionHistory.push(this.latLng);
this.heading = Object.prototype.hasOwnProperty.call(position.coords, 'heading') ? position.coords.heading : null; this.heading = null;
if (position.coords.heading !== null && !isNaN(position.coords.heading)) {
this.heading = position.coords.heading;
}
this.accuracy = position.coords.accuracy ? position.coords.accuracy : null; this.accuracy = position.coords.accuracy ? position.coords.accuracy : null;
}, },
setNoSleep() { setNoSleep() {