問題1 前端obv模型縮放展示時出現(xiàn)點(diǎn)擊錯位問題
場景:大屏開發(fā)頁面使用scale進(jìn)行屏幕尺寸自適應(yīng)展示,展示模型時發(fā)現(xiàn)模型會出現(xiàn)點(diǎn)擊偏移叼丑。
解決方法:將模型封裝為單獨(dú)組件并設(shè)置路由崖叫,使用iframe進(jìn)行模型展示齿尽。
代碼 html
<iframe
className="map_iframe"
width="728px"
height="441px"
:src="getHost + '/modelRoute'"
frameBorder="0"
></iframe>
js
const getHost = computed(() => {
return window.location.origin
})
問題2 模型切換時頁面出現(xiàn)卡頓
場景:初始化模型加載流暢继榆,在多次切換模型后出現(xiàn)卡頓問題
解決方法:在每次切換模型時使用window.location.reload()
強(qiáng)制刷新頁面
const modelIndex = useStorage('modelIndex', 1) // 當(dāng)前的模型索引栈虚,需要存入localstorage
const currentModelIndex = ref(-1) // 模型索引
/**
切換模型
type:切換的模型索引
isRefresh: 是否需要刷新(判斷是當(dāng)前頁面的模型切換
*/
const changeModel = (type, isRefresh = false) => {
// console.log(type)
currentModelIndex.value = type
if (isRefresh) {
modelIndex.value = type // 先存入再刷新
location.reload()
}
}