OpenLayers 6.4.3 和 AGM (Angular Google Maps) 之间的缩放问题答案

【问题标题】：Zoom issue between OpenLayers 6.4.3 and AGM (Angular Google Maps)OpenLayers 6.4.3 和 AGM (Angular Google Maps) 之间的缩放问题
【发布时间】：2020-11-30 20:52:39
【问题描述】：

在我更新到 OpenLayers 6.4.3 AGM（Angular Google Maps）之前，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();
     });
  }

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

更新：

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

更新：

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

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

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

非常感谢任何帮助。

【问题讨论】：

你是从哪个版本的OL更新的？
我们从 5.3.1 更新到 6.4.3
应该是坐标变换问题，但是为什么agM和OpenLayers一起用呢？
因为 Google 图像比 Bing 图像更新。

标签： openlayers angular-google-maps openlayers-6 agm

【解决方案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:[]
   });
  }

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

【讨论】：