跳至主要內容

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

Bing🐣VueWebOpenLayersVue地图高德地图大约 1 分钟

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

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

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

image
image
image
image

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

image
image

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

1566195584967-5cda7db7-a0e8-427f-8686-3e291f92fdf1
1566195584967-5cda7db7-a0e8-427f-8686-3e291f92fdf1

解决方法

通过查阅文档，得知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)