在使用 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 From: https://www.cnblogs.com/zhurong/p/16590989.html