Explorar o código

feat: 开启地图实时交通展示

- 新增trafficLayer数据属性,用于保存实时交通图层引用
- 新增enableTrafficLayer方法,创建并添加AMap.TileLayer.Traffic实时交通图层
- 配置autoRefresh: true,自动刷新交通数据
- 在地图加载完成后自动开启实时交通展示
- 调整图层zIndex为10,确保在底图之上、标记点之下
sequoia tungfang hai 4 semanas
pai
achega
2e54a85491
Modificáronse 1 ficheiros con 14 adicións e 1 borrados
  1. 14 1
      src/components/TongzhouTrafficMap.vue

+ 14 - 1
src/components/TongzhouTrafficMap.vue

@@ -57,6 +57,7 @@ export default {
       AMap: null,
       map: null,
       infoWindow: null,
+      trafficLayer: null,
       routeGroups: {},
       polylines: [],
       privateStyle: {
@@ -257,13 +258,25 @@ export default {
         });
 
         this.map.on('complete', () => {
-          if (!this._isDestroyed) this.drawStaticRoutes();
+          if (!this._isDestroyed) {
+            this.drawStaticRoutes();
+            this.enableTrafficLayer();
+          }
         });
       } catch (err) {
         console.error('地图加载失败:', err);
       }
     },
 
+    enableTrafficLayer() {
+      if (!this.isMapReady() || !this.AMap.TileLayer) return;
+      this.trafficLayer = new this.AMap.TileLayer.Traffic({
+        zIndex: 10,
+        autoRefresh: true
+      });
+      this.map.add(this.trafficLayer);
+    },
+
     drawStaticRoutes() {
       if (!this.isMapReady()) return;