问题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()
}
}