/** * 地图状态监听相关的 composable */ import { watch, type Ref } from 'vue' interface WatchOptions { showMarkers: Ref showTrajectories: Ref showFences: Ref showDrawFences: Ref setMarkersVisible: (visible: boolean) => void setTrajectoriesVisible: (visible: boolean, markers?: any[]) => void setFencesVisible: (visible: boolean) => void toggleFenceDrawing: ( isDrawing: boolean, onComplete?: (coordinates: [number, number][]) => void ) => void updateMarkers: (markers: any[]) => void markers: any[] } export const useMapWatchers = (options: WatchOptions) => { const { showMarkers, showTrajectories, showFences, showDrawFences, setMarkersVisible, setTrajectoriesVisible, setFencesVisible, toggleFenceDrawing, updateMarkers, markers } = options /** * 设置标记显示状态监听器 */ const setupMarkersWatcher = () => { return watch(showMarkers, (show) => { if (show) { // 显示标记时,隐藏轨迹 if (showTrajectories.value) { showTrajectories.value = false } } setMarkersVisible(show) }) } /** * 设置轨迹显示状态监听器 */ const setupTrajectoriesWatcher = () => { return watch(showTrajectories, (show) => { if (show) { // 显示轨迹时,隐藏标记 if (showMarkers.value) { showMarkers.value = false } setTrajectoriesVisible(true, markers) } else { setTrajectoriesVisible(false) // 隐藏轨迹时,显示标记 if (!showMarkers.value) { showMarkers.value = true } } }) } /** * 设置围栏显示状态监听器 */ const setupFencesWatcher = () => { return watch(showFences, (show) => { setFencesVisible(show) }) } /** * 设置围栏绘制状态监听器 */ const setupDrawFencesWatcher = () => { return watch(showDrawFences, (isDrawing) => { if (!isDrawing) { // 当关闭绘制时,停止绘制操作 toggleFenceDrawing(false) } }) } /** * 设置标记数据变化监听器 */ const setupMarkersDataWatcher = () => { return watch( markers, (newMarkers) => { if (newMarkers && newMarkers.length > 0) { console.log('Markers data changed, updating markers:', newMarkers.length) updateMarkers(newMarkers) } }, { deep: true, immediate: false } ) } /** * 初始化所有监听器 */ const setupAllWatchers = () => { const watchers = [ setupMarkersWatcher(), setupTrajectoriesWatcher(), setupFencesWatcher(), setupDrawFencesWatcher(), setupMarkersDataWatcher() ] // 返回清理函数 return () => { watchers.forEach((stopWatcher) => { if (typeof stopWatcher === 'function') { stopWatcher() } }) } } return { setupMarkersWatcher, setupTrajectoriesWatcher, setupFencesWatcher, setupDrawFencesWatcher, setupMarkersDataWatcher, setupAllWatchers } }