优化首页建筑外观斜视展示与交互体验

- 首页外观模型使用建筑主体包围盒进行相机适配
- 外观首屏改为标准 Y 轴向上的建筑斜视角
- 优化室内三维操作提示与交互反馈

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
lyf
2026-06-29 14:24:51 +08:00
parent c9f32714aa
commit 04c908b9e7
2 changed files with 639 additions and 137 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -53,6 +53,7 @@
@poi-click="handleGuidePoiClick"
@selection-clear="handleGuideSelectionClear"
@auto-switch="handleAutoSwitch"
@tool-click="handleIndoorToolClick"
@map-tap="handleMapTapForOutdoorNav"
>
<template #overlay>
@@ -339,10 +340,10 @@ const indoorLayerMode = computed<LayerDisplayMode>(() => (
))
const indoorCameraTools = computed(() => (is3DMode.value ? ['复位', '俯视', '斜视'] : []))
const showIndoorGestureHint = ref(true)
const indoorGestureHintText = ref('拖动旋转 · 双指缩放 · 点选标记查看位置')
const indoorGestureHintText = ref('单指旋转 · 双指缩放/平移 · 点选标记查看位置')
let indoorGestureHintTimer: ReturnType<typeof setTimeout> | null = null
const showIndoorHint = (text = '拖动旋转 · 双指缩放 · 点选标记查看位置', durationMs = 5200) => {
const showIndoorHint = (text = '单指旋转 · 双指缩放/平移 · 点选标记查看位置', durationMs = 5200) => {
indoorGestureHintText.value = text
showIndoorGestureHint.value = is3DMode.value
@@ -621,7 +622,7 @@ const handleFloorChange = (floor: string) => {
indoorView.value = 'floor'
selectedGuidePoi.value = null
isPoiCardCollapsed.value = false
showIndoorHint(`已切换到 ${floor}可拖动旋转查看`, 3200)
showIndoorHint(`已切换到 ${floor}单指旋转、双指可平移`, 3200)
console.log('切换楼层:', floor)
}
@@ -649,6 +650,18 @@ const handleAutoSwitch = (event: { from: 'overview' | 'floor'; to: 'overview' |
showIndoorHint(event.to === 'floor' ? '已进入单层视图,可点选标记查看位置' : '已返回建筑外观', 3600)
}
const handleIndoorToolClick = (tool: string) => {
if (!is3DMode.value) return
if (tool === '复位') {
showIndoorHint('已复位视角,单指旋转、双指可平移', 2800)
} else if (tool === '俯视') {
showIndoorHint('已切换俯视视角,可点选标记查看位置', 2800)
} else if (tool === '斜视') {
showIndoorHint('已切换斜视视角,可查看空间层次', 2800)
}
}
const handleGuidePoiClick = (poi: GuideRenderPoi) => {
selectedGuidePoi.value = poi
isPoiCardCollapsed.value = false
@@ -1511,29 +1524,30 @@ const handleExplainBack = () => {
.indoor-gesture-hint {
position: absolute;
top: clamp(174px, 23vh, 228px);
top: clamp(136px, 19vh, 190px);
left: 50%;
max-width: calc(100% - 136px);
min-height: 34px;
padding: 7px 12px;
max-width: calc(100% - 112px);
min-height: 38px;
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: rgba(21, 23, 19, 0.76);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
background: rgba(9, 15, 10, 0.9);
border: 1px solid rgba(255, 235, 59, 0.36);
border-radius: 999px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
transform: translateX(-50%);
pointer-events: none;
z-index: 34;
z-index: 58;
}
.indoor-gesture-text {
min-width: 0;
font-size: 12px;
line-height: 17px;
font-weight: 500;
color: #ffffff;
font-size: 13px;
line-height: 18px;
font-weight: 700;
color: #f4ff2f;
text-align: center;
white-space: normal;
}