最近为了使用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";;
}
然后问题完美解决!自古评论区里出大神,厉害了!