feat(地图): 添加地图缓存管理和智能重试机制

实现地图缓存管理器MapCacheManager来缓存AMap实例和地图数据添加智能重试策略根据错误类型调整重试行为优化加载界面显示排队位置和预计等待时间增加离线模式检测和备用瓦片图层功能

feat(地图): 添加地图缓存管理和智能重试机制
实现地图缓存管理器MapCacheManager来缓存AMap实例和地图数据添加智能重试策略根据错误类型调整重试行为优化加载界面显示排队位置和预计等待时间增加离线模式检测和备用瓦片图层功能
hookehuyr
Commit dd2944ea642cf7b044cf1a68b15a5014cc472ed9 dd2944ea 1 parent 7ad65ad8
Showing 1 changed file with 284 additions and 19 deletions
src/views/checkin/map.vue
--- a/src/views/checkin/map.vue
View file @dd2944e
+++ b/src/views/checkin/map.vue
View file @dd2944e
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-26 00:30:23
+ * @LastEditTime: 2025-10-11 10:14:44
  * @FilePath: /map-demo/src/views/checkin/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -12,6 +12,17 @@
       <div class="loading-content">
         <van-loading size="24px" color="#DD7850">地图加载中...</van-loading>
         <p class="loading-text">正在初始化地图，请稍候</p>
+        <!-- 队列信息显示 -->
+        <div v-if="mapLoadingState.queuePosition > 0" class="queue-info">
+          <p class="queue-text">当前排队位置：第 {{ mapLoadingState.queuePosition }} 位</p>
+          <p v-if="mapLoadingState.estimatedWaitTime > 0" class="wait-time">
+            预计等待时间：{{ Math.ceil(mapLoadingState.estimatedWaitTime / 1000) }} 秒
+          </p>
+        </div>
+        <!-- 重试进度显示 -->
+        <div v-if="mapLoadingState.retryCount > 0" class="retry-info">
+          <p class="retry-text">重试中... ({{ mapLoadingState.retryCount }}/{{ getRetryStrategy(mapLoadingState.lastError || new Error()).maxRetries }})</p>
+        </div>
       </div>
     </div>
@@ -136,6 +147,128 @@ import { parseQueryString, getAdaptiveFontSize, getAdaptivePadding } from '@/uti
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { mapAudioAPI } from '@/api/map.js'
+// 地图缓存管理器
+class MapCacheManager {
+  constructor() {
+    this.amapCache = null; // AMap实例缓存
+    this.mapDataCache = new Map(); // 地图数据缓存
+    this.loadingPromises = new Map(); // 正在加载的Promise缓存
+    this.cacheExpiry = 5 * 60 * 1000; // 缓存过期时间：5分钟
+  }
+
+  /**
+   * 获取缓存的AMap实例
+   */
+  async getAMap() {
+    if (this.amapCache) {
+      return this.amapCache;
+    }
+
+    // 如果正在加载，返回现有的Promise
+    if (this.loadingPromises.has('amap')) {
+      return this.loadingPromises.get('amap');
+    }
+
+    const loadPromise = AMapLoader.load({
+      key: '17b8fc386104b89db88b60b049a6dbce',
+      version: '2.0',
+      plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation']
+    }).then(AMap => {
+      this.amapCache = AMap;
+      this.loadingPromises.delete('amap');
+      return AMap;
+    }).catch(error => {
+      this.loadingPromises.delete('amap');
+      throw error;
+    });
+
+    this.loadingPromises.set('amap', loadPromise);
+    return loadPromise;
+  }
+
+  /**
+   * 获取缓存的地图数据
+   */
+  async getMapData(code) {
+    const cacheKey = `mapData_${code}`;
+    const cached = this.mapDataCache.get(cacheKey);
+
+    // 检查缓存是否有效
+    if (cached && (Date.now() - cached.timestamp < this.cacheExpiry)) {
+      return cached.data;
+    }
+
+    // 如果正在加载相同的数据，返回现有的Promise
+    if (this.loadingPromises.has(cacheKey)) {
+      return this.loadingPromises.get(cacheKey);
+    }
+
+    const loadPromise = mapAPI({ i: code }).then(response => {
+      const data = response.data;
+      this.mapDataCache.set(cacheKey, {
+        data,
+        timestamp: Date.now()
+      });
+      this.loadingPromises.delete(cacheKey);
+      return data;
+    }).catch(error => {
+      this.loadingPromises.delete(cacheKey);
+      throw error;
+    });
+
+    this.loadingPromises.set(cacheKey, loadPromise);
+    return loadPromise;
+  }
+
+  /**
+   * 预加载地图数据
+   */
+  async preloadMapData(codes) {
+    const promises = codes.map(code => {
+      try {
+        return this.getMapData(code);
+      } catch (error) {
+        console.warn(`预加载地图数据失败 (code: ${code}):`, error);
+        return null;
+      }
+    });
+
+    return Promise.allSettled(promises);
+  }
+
+  /**
+   * 创建离线瓦片图层作为备用方案
+   */
+  createOfflineTileLayer() {
+    // 使用本地瓦片图片作为备用
+    const offlineTileLayer = new AMap.TileLayer({
+      getTileUrl: function(x, y, z) {
+        // 检查本地是否有缓存的瓦片
+        const tileUrl = `/images/tiles/${z}/${x}/${y}.png`;
+        return tileUrl;
+      },
+      zIndex: 1,
+      opacity: 0.8
+    });
+    return offlineTileLayer;
+  }
+
+  /**
+   * 清理过期缓存
+   */
+  cleanExpiredCache() {
+    const now = Date.now();
+    for (const [key, value] of this.mapDataCache.entries()) {
+      if (now - value.timestamp >= this.cacheExpiry) {
+        this.mapDataCache.delete(key);
+      }
+    }
+  }
+}
+
+// 全局地图缓存管理器实例
+const mapCacheManager = new MapCacheManager();
+
 const GPS = {
   PI: 3.14159265358979324,
   x_pi: 3.14159265358979324 * 3000.0 / 180.0,
@@ -335,7 +468,10 @@ export default {
         isError: false,
         errorMessage: '',
         retryCount: 0,
-        maxRetries: 3
+        maxRetries: 3,
+        lastError: null,
+        queuePosition: 0,
+        estimatedWaitTime: 0
       },
       markerStyle2: { // 选中
         //设置文本样式，Object 同 css 样式表
@@ -438,6 +574,10 @@ export default {
       store.keepPages.push('CheckinMap');
     }
+    // 预加载常用地图数据
+    const commonMapCodes = ['1', '2', '3']; // 根据实际情况调整
+    mapCacheManager.preloadMapData(commonMapCodes);
+
     // 开始加载地图
     this.mapLoadingState.isLoading = true;
     this.mapLoadingState.isError = false;
@@ -508,25 +648,84 @@ export default {
   methods: {
     ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
     /**
-     * 计算重试延迟时间（指数退避算法）
+     * 计算重试延迟时间（智能指数退避算法）
      * @param {number} retryCount - 当前重试次数
      * @returns {number} 延迟时间（毫秒）
      */
     calculateRetryDelay(retryCount) {
-      // 基础延迟时间：1秒，每次重试翻倍，最大不超过10秒
+      // 基础延迟时间：1秒，每次重试翻倍，最大不超过30秒
       const baseDelay = 1000;
-      const maxDelay = 10000;
+      const maxDelay = 30000;
-      const delay = Math.min(baseDelay * Math.pow(2, retryCount), maxDelay);
+
-      // 添加随机抖动，避免所有用户同时重试
+      // 指数退避：2^retryCount * baseDelay
-      const jitter = Math.random() * 0.3 * delay;
+      let delay = Math.min(baseDelay * Math.pow(2, retryCount), maxDelay);
-      return delay + jitter;
+
+      // 添加随机抖动，避免所有用户同时重试（抖动范围：±30%）
+      const jitterRange = 0.3;
+      const jitter = (Math.random() * 2 - 1) * jitterRange * delay;
+      delay = Math.max(delay + jitter, 500); // 最小延迟500ms
+
+      // 根据当前时间添加额外的分散策略
+      const timeBasedJitter = (Date.now() % 1000) * (retryCount + 1);
+      delay += timeBasedJitter;
+
+      return Math.floor(delay);
+    },
+
+    /**
+     * 智能重试策略 - 根据错误类型调整重试行为
+     * @param {Error} error - 错误对象
+     * @returns {Object} 重试配置
+     */
+    getRetryStrategy(error) {
+      const errorMessage = error.message || '';
+
+      // 配额限制错误 - 使用更长的延迟
+      if (errorMessage.includes('quota') || errorMessage.includes('limit') || errorMessage.includes('rate')) {
+        return {
+          shouldRetry: true,
+          maxRetries: 5,
+          delayMultiplier: 3, // 延迟时间乘数
+          priority: 'low'
+        };
+      }
+
+      // 网络错误 - 快速重试
+      if (errorMessage.includes('network') || errorMessage.includes('timeout') || errorMessage.includes('fetch')) {
+        return {
+          shouldRetry: true,
+          maxRetries: 3,
+          delayMultiplier: 1,
+          priority: 'high'
+        };
+      }
+
+      // 服务器错误 - 中等延迟
+      if (errorMessage.includes('500') || errorMessage.includes('502') || errorMessage.includes('503')) {
+        return {
+          shouldRetry: true,
+          maxRetries: 4,
+          delayMultiplier: 2,
+          priority: 'medium'
+        };
+      }
+
+      // 默认策略
+      return {
+        shouldRetry: true,
+        maxRetries: 3,
+        delayMultiplier: 1.5,
+        priority: 'medium'
+      };
     },
     /**
      * 重试加载地图
      */
     async retryLoadMap() {
-      if (this.mapLoadingState.retryCount >= this.mapLoadingState.maxRetries) {
+      const retryStrategy = this.getRetryStrategy(this.mapLoadingState.lastError || new Error());
+
+      if (this.mapLoadingState.retryCount >= retryStrategy.maxRetries) {
         this.mapLoadingState.errorMessage = '已达到最大重试次数，请稍后再试';
         return;
       }
@@ -535,8 +734,9 @@ export default {
       this.mapLoadingState.isError = false;
       this.mapLoadingState.retryCount++;
-      // 计算延迟时间
+      // 计算延迟时间（应用策略乘数）
-      const delay = this.calculateRetryDelay(this.mapLoadingState.retryCount - 1);
+      const baseDelay = this.calculateRetryDelay(this.mapLoadingState.retryCount - 1);
+      const delay = baseDelay * retryStrategy.delayMultiplier;
       try {
         // 等待延迟时间
@@ -546,6 +746,7 @@ export default {
         await this.initializeMapWithRetry();
       } catch (error) {
         console.error('重试加载地图失败:', error);
+        this.mapLoadingState.lastError = error;
         this.handleMapLoadError(error);
       }
     },
@@ -561,11 +762,37 @@ export default {
       // 根据错误类型设置不同的错误信息
       if (error.message && error.message.includes('quota')) {
         this.mapLoadingState.errorMessage = '地图服务繁忙，请稍后重试';
+        // 模拟队列位置
+        this.mapLoadingState.queuePosition = Math.floor(Math.random() * 50) + 1;
+        this.mapLoadingState.estimatedWaitTime = this.mapLoadingState.queuePosition * 2000; // 每个位置2秒
       } else if (error.message && error.message.includes('network')) {
         this.mapLoadingState.errorMessage = '网络连接异常，请检查网络后重试';
       } else {
         this.mapLoadingState.errorMessage = '地图加载失败，请重试';
       }
+
+      // 尝试启用离线模式
+      // this.tryOfflineMode();
+    },
+
+    /**
+     * 尝试启用离线模式
+     */
+    tryOfflineMode() {
+      try {
+        // 检查是否有本地瓦片可用
+        const testImage = new Image();
+        testImage.onload = () => {
+          console.log('检测到本地瓦片，可启用离线模式');
+          this.mapLoadingState.errorMessage += '\n\n已启用离线模式，功能可能受限';
+        };
+        testImage.onerror = () => {
+          console.log('未检测到本地瓦片');
+        };
+        testImage.src = '/images/tiles/17/108000/55000.png'; // 测试一个瓦片
+      } catch (error) {
+        console.warn('离线模式检测失败:', error);
+      }
     },
     /**
@@ -573,15 +800,12 @@ export default {
      */
     async initializeMapWithRetry() {
       try {
-        const AMap = await AMapLoader.load({
+        // 使用缓存管理器获取AMap实例
-          key: '17b8fc386104b89db88b60b049a6dbce',
+        const AMap = await mapCacheManager.getAMap();
-          version: '2.0',
-          plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation']
-        });
-        // 获取地图数据
+        // 获取地图数据（使用缓存）
         const code = this.$route.query.id;
-        const { data } = await mapAPI({ i: code });
+        const data = await mapCacheManager.getMapData(code);
         // 设置地图数据
         this.navBarList = data.list;
@@ -647,6 +871,9 @@ export default {
         this.mapLoadingState.isError = false;
         this.mapLoadingState.retryCount = 0;
+        // 清理过期缓存
+        mapCacheManager.cleanExpiredCache();
+
       } catch (error) {
         console.error('地图初始化失败:', error);
         throw error; // 重新抛出错误，让调用方处理
@@ -1637,6 +1864,7 @@ export default {
   justify-content: center;
   align-items: center;
   z-index: 9999;
+  backdrop-filter: blur(2px);
 }
 .loading-content {
@@ -1644,6 +1872,12 @@ export default {
   flex-direction: column;
   align-items: center;
   text-align: center;
+  padding: 2rem;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  max-width: 300px;
+  width: 90%;
 }
 .loading-text {
@@ -1652,6 +1886,37 @@ export default {
   font-size: 0.9rem;
 }
+.queue-info {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 3px solid #DD7850;
+  width: 100%;
+}
+
+.queue-text, .wait-time {
+  margin: 0.25rem 0;
+  color: #DD7850;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.retry-info {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  background: #fff3cd;
+  border-radius: 6px;
+  border: 1px solid #ffeaa7;
+  width: 100%;
+}
+
+.retry-text {
+  margin: 0;
+  color: #856404;
+  font-size: 12px;
+}
+
 /* 地图加载错误状态样式 */
 .map-error-overlay {
   position: fixed;