vue3-大屏可视化scale中的Map坐标/缩放不一致解决方案

        最近在项目中的大屏页面使用到了scale来解决不同分辨率的问题，本以为会顺风顺水，没想到还是遇到了一些问题，在这里记录一下。

目录

一、常规的大屏三种适配方案 

二、解决方案

---

一、常规的大屏三种适配方案 

        我选用的是scale，因为简单方便，而且项目只需要适配16:9的就行了，所以怎么方便怎么来，但是途中遇到了问题，当屏幕分辨率为3840*2160的时候地图的缩放会出现偏移（网上找了很多资料也没有效果）

        目前网上给出的两种主流的解决方案是：

1、最外层scale缩放为2的时候，需要设置地图的缩放为 1/scale，这个有用是有用，是能解决缩放偏移的问题，但是地图的content会被缩小，字体样式也会出现模糊的问题，解决不了，放弃！

2、使用iframe，这个我就没有考虑，内嵌iframe会有很大的性能问题，放弃！

二、解决方案

        scale的缩放会引起map的缩放偏移，那么只需要将map从scale的盒子中移除，脱离scale的盒子就可以了，将map的盒子和scale的盒子放在同一级，然后根据缩放比例去动态计算map的宽高和位置(top、left)，这是最好的解决方案。