openlayers 地图地理坐标、屏幕像素坐标相互转换（实际应用）

应用场景

最近新开发的阀门专题图页，想要点击地图上的阀门要素，相应的阀门移动至屏幕上中位置高亮显示

遇到问题

参考之前的写法，先将地图缩放到一定比例，再设置地图中心位置（地理坐标），地图会动态移动到相应位置

 let geom = new Point(smgeometry); // 点要素
 let center = this.getCenterOfExtent(geom.getExtent()); // 获取要素几何中心
 
 // 获取要素几何中心
 getCenterOfExtent(Extent) {
   var X = Extent[0] + (Extent[2] - Extent[0]) / 2;
   var Y = Extent[1] + (Extent[3] - Extent[1]) / 2;
   return [X, Y];
 },


 this.view.setZoom(6);
 // center数组点击的阀门要素的地理坐标 这里减去0.001是由于，直接使用要素的地理位置作为地图的中心会被底部弹出框遮挡，故向下挪了一点
 this.view.animate({ center:[center[0],center[1]-0.001] }) 

反馈问题，希望点击阀门要素后，地图比例尺不改变，也就是地图不再缩放，这时再写死向下移动的0.001，在不同的比例尺下会出现要素飞出屏幕的情况

实现思路

可以看到 t点 在A面的右下位置，我想让它到移动到页面的中上位置，也就是A‘页面的上中位置

this.view.animate(coor)方法用于移动地图中心至传入的地理坐标处，也就是说，只要我拿到A’页面的 k点 处的地理坐标，就能够实现

而 k点 的地理坐标可以从t点地理坐标推过来，但是地图的比例尺发生改变，两个地理坐标之间的数值关系就不能写死，但屏幕的像素坐标可以

let canvasEl = document.querySelector('canvas') // 承载地图的dom元素
let pos =  this.map.getPixelFromCoordinate(center); // 将点击要素（t点）的地理坐标转换为屏幕像素坐标
pos = [pos[0],pos[1] + canvasEl.offsetHeight * 0.25]; // k点 要作为中心位置 其屏幕像素坐标的x轴与 t点 一致，y轴在 t点的基础上 加屏幕高度的四分之一
let cor = this.map.getCoordinateFromPixel(pos) // 将 k点 屏幕像素坐标转换为地理坐标
this.map.getView().animate({
  center: cor
})

实现效果