Zoom issue between OpenLayers 6.4.3 and AGM (Angular Google Maps)

Question

Before my update to OpenLayers 6.4.3 AGM (Angular Google Maps) and OpenLayers stayed in sync through loading, zooming, and panning...now the layers are operating out of sync with the OpenLayers vector layer moving faster than the AGM layer.

SHARED VALUES:

 export class MapValues {
 public static view: any = null;
 public static googleLat = 0;
 public static googleLng = 0;
 public static googleZoom = 5;
 public static map: olMap = null;
 };

CREATE MAP:

createMap() {
    MapValues.view = new View({
        center: [MapValues.googleLng, MapValues.googleLat],
        zoom: MapValues.googleZoom,
        projection: 'EPSG:3857',
        maxZoom: 20,
        minZoom: 5
    });
    let map = new olMap({
        interactions: defaultInteractions({
        doubleClickZoom: false,
        dragPan: false,
        altShiftDragRotate: false,
        shiftDragZoom: false
        }),
        target: 'map',
        view: MapValues.view,
        controls:[]
       });
      }

ALIGN MAP:

  alignMap() {
     MapValues.view.on('change:center', function () {
     MapValues.mapCenter = transform(MapValues.view.getCenter(), 'EPSG:3857', 'EPSG:4326');
     MapValues.googleLat = MapValues.mapCenter[1];
     MapValues.googleLng = MapValues.mapCenter[0];
     });
     MapValues.view.on('change:resolution', function () {
     MapValues.googleZoom = MapValues.view.getZoom();
     });
  }

So whenever the map is panned or zoomed "alignMap" is called and before OpenLayers 6.4.3 all vector objects were perfectly aligned after...no vector objects are aligned...

UPDATE:

Seems like "Transform" may not be working as it did previously...the more I look at this problem the more apparent that there is a projection conflict here between OpenLayers and AGM.

UPDATE:

The issue is definitely a zoom problem where the further away from a whole integer you get the worse the misalignment is.

I've created a StackBlitz here to demostrate the problem. Just use the "Draw" button and the top to trace one of the fields. Click "Stop Drawing" and pan the map.

https://stackblitz.com/edit/angular-openlayer-play-n5brr8?file=src%2Fapp%2Fapp.component.ts

Any help is greatly appreciated.

It should be a coordinate transformation problem,but why agM and OpenLayers are used together? — fbfatboy
Because Google imagery is more up to date than Bing imagery. — Funn_Bobby

Funn_Bobby Funn_Bobby · Accepted Answer · 2020-12-10T17:41:50

So for those looking for a solution to this...

When creating the map add these parameters.

constrainResolution: true,
smoothResolutionConstraint: false,

So it would look like this.

createMap() {
MapValues.view = new View({
    center: [MapValues.googleLng, MapValues.googleLat],
    zoom: MapValues.googleZoom,
    projection: 'EPSG:3857',
    maxZoom: 20,
    minZoom: 5,
    constrainResolution: true,
    smoothResolutionConstraint: false,
});
let map = new olMap({
    interactions: defaultInteractions({
    doubleClickZoom: false,
    dragPan: false,
    altShiftDragRotate: false,
    shiftDragZoom: false
    }),
    target: 'map',
    view: MapValues.view,
    controls:[]
   });
  }

Try it in the stack blitz listed above and see the fix.

Zoom issue between OpenLayers 6.4.3 and AGM (Angular Google Maps)

1 Answers