OpenLayers地图加载高德地图数据的时候,在初始化的时候地图贴片被拉伸,
下图可以很明显的看到底图被拉伸了,可以配合高德加载的块图片比较下

http://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=1711&y=831&z=11

解决OpenLayers初始化地图贴片被拉伸问题

解决OpenLayers初始化地图贴片被拉伸问题

下图为调整窗口后自动更新了地图的底图尺寸,变成正常的,可以和上面的比较下

解决OpenLayers初始化地图贴片被拉伸问题

初始化的时候底图被拉伸变形,导致绘图的点的位置不正确,如下面的动图所示。

解决OpenLayers初始化地图贴片被拉伸问题

解决方法

通过查阅文档,得知Map下面有个updateSize方法用于强制重新计算地图大小
所以在地图初始化的可以异步调用下这个方法即可:

this.GDMap = new Map({
  target: 'GDMap',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
      })
    }),
    this.vector
  ],
  view: new View({
    projection: 'EPSG:4326',
    center: [120.864608, 32.016212],
    zoom: 11,
    minZoom: 5,
    maxZoom: 20
  })
})
setTimeout(() => {
  this.GDMap.updateSize()
}, 20)