vue obv模型缩放点击错位和切换卡顿问题解决

问题1 前端obv模型缩放展示时出现点击错位问题
场景:大屏开发页面使用scale进行屏幕尺寸自适应展示,展示模型时发现模型会出现点击偏移。
解决方法:将模型封装为单独组件并设置路由,使用iframe进行模型展示。
代码 html

<iframe
      className="map_iframe"
      width="728px"
      height="441px"
      :src="getHost + '/modelRoute'"
      frameBorder="0"
></iframe>

js

const getHost = computed(() => {
    return window.location.origin
 })

问题2 模型切换时页面出现卡顿
场景:初始化模型加载流畅,在多次切换模型后出现卡顿问题
解决方法:在每次切换模型时使用window.location.reload()强制刷新页面

const modelIndex = useStorage('modelIndex', 1) // 当前的模型索引,需要存入localstorage
const currentModelIndex = ref(-1) // 模型索引
/**
切换模型
type:切换的模型索引
isRefresh: 是否需要刷新(判断是当前页面的模型切换
*/
const changeModel = (type, isRefresh = false) => {
  // console.log(type)

  currentModelIndex.value = type

  if (isRefresh) { 
    modelIndex.value = type // 先存入再刷新
    location.reload()
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容