可视化地图--反缩放

react

先判断缩放方式，获取屏幕可视化宽高及页面定义的宽高：

const windowSize = ({ zoomStyle, width, height }, innerWidth, innerHeight) => {
  let widthPre = width;
  let heightPre = height;

  let scaleX = 1;
  let scaleY = 1;

  if (zoomStyle === 'screenFull') {
    scaleX = Math.floor((innerWidth / width) * 10000) / 10000;
    scaleY = Math.floor((innerHeight / height) * 10000) / 10000;
    widthPre = innerWidth;
    heightPre = innerHeight;
  }
  if (zoomStyle === 'widthFull') {
    scaleX = Math.floor((innerWidth / width) * 10000) / 10000;
    scaleY = scaleX;
    widthPre = innerWidth;
    heightPre = scaleX * height;
  }
  if (zoomStyle === 'heightFull') {
    scaleY = Math.floor((innerHeight / height) * 10000) / 10000;
    scaleX = scaleY;
    heightPre = innerHeight;
    widthPre = scaleY * width;
  }

  return {
    innerWidth,
    innerHeight,
    widthPre,
    heightPre,
    scaleX,
    scaleY
  };
}

// export const iframeEngineSize = ({ zoomStyle, width, height }, innerWidth, innerHeight) => windowSize({ zoomStyle, width, height }, innerWidth, innerHeight);

export const previewWindowSize = ({ zoomStyle, width, height }) => {
  const innerWidth = window.innerWidth
  || document.documentElement.clientWidth;
  const innerHeight = window.innerHeight
  || document.documentElement.clientHeight;

  return windowSize({ zoomStyle, width, height }, innerWidth, innerHeight);
};
在地图渲染文件中引入文件进行使用：
  function reverseWidthHeight() {
    const egismapEle = document.getElementById('id');//获取地图dom
    const { screenInfoData: {
      zoomStyle, width: sw, height: sh
    } } = bigScreen; //这块视情况修改
    const coordinate = {
      x: egismapEle.offsetLeft,
      y: egismapEle.offsetTop
    }
    // 方法：反向缩放
    let w = width;
    let h = height;
    let newScaleX = 1;
    let newScaleY = 1;
    let newTop = coordinate.y;
    let newLeft = coordinate.x;
    const {
      scaleX,
      scaleY
    } = previewWindowSize({ zoomStyle, width: sw, height: sh });
    w *= scaleX;
    h *= scaleY;
    newScaleX = Math.floor((1 / scaleX) * 100) / 100;
    newScaleY = Math.floor((1 / scaleY) * 100) / 100;
    newLeft = ((width - w) / 2);
    newTop = ((height - h) / 2);
    const divStyle = {
      width: w,
      height: h,
      transform: `scaleX(${newScaleX}) scaleY(${newScaleY})`,
      position: 'absolute',
      top: `${newTop}px`,
      left: `${newLeft}px`
    };
    setEgismapStyle(divStyle); // 这里是将样式存一下
  }

初始化加载页面时调用这个方法，然后在样式渲染时加上egismapStyle即可。

vue

// 反缩放去掉自适应-解决地图自适应时marker、hover错位问题

resetMapSize() {
  let screenWidth =
    document.body.clientWidth || document.documentElement.clientWidth;
  let screenHeight =
    document.body.clientHeight || document.documentElement.clientHeight;
  let width = 1920;
  let height = 1080;
  let xScale = screenWidth / width;
  let yScale = screenHeight / height;
  let w = width;
  let h = height;
  w *= xScale;
  h *= yScale;
  let egismapEle = document.getElementById("egismap");
  const coordinate = {
    x: egismapEle.offsetLeft,
    y: egismapEle.offsetTop,
  };
  let newTop = coordinate.y;
  let newLeft = coordinate.x;
  newLeft = (width - w) / 2;
  newTop = (height - h) / 2;
  const divStyle = {
    width: `${w}px`,
    height: `${h}px`,
    transform: `scale(${1 / xScale},${1 / yScale})`,
    position: "absolute",
    top: `${newTop}px`,
    left: `${newLeft}px`,
  };
  this.egismapSty = divStyle;
}