解决 openlayers 加载高德地图拉伸

2022-08-16 11:30:25 阅读：157 来源： 互联网

标签：拉伸底图 url baseLayers openlayers new 高德 centerMap

在使用 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
      })
    })

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

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

标签：拉伸,底图,url,baseLayers,openlayers,new,高德,centerMap
来源： https://www.cnblogs.com/zhurong/p/16590989.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

解决 openlayers 加载高德地图拉伸