openlayers6.x加载百度地图缩放时发生偏移问题说明_envon123

最近为了使用openlayers的animate方法，所以换到了最新版本（之前用的是openlayer3，现在用的是openlayer6.6）

openlayer3使用缩放的方法是，摘自https://blog.csdn.net/envon123/article/details/83306070

但是以下的方法在偏移动画画完之后，偏移的位置总是不准确，甚至可能飞出显示范围。

function backWithAnim() {
  var pan = ol.animation.pan({
    duration: 2000,
    source: map.getView().getCenter(),
    easing: getEasing()    // 设置对应选择的动画
  });
  map.beforeRender(pan);
  map.getView().setCenter(ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'));
}

openlayer5以后的缩放是

view.animate({zoom: 10}, {center: [0, 0]});

更简洁也更准确。所以一步到位使用了最新版本（openlayers6.6）

但是出现了新的问题，加载底图的时候，缩放底图就发现图片显示产生了偏移。

这个是最小级别的地图显示，然后放大一级就向上偏移了一些。

 这个是放大一级的，此时我鼠标就在画圈的位置，底图已经飞上去一些。

并且在图上的标记点也只是在原地没有动，整体看上去位置就已经不准确了。

所以按照缩放偏移查了半天，直到看到了这个帖子https://blog.csdn.net/u013594477/article/details/83988055

依旧没有解决问题。偶然在评论区发现了大神@yunlive说高版本的openlayers的tile的机制改变了，需要在tileUrlFunction的Y值-1。

tileUrlFunction : function(tileCoord, pixelRatio, proj) {
				var z = tileCoord[0];
				var x = tileCoord[1];
				var y = tileCoord[2];
 
				// 百度瓦片服务url将负数使用M前缀来标识
				if (x < 0) {
					x =  (-x);
				}
				if (y < 0) {
					y =  (-y)-1;
				}
				//return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
				return mapCache+z+"/"+y+"_"+x+"_"+z+".jpg";;
			}

然后问题完美解决！自古评论区里出大神，厉害了！