解决 openlayers 加载高德地图拉伸

在使用 openlayers 加载高德地图瓦片时，会出现图片、标注等有一定的形变、拉伸等。

为什么会出现这样的问题？

原先代码

export default {
  components: { MapTool },
  data() {
    return {
      centerMap: null,
      baseLayers: []
    }
  },
  created() {
    this.createdBaseLayer()
  },
  mounted() {
    this.centerMap = new Map({
      target: 'centerMap',
      layers: this.baseLayers,
      view: new View({
        projection: 'EPSG:4326',
        center: [117.691603, 39.014074],
        zoom: 11.5,
        maxZoom: 18,
        minZoom: 5
      })
    })
  },
  methods: {
    createdBaseLayer() {
      // 这里的url可以看前面文章
      this.vecLayer = new TileLayer({
        source: new XYZ({
          url: mapUrls['aMap-vec-a']
        }),
        title: '矢量底图'
      })
      this.vecLayer.setVisible(false)
      this.baseLayers.push(this.vecLayer)

      this.imgLayer = new TileLayer({
        source: new XYZ({
          url: mapUrls['aMap-img-n']
        }),
        title: '影像底图'
      })
      this.baseLayers.push(this.imgLayer)

      this.labelLayer = new TileLayer({
        source: new XYZ({
          url: mapUrls['aMap-img-a']
        }),
        title: '影像底图标注'
      })
      this.baseLayers.push(this.labelLayer)
    }
  }
}

现在一般默认的话，都是使用的 4326 坐标系。这个是 WGS84的，没有投影。

高德地图使用的是大地2000投影坐标系，所以在使用时，要使用 3857。（因为有投影，所以坐标也要转换）

改进代码

import { fromLonLat } from 'ol/proj'

    this.centerMap = new Map({
      target: 'centerMap',
      layers: this.baseLayers,
      view: new View({
        projection: 'EPSG:3857',
        center: fromLonLat([117.691603, 39.014074]),
        zoom: 11.5,
        maxZoom: 18,
        minZoom: 5
      })
    })

改进后，高德地图的展示就正常了。

我这里是就地图的展示，如果要添加其他要素、图层什么的要注意坐标系问题。