Fix a bug with Vue2LeafletTrackSymbol not updating heading
This commit is contained in:
parent
77433bcab5
commit
060c4a29f4
@ -28,7 +28,6 @@
|
||||
"vue-i18n": "^8.0.0",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue2-leaflet": "^1.0.2",
|
||||
"vue2-leaflet-tracksymbol": "^1.0.10",
|
||||
"vuetify": "^1.1.11",
|
||||
"vuex": "^3.0.1",
|
||||
"whatwg-fetch": "^2.0.4"
|
||||
|
||||
69
src/components/LeafletTrackSymbol.vue
Normal file
69
src/components/LeafletTrackSymbol.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Adapted from https://github.com/ais-one/vue2-leaflet-tracksymbol
|
||||
import L from 'leaflet';
|
||||
import 'leaflet-tracksymbol';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
heading: Number,
|
||||
latLng: [Object, Array],
|
||||
options: Object,
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
heading(newHeading) {
|
||||
this.mapObject.setHeading(newHeading);
|
||||
},
|
||||
latLng(newLatLng) {
|
||||
this.mapObject.setLatLng(newLatLng);
|
||||
},
|
||||
options(newOptions) {
|
||||
L.setOptions(this.mapObject, newOptions);
|
||||
},
|
||||
visible: 'setVisible',
|
||||
},
|
||||
mounted() {
|
||||
const options = Object.assign({}, this.options, { heading: this.heading });
|
||||
this.mapObject = L.trackSymbol(this.latLng, options);
|
||||
if (this.$parent._isMounted) {
|
||||
this.deferredMountedTo(this.$parent.mapObject);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.setVisible(false);
|
||||
},
|
||||
methods: {
|
||||
deferredMountedTo(parent) {
|
||||
this.parent = parent;
|
||||
const that = this.mapObject;
|
||||
for (let i = 0; i < this.$children.length; i += 1) {
|
||||
this.$children[i].deferredMountedTo(that);
|
||||
}
|
||||
if (this.visible) {
|
||||
this.mapObject.addTo(parent);
|
||||
}
|
||||
},
|
||||
setVisible(newVal, oldVal) {
|
||||
if (newVal === oldVal) {
|
||||
return;
|
||||
}
|
||||
if (this.mapObject) {
|
||||
if (newVal) {
|
||||
this.mapObject.addTo(this.parent);
|
||||
} else {
|
||||
this.parent.removeLayer(this.mapObject);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -13,7 +13,7 @@
|
||||
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
|
||||
|
||||
<template v-if="positionLatLng">
|
||||
<v-lts v-if="heading !== null" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
|
||||
<v-lts v-if="heading !== null" :lat-lng="positionLatLng" :heading="headingInRadiansFromNorth" :options="markerOptions"></v-lts>
|
||||
<v-lcirclemarker
|
||||
v-else
|
||||
:lat-lng="positionLatLng"
|
||||
@ -60,12 +60,12 @@ import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
import {
|
||||
LMap, LTileLayer, LMarker, LCircleMarker, LCircle, LPolyline,
|
||||
} from 'vue2-leaflet';
|
||||
import Vue2LeafletTracksymbol from 'vue2-leaflet-tracksymbol';
|
||||
|
||||
import compassNorthIcon from '@/assets/compassNorth.svg';
|
||||
import unknownMarkerIcon from '@/assets/unknownMarker.svg';
|
||||
import * as constants from '@/constants';
|
||||
import { distance } from '@/tools';
|
||||
import LeafletTracksymbol from './LeafletTrackSymbol.vue';
|
||||
import ReportMarker from './ReportMarker.vue';
|
||||
|
||||
// Fix for a bug in Leaflet default icon
|
||||
@ -85,17 +85,15 @@ export default {
|
||||
'v-lcirclemarker': LCircleMarker,
|
||||
'v-lcircle': LCircle,
|
||||
'v-lpolyline': LPolyline,
|
||||
'v-lts': Vue2LeafletTracksymbol,
|
||||
'v-lts': LeafletTracksymbol,
|
||||
ReportMarker,
|
||||
},
|
||||
computed: {
|
||||
markerOptions() {
|
||||
return {
|
||||
fillColor: '#00ff00',
|
||||
color: '#000000',
|
||||
heading: this.heading * (Math.PI / 180), // in radians from North
|
||||
weight: 1,
|
||||
};
|
||||
headingInRadiansFromNorth() {
|
||||
if (this.heading !== null) {
|
||||
return this.heading * (Math.PI / 180); // in radians from North
|
||||
}
|
||||
return null;
|
||||
},
|
||||
radiusFromAccuracy() {
|
||||
if (this.accuracy) {
|
||||
@ -134,6 +132,14 @@ export default {
|
||||
isProgrammaticMove: false,
|
||||
isProgrammaticZoom: false,
|
||||
map: null,
|
||||
markerOptions: {
|
||||
fill: true,
|
||||
fillColor: '#00ff00',
|
||||
fillOpacity: 1.0,
|
||||
color: '#000000',
|
||||
opacity: 1.0,
|
||||
weight: 1,
|
||||
},
|
||||
markerRadius: 10.0,
|
||||
maxZoom: constants.MAX_ZOOM,
|
||||
minZoom: constants.MIN_ZOOM,
|
||||
|
||||
@ -112,7 +112,7 @@ export const REPORT_TYPES_ORDER = ['gcum', 'interrupt', 'obstacle', 'pothole', '
|
||||
|
||||
export const MIN_DISTANCE_REPORT_DETAILS = 40; // in meters
|
||||
|
||||
export const MOCK_LOCATION = false;
|
||||
export const MOCK_LOCATION = true;
|
||||
export const MOCK_LOCATION_UPDATE_INTERVAL = 5 * 1000; // in milliseconds
|
||||
|
||||
export const UPDATE_REPORTS_DISTANCE_THRESHOLD = 500; // in meters
|
||||
|
||||
@ -31,12 +31,16 @@ export function mockLocation() {
|
||||
const LAT_MAX = 48.81952;
|
||||
const LNG_MAX = 2.32077;
|
||||
|
||||
let heading = null;
|
||||
if (Math.random() > 0.25) {
|
||||
heading = Math.random() * 360;
|
||||
}
|
||||
const newLocation = {
|
||||
coords: {
|
||||
accuracy: 10, // In meters
|
||||
latitude: (Math.random() * (LAT_MAX - LAT_MIN)) + LAT_MIN,
|
||||
longitude: (Math.random() * (LNG_MAX - LNG_MIN)) + LNG_MIN,
|
||||
heading: null, // 20 * (Math.PI / 180),
|
||||
heading,
|
||||
},
|
||||
timestamp: new Date().getTime(),
|
||||
};
|
||||
|
||||
18
yarn.lock
18
yarn.lock
@ -4996,10 +4996,6 @@ leaflet-tracksymbol@^1.0.8:
|
||||
dependencies:
|
||||
express "^4.13.4"
|
||||
|
||||
leaflet@^1.2.0:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.1.tgz#86f336d2fb0e2d0ff446677049a5dc34cf0ea60e"
|
||||
|
||||
leaflet@^1.3.1:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.3.tgz#5c8f2fd50e4a41ead93ab850dcd9e058811da9b9"
|
||||
@ -8418,20 +8414,6 @@ vue-template-es2015-compiler@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
|
||||
|
||||
vue2-leaflet-tracksymbol@^1.0.10:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/vue2-leaflet-tracksymbol/-/vue2-leaflet-tracksymbol-1.0.10.tgz#644935cb48baa6b37216d0b525d45ba0387a5f3a"
|
||||
dependencies:
|
||||
leaflet "^1.3.1"
|
||||
leaflet-tracksymbol "^1.0.8"
|
||||
vue2-leaflet "0.0.58"
|
||||
|
||||
vue2-leaflet@0.0.58:
|
||||
version "0.0.58"
|
||||
resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-0.0.58.tgz#acfd0f7530292c60893a0b5b3cf648f06de530d1"
|
||||
dependencies:
|
||||
leaflet "^1.2.0"
|
||||
|
||||
vue2-leaflet@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.0.2.tgz#73e0c09a30015db9a8dc0e9256443afb180d1fd5"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user