大屏项目适配问题scale缩放

大屏自适配

注意：涉及到高德地图 百度地图这些，千万不能用 ，如果是单纯显示，不涉及二次渲染 动态数据啥的，倒是可以！！scale影响了经纬度，踩坑踩大了！！！

1、这个是借鉴了大佬们使用的，我又封装成vue组件使用，用了Css3的缩放属性scale控制页面比例，不过这样的可能对地图的经纬度会产生误差，比如点击地图的地点名，可能高亮到其他附加的地方，具体需求看自己界面是什么功能了，一般用来看的 还是没问题的。

直接上代码，封装成vue组件，使用了插槽，设计稿比例是：1920*1080，具体看自己需求(做个笔记而已)

<template>
  <div v-bind:style="styleObject" class="scale-box">
    <slot></slot>
  </div>
</template>

<script>
import debounce from "lodash.debounce"
const that = this;
export default {
  props: {
    width: {
      type: Number,
      default: 1920,
    },
    height: {
      type: Number,
      default: 1080,
    },
  },
  components: {},
  data() {
    return {
      scale: this.getScale(),
    }
  },
  computed: {
    styleObject(){
      let obj = {
        transform: `scale(${this.scale}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
        width: this.width + "px",
        height: this.height + "px",
      }
       return obj
    }

  },
  mounted() {
    this.getScale()
    window.addEventListener("resize", this.setScale)
  },
  methods: {
    getScale() {
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      console.log(window.innerWidth,'window.innerWidth');
      let ww = window.innerWidth / this.width
      let wh = window.innerHeight / this.height
      return ww < wh ? ww : wh
    },

    setScale: debounce(function () {

      // 获取到缩放比，设置它
      let scale = this.getScale()
      this.scale = scale
       console.log(this.scale, "---")
    }, 500),
  },
  beforeDestroy() {
    window.addEventListener("resize", this.setScale)
  },
}
</script>

<style scoped lang="less">
.scale-box {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>