0

在我更新到 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

任何帮助是极大的赞赏。

4

1 回答 1

0

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

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

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

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

于 2020-12-10T17:41:50.770 回答