优化首页建筑外观斜视展示与交互体验
- 首页外观模型使用建筑主体包围盒进行相机适配 - 外观首屏改为标准 Y 轴向上的建筑斜视角 - 优化室内三维操作提示与交互反馈 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user