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

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

相关推荐
Mintopia20 小时前
轻量化AIGC模型在移动端Web应用的适配技术
前端·javascript·aigc
Mintopia20 小时前
Next.js CI/CD 基础(GitHub Actions)
前端·javascript·next.js
小朋友,你是否有很多问号?21 小时前
Spark10- RDD转DataFrame的三种方式
大数据·javascript·spark
Wiktok21 小时前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii6621 小时前
html.
前端
掘金安东尼21 小时前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃21 小时前
react context如何使用
前端·javascript·react.js
GDAL21 小时前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
IT_陈寒21 小时前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
小谭鸡米花21 小时前
uni小程序中使用Echarts图表
前端·小程序·echarts