OpenLayers 6.4.3 和 AGM 之间的缩放问题（Angular Google 地图）

Question

在我更新到 OpenLayers 6.4.3 AGM（Angular Google 地图）之前，OpenLayers 通过加载、缩放和平移保持同步...现在图层运行不同步OpenLayers 向量层比 AGM 层移动得更快。

共同价值观：

 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;
 };

创建地图：

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:[]
       });
      }

对齐地图：

  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();
     });
  }

因此，无论何时平移或缩放地图，都会调用“alignMap”，在 OpenLayers 6.4.3 之前，所有矢量对象都完美对齐...没有矢量对象对齐...

更新：

似乎“转换”可能无法像以前那样工作...我越看这个问题就越明显，OpenLayers 和 AGM 之间存在投影冲突。

更新：

这个问题绝对是一个缩放问题，离整数越远，错位就越严重。

我在这里创建了一个 StackBlitz 来演示这个问题。只需使用“绘图”按钮和顶部来跟踪其中一个字段。单击“停止绘制”并平移地图。

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

非常感谢任何帮助。

Answer 1

所以对于那些正在寻找解决方案的人...

创建地图时添加这些参数。

constrainResolution: true,
smoothResolutionConstraint: false,

所以它看起来像这样。

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:[]
   });
  }

在上面列出的堆栈闪电战中尝试它并查看修复。

OpenLayers 6.4.3 和 AGM 之间的缩放问题（Angular Google 地图）

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

openlayers

angular-google-maps

openlayers-6

agm