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

Various Map fixes

Browse Source 
* Correctly set the position marker style at initialization.
* Fix for the position marker not rotating with the view.
* Fix for the recenter button not showing up on zooming.
This commit is contained in:
Lucas Verney 2018-09-13 16:34:52 +02:00
parent 03a0e84f58
commit 9b5487499a
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Map.vue
View File

@ -215,8 +215,13 @@ export default {
const mapCenterLonLat = toLonLat(view.getCenter()); const mapCenterLonLat = toLonLat(view.getCenter());
this.onMapCenterUpdate([mapCenterLonLat[1], mapCenterLonLat[0]]); this.onMapCenterUpdate([mapCenterLonLat[1], mapCenterLonLat[0]]);
} }
if (this.onMapZoomUpdate) { // Show recenter button and call the callback if zoom is updated manually
this.onMapZoomUpdate(view.getZoom()); const zoom = view.getZoom();
if (zoom !== this.zoom) {
this.showRecenterButton();
if (this.onMapZoomUpdate) {
this.onMapZoomUpdate(zoom);
}
} }
}, },
recenterMap() { recenterMap() {
@ -243,11 +248,11 @@ export default {
// If heading is specified // If heading is specified
if (this.headingInRadiansFromNorth !== null) { if (this.headingInRadiansFromNorth !== null) {
const rotation = (this.isInAutorotateMap const rotation = (this.isInAutorotateMap
? -Math.PI / 2 ? - this.map.getView().getRotation() - Math.PI / 2
: ( : (
this.headingInRadiansFromNorth this.headingInRadiansFromNorth
+ this.map.getView().getRotation() + this.map.getView().getRotation()
- Math.PI / 2 + Math.PI / 2
) )
); );
// Check current style and update rotation if an arrow is already drawn // Check current style and update rotation if an arrow is already drawn
@ -264,6 +269,7 @@ export default {
textBaseline: 'middle', textBaseline: 'middle',
offsetX: 0, offsetX: 0,
offsetY: 0, offsetY: 0,
rotateWithView: true,
rotation, rotation,
font: '30px sans-serif', font: '30px sans-serif',
text: '►', text: '►',
@ -324,7 +330,6 @@ export default {
this.positionFeature = new Feature({ this.positionFeature = new Feature({
geometry: this.olPosition ? new Point(this.olPosition) : null, geometry: this.olPosition ? new Point(this.olPosition) : null,
}); });
this.setPositionFeatureStyle();
// Create polyline feature // Create polyline feature
this.polylineFeature = new Feature({ this.polylineFeature = new Feature({
@ -363,6 +368,13 @@ export default {
resetNorth: () => { resetNorth: () => {
// Switch autorotate mode // Switch autorotate mode
this.hasUserAutorotateMap = !this.hasUserAutorotateMap; this.hasUserAutorotateMap = !this.hasUserAutorotateMap;
const view = this.map.getView();
if (this.isInAutorotateMap) {
view.setRotation(-this.headingInRadiansFromNorth);
} else {
view.setRotation(0);
}
}, },
}, },
zoom: false, zoom: false,
@ -392,6 +404,8 @@ export default {
zoom: this.zoom, zoom: this.zoom,
}), }),
}); });
// Set position marker style
this.setPositionFeatureStyle();
// Add click handler // Add click handler
this.map.on('singleclick', this.handleClick); this.map.on('singleclick', this.handleClick);
@ -399,9 +413,6 @@ export default {
// Show recenter button on dragging the map // Show recenter button on dragging the map
this.map.on('pointerdrag', () => { this.map.on('pointerdrag', () => {
this.isProgrammaticMove = false; this.isProgrammaticMove = false;
// Ensure correct orientation of position arrow
// TODO: Orientation should be correct while rotating as well
this.setPositionFeatureStyle();
this.showRecenterButton(); this.showRecenterButton();
}); });
this.map.on('moveend', this.onMoveEnd); this.map.on('moveend', this.onMoveEnd);