解决 autofit.js 自适应屏幕与 cesium 点击错位

解决 autofit.js 自适应屏幕与 cesium 点击错位

如在 App.vue 中启用自适应

ignore 除了容器 id 其余全部默认

import { onMounted } from "vue";
import autofit from "autofit.js";

onMounted(() => {
  autofit.init({
    dw: 1920, // 设计稿宽度
    dh: 1080, // 设计稿高度
    ignore: ['#CesiumContainer'], // 排除 Cesium 容器的缩放
    resize: true // 监听窗口变化自动适配
  });
});

参数：

• el : 选择一个 autofit.js 影响的 dom 元素，默认是 "body"，支持所有 css 选择器 (推荐使用 id)
• dw : 设计稿的宽度，默认是 1920
• dh : 设计稿的高度，默认是 1080
• resize : 是否监听 resize 事件，默认是 true，关闭后无法自动计算拖动后的大小
• ignore : 忽略缩放的元素（该元素将反向缩放），参数见下文
• transition : 过渡时间，默认是 0
• delay : 默认是 0
• limit : 默认是 0.1，当缩放阈值不大于此值时不缩放
• cssMode : 选择 css 缩放方式，默认值为 scale
• allowScoll : 是否允许滚动，默认值为 false

使用 elRectification 矫正 Canvas 热区

// template
<div id="CesiumContainer" class="CesiumContainer" ref="cesium"></div>

// js
import { onMounted } from "vue";
import { elRectification } from "autofit.js";
onMounted(() => {
  elRectification("#CesiumContainer");
});