最近在项目中的大屏页面使用到了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),这是最好的解决方案。

Logo

永洪科技,致力于打造全球领先的数据技术厂商,具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐