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

Fix a bug with centering of the map when position is moving

Browse Source
This commit is contained in:
Lucas Verney 2018-07-01 22:55:21 +02:00
parent 390d734b9a
commit fd473e32b2
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Map.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="fill-height fill-width"> <div class="fill-height fill-width">
<v-lmap ref="map" :center="latLng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @contextmenu="handleLongPress" @moveend="onMoveEnd" @movestart="onMoveStart"> <v-lmap ref="map" :center="latLng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @contextmenu="handleLongPress" @mousedown="onMouseDown" @mouseup="onMouseUp" @moveend="onMoveEndWrapper" @movestart="onMoveStartWrapper">
<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" :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="latlng" :radius="radiusFromAccuracy"></v-lcircle> <v-lcircle v-if="shouldDisplayAccuracy" :lat-lng="positionLatLng" :radius="radiusFromAccuracy"></v-lcircle>
<ReportMarker v-for="marker in markers" :key="marker.id" :marker="marker"></ReportMarker> <ReportMarker v-for="marker in markers" :key="marker.id" :marker="marker"></ReportMarker>
</v-lmap> </v-lmap>
@ -53,7 +53,7 @@ export default {
radiusFromAccuracy() { radiusFromAccuracy() {
if (this.accuracy) { if (this.accuracy) {
return this.accuracy / ( return this.accuracy / (
(constants.EARTH_RADIUS * 2 * Math.PI * Math.cos(this.latLng[0] * (constants.EARTH_RADIUS * 2 * Math.PI * Math.cos(this.positionLatLng[0] *
(Math.PI / 180))) / (Math.PI / 180))) /
(2 ** (this.zoom + 8)) (2 ** (this.zoom + 8))
); );
@ -94,6 +94,7 @@ export default {
minZoom: constants.MIN_ZOOM, minZoom: constants.MIN_ZOOM,
maxZoom: constants.MAX_ZOOM, maxZoom: constants.MAX_ZOOM,
tileServer: constants.TILE_SERVER, tileServer: constants.TILE_SERVER,
isMouseDown: false,
}; };
}, },
methods: { methods: {
@ -102,6 +103,22 @@ export default {
this.onLongPress(event.latlng); this.onLongPress(event.latlng);
} }
}, },
onMouseDown() {
this.isMouseDown = true;
},
onMouseUp() {
this.isMouseDown = false;
},
onMoveStartWrapper(ev) {
if (this.isMouseDown) {
this.onMoveStart(ev);
}
},
onMoveEndWrapper(ev) {
if (this.isMouseDown) {
this.onMoveEnd(ev);
}
},
}, },
}; };
</script> </script>