map加大屏适配方案--transform

1. 创建parameter.js文件

export const WIDTH = 1920
export const HEIGHT = 1080
export const PLANTYPE = 1 // 选择方案一或二，值： 1（铺满）或2（等比例）
export const MAPESIZE = 'all' // 地图的大小，值： all(铺满全屏)或 part(占部分)
export const PERCENTAGEWIDTH = 0.5 // 若MAPESIZE='part',添加这个字段；值： 地图宽度 / 设计图宽度
export const PERCENTAGEHEIGHT = 0.5 // 若MAPESIZE='part',添加这个字段；值： 地图高度 / 设计图高度

2、创建transform.js文件

import { WIDTH, HEIGHT, PLANTYPE, MAPESIZE,
  PERCENTAGEWIDTH, PERCENTAGEHEIGHT } from './parameter'
// 设置系统缩放比，适配各分辨率
const designRatio = WIDTH / HEIGHT
function reSize() {
  const baseWidth = document.body.clientWidth
  const baseHeight = document.body.clientHeight
  let scaleRate
  if (PLANTYPE === 1) {
    const realRatio = baseWidth / baseHeight
    scaleRate = baseWidth / WIDTH // 默认宽度比例是1920
    if (realRatio > designRatio) {
      // 当页面的`宽高比`比`默认比`大时，比例取与高度的比例。这样页面就相当于由横屏比例换成竖屏比例
      scaleRate = baseHeight / HEIGHT
    }
  } else {
    scaleRate = baseHeight / HEIGHT
  }
  return {
    baseWidth,
    baseHeight,
    scaleRate
  }
}
// 整个页面的transform
export function refreshScale() {
  const appStyle = document.getElementById('app').style
  const {
    baseWidth,
    baseHeight,
    scaleRate
  } = reSize()
  appStyle.transformOrigin = 'left top'
  appStyle.transform = `scale(${scaleRate})`
  if (PLANTYPE === 1) {
    appStyle.width = `${baseWidth / scaleRate}px`
    appStyle.height = `${baseHeight / scaleRate}px`
  }
}
// map的transform
export function mapRefreshScale() {
  const percentageWid = PERCENTAGEWIDTH || 1
  const percentageHei = PERCENTAGEHEIGHT || 1
  const mapStyle = document.getElementById('map').style
  const {
    baseWidth,
    baseHeight,
    scaleRate
  } = reSize()
  mapStyle.transformOrigin = 'left top'
  // 将map地图还原比例，不进行缩放
  mapStyle.transform = `scale(${1 / scaleRate})`
  if (PLANTYPE === 1) {
    // 方案一
    if (MAPESIZE === 'all') {
      mapStyle.width = `${baseWidth}px`
      mapStyle.height = `${baseHeight}px`
    } else {
      mapStyle.width = `${baseWidth * percentageWid}px`
      mapStyle.height = `${baseHeight * percentageHei}px`
    }
  } else {
    // 方案二
    if (MAPESIZE === 'all') {
      mapStyle.width = `${baseHeight * designRatio}px`
      mapStyle.height = `${baseHeight}px`
    } else {
      mapStyle.width = `${baseHeight * designRatio * percentageWid}px`
      mapStyle.height = `${baseHeight * percentageHei}px`
    }
  }
}

3、在定义app和map的页面中使用

mounted() {
    refreshScale()
    window.addEventListener('resize', () => {
      refreshScale()
    })
}
mounted() {
    mapRefreshScale()
    window.addEventListener('resize', () => {
      mapRefreshScale()
    })
}