chore: 移除废弃的 SgsMapRenderer 组件
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,316 +0,0 @@
|
||||
<template>
|
||||
<view class="sgs-map-renderer">
|
||||
<view ref="containerRef" class="sgs-map-container"></view>
|
||||
|
||||
<view v-if="isLoading" class="sdk-state-overlay">
|
||||
<view class="sdk-state-card">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="sdk-state-title">正在连接 SGS 三维地图</text>
|
||||
<text class="sdk-state-desc">{{ statusMessage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="loadError" class="sdk-state-overlay error-overlay">
|
||||
<view class="sdk-state-card error-card">
|
||||
<text class="sdk-state-title">SGS 地图加载失败</text>
|
||||
<text class="sdk-state-desc">{{ statusMessage }}</text>
|
||||
<view class="retry-btn" @tap="retryLoad">
|
||||
<text class="retry-text">重新连接</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import {
|
||||
dataSourceConfig,
|
||||
getSgsMapTargetOrigin
|
||||
} from '@/config/dataSource'
|
||||
import { SgsMapService } from '@/services/sgs/SgsMapService'
|
||||
import {
|
||||
toAppFloorId,
|
||||
toErrorResult,
|
||||
toFloorLabel,
|
||||
toFocusedResult,
|
||||
toFocusNodeName,
|
||||
toNumericFloorId,
|
||||
type SgsTargetFocusRequest,
|
||||
type SgsTargetFocusResult
|
||||
} from '@/services/sgs/SgsMapEventAdapter'
|
||||
import type {
|
||||
SgsMapEvents
|
||||
} from '@/types/sgs-map-sdk'
|
||||
|
||||
interface FloorOption {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
type ContainerRef = HTMLElement | { $el?: HTMLElement } | null
|
||||
|
||||
type ViewMode = 'overview' | 'floor' | 'multi'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
initialFloorId?: string
|
||||
initialView?: ViewMode
|
||||
floors?: FloorOption[]
|
||||
targetFocus?: SgsTargetFocusRequest | null
|
||||
}>(), {
|
||||
initialFloorId: 'L1',
|
||||
initialView: 'floor',
|
||||
floors: () => [] as FloorOption[],
|
||||
targetFocus: null
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
floorChange: [floorId: string]
|
||||
poiClick: [poi: SgsMapEvents['poiClick']]
|
||||
targetFocus: [result: SgsTargetFocusResult]
|
||||
}>()
|
||||
|
||||
const containerRef = ref<ContainerRef>(null)
|
||||
const isLoading = ref(true)
|
||||
const loadError = ref(false)
|
||||
const statusMessage = ref('正在加载 SDK 脚本与地图基座...')
|
||||
|
||||
let service: SgsMapService | null = null
|
||||
let currentFocusRequestId: number | string | null = null
|
||||
|
||||
const getContainerElement = () => {
|
||||
const container = containerRef.value
|
||||
if (!container || typeof HTMLElement === 'undefined') return null
|
||||
if (container instanceof HTMLElement) return container
|
||||
|
||||
const element = '$el' in container ? container.$el : null
|
||||
return element instanceof HTMLElement ? element : null
|
||||
}
|
||||
|
||||
const disposeService = () => {
|
||||
service?.destroy()
|
||||
service = null
|
||||
}
|
||||
|
||||
const registerEvents = () => {
|
||||
service?.on('floorChanged', (payload) => {
|
||||
emit('floorChange', toAppFloorId(payload.floorId))
|
||||
})
|
||||
|
||||
service?.on('poiClick', (poi) => {
|
||||
emit('poiClick', poi)
|
||||
})
|
||||
|
||||
service?.on('loadError', (error) => {
|
||||
loadError.value = true
|
||||
isLoading.value = false
|
||||
statusMessage.value = error.detail || '地图基座 iframe 加载失败，请检查 VITE_SGS_H5_ENGINE_URL。'
|
||||
})
|
||||
|
||||
service?.on('error', (error) => {
|
||||
loadError.value = true
|
||||
isLoading.value = false
|
||||
statusMessage.value = error.message || error.code || 'SGS Map SDK 运行异常'
|
||||
})
|
||||
}
|
||||
|
||||
const initSdk = async () => {
|
||||
disposeService()
|
||||
isLoading.value = true
|
||||
loadError.value = false
|
||||
statusMessage.value = '正在加载 SDK 脚本与地图基座...'
|
||||
|
||||
await nextTick()
|
||||
const container = getContainerElement()
|
||||
if (!container) {
|
||||
isLoading.value = false
|
||||
loadError.value = true
|
||||
statusMessage.value = '未找到 SGS 地图容器。'
|
||||
return
|
||||
}
|
||||
|
||||
service = new SgsMapService({
|
||||
container,
|
||||
scriptUrl: dataSourceConfig.sgsSdkScriptUrl,
|
||||
sdkUrl: dataSourceConfig.sgsMapEngineUrl,
|
||||
targetOrigin: getSgsMapTargetOrigin(),
|
||||
floorId: toNumericFloorId(props.initialFloorId),
|
||||
timeout: dataSourceConfig.sgsSdkTimeoutMs
|
||||
})
|
||||
|
||||
registerEvents()
|
||||
|
||||
try {
|
||||
await service.init()
|
||||
isLoading.value = false
|
||||
loadError.value = false
|
||||
statusMessage.value = 'SGS 三维地图已连接。'
|
||||
|
||||
if (props.initialView === 'overview' || props.initialView === 'multi') {
|
||||
await service.resetView().catch(() => undefined)
|
||||
}
|
||||
|
||||
if (props.targetFocus) {
|
||||
await focusTargetPoi(props.targetFocus)
|
||||
}
|
||||
} catch (error) {
|
||||
isLoading.value = false
|
||||
loadError.value = true
|
||||
statusMessage.value = error instanceof Error ? error.message : 'SGS Map SDK 初始化失败。'
|
||||
}
|
||||
}
|
||||
|
||||
const switchFloor = async (floorId: string) => {
|
||||
try {
|
||||
await service?.changeFloor(toNumericFloorId(floorId))
|
||||
} catch (error) {
|
||||
loadError.value = true
|
||||
statusMessage.value = error instanceof Error ? error.message : `楼层切换失败：${toFloorLabel(floorId)}`
|
||||
}
|
||||
}
|
||||
|
||||
const focusTargetPoi = async (request: SgsTargetFocusRequest) => {
|
||||
if (currentFocusRequestId === request.requestId) return
|
||||
currentFocusRequestId = request.requestId
|
||||
|
||||
try {
|
||||
await switchFloor(request.floorId)
|
||||
await service?.focusTo(toFocusNodeName(request))
|
||||
emit('targetFocus', toFocusedResult(request))
|
||||
} catch (error) {
|
||||
emit('targetFocus', toErrorResult(request, error))
|
||||
}
|
||||
}
|
||||
|
||||
const showOverview = async () => {
|
||||
await service?.resetView().catch(() => undefined)
|
||||
}
|
||||
|
||||
const showMultiFloor = async () => {
|
||||
await service?.resetView().catch(() => undefined)
|
||||
}
|
||||
|
||||
const disableAutoSwitchTemporarily = () => {
|
||||
// SGS SDK does not expose the local zoom auto-switch contract.
|
||||
}
|
||||
|
||||
const retryLoad = () => {
|
||||
void initSdk()
|
||||
}
|
||||
|
||||
watch(() => props.targetFocus, (request) => {
|
||||
if (request && !isLoading.value && !loadError.value) {
|
||||
void focusTargetPoi(request)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
void initSdk()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
disposeService()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
switchFloor,
|
||||
showOverview,
|
||||
showMultiFloor,
|
||||
disableAutoSwitchTemporarily
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sgs-map-renderer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #eef2f0;
|
||||
}
|
||||
|
||||
.sgs-map-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sdk-state-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(245, 247, 244, 0.82);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.sdk-state-card {
|
||||
width: min(280px, 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 12px 30px rgba(24, 32, 21, 0.12);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-card {
|
||||
border-color: rgba(255, 122, 89, 0.28);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid rgba(31, 35, 41, 0.12);
|
||||
border-top-color: #1f2329;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.sdk-state-title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 700;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.sdk-state-desc {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #626a73;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
min-width: 96px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 14px;
|
||||
border-radius: 17px;
|
||||
background: #1f2329;
|
||||
}
|
||||
|
||||
.retry-text {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user