概述

一个大屏页面，其中包含echarts图表和openlayers地图组件。为了达到自适应的效果，使用了css 属性transform:scale()。

该属性会导致地图组件上的点位置偏移的问题。

解决方案

使用iframe将地图组件包裹起来。

修改openlayers源码

openlayers地图通过Map对象初始化。

    const map = new Map({
      layers: new TileLayer({...})
      view: new View({...}),
      target: 'map',
    });

PluggableMap是Map对象的父类。通过修改PluggableMap原型链上的方法getEventPixel消除transform:scale()造成的偏移。

点击查看该解决方案出处

PluggableMap.prototype.getEventPixel = function (event) {
  const viewportPosition = this.viewport_.getBoundingClientRect();
  let size = [viewportPosition.width, viewportPosition.height];
  const view = this.getView();
  if (view) {
    size = view.getViewportSize_();
  }
  
  const eventPosition =
    //FIXME Are we really calling this with a TouchEvent anywhere?
    'changedTouches' in event
      ? /** @type {TouchEvent} */ (event).changedTouches[0]
      : /** @type {MouseEvent} */ (event);

  // 视口宽高和地图视图对象（View）宽高的比例 如：1920 / 960
  const ratioX = size[0] / viewportPosition.width;
  const ratioY = size[1] / viewportPosition.height;

  return [
    // 通过计算消除点击事件位置的偏移
    (eventPosition.clientX - viewportPosition.left) * ratioX,
    (eventPosition.clientY - viewportPosition.top) * ratioY,
  ];
};