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 }
);

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

相关推荐
IT_陈寒11 分钟前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码22 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation30 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1236 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木7 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:8 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛9 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼9 小时前
opentype.js 使用与文字渲染
前端·svg·字体