cesium 在大屏自适应插件下放大位置偏移

放大不在中心距离 可以关闭插件试一下

使用的 vue3-scale-box

复制代码
npm install vue3-scale-box
复制代码
<template>
  <ScaleBox
    :width="1920"
    :height="1080"
    bgc="transparent"
    :delay="100"
    @scaleChange="scaleChange"
    :isFlat="false"
  >
    <div class="ec-demo" id="ec-demo"></div>
  </ScaleBox>
</template>
<script setup>
import ScaleBox from "vue3-scale-box";
</script>
属性
width 宽度 默认 1920
height 高度 默认 1080
bgc 背景颜色 默认 "transparent"
delay自适应缩放防抖延迟时间(ms) 默认 100
isFlat是否启用拉伸模式 默认 false
@scaleChange 缩放值发生改变的方法 可动态获取 scale 改变后的值 注意:拉伸模式下scale值为: [x缩放值, y缩放值];非拉伸模式下scale值为:等比缩放值

存储事件中的缩放值

const scaleChange=(even)=>{

store.commit('scaleChange', even)

}

在使用cesium页面

复制代码
import { useStore } from 'vuex'
const store = useStore()
const isscale = computed(() => store.state.scale)
const resetMapSize = () => {
  let mapContent = document.getElementById("loadingIndicator");
  if (mapContent) {
    mapContent.style.transform = `scale(${1 / isscale.value[0]},${1 / isscale.value[1]
      })`
  }
}

watch(
  () => computed(() => store.state.scale),
  () => {
    resetMapSize()
  }, { deep: true }
);

大致为在通过缩放比再缩放回来

相关推荐
崔璨几秒前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv几秒前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒12 分钟前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
whysqwhw30 分钟前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端
dasseinzumtode1 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰1 小时前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss1 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship1 小时前
网页截图API-Npm工具包分享
前端
Jedi Hongbin1 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix1 小时前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法