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

Thekingyu2023-11-17 8:58

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

使用的 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 }
);

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