Sfoglia il codice sorgente

优化地图组件,删除无用代码并添加必要注释

sequoia tungfang 4 settimane fa
parent
commit
575ee820b2
1 ha cambiato i file con 6 aggiunte e 67 eliminazioni
  1. 6 67
      src/components/TongzhouTrafficMap.vue

+ 6 - 67
src/components/TongzhouTrafficMap.vue

@@ -58,8 +58,7 @@ export default {
       map: null,
       infoWindow: null,
 
-      trafficLayer: null, // 存储交通图层实例
-      isTrafficVisible: true, // 控制开关状态
+
 
       routeGroups: {},
       polylines: [],
@@ -88,54 +87,7 @@ export default {
       intersectionData: [],
       // 按状态分类的路口数据
       statusIntersections: {},
-      // 固定的干线路线数据(3条横向路线,每条5-6个路口)
-      // 坐标基于通州真实道路走向设计,确保路线落在真实道路上,避免横穿建筑
-      trunkRoutes: [
-        // 第一条横向干线(北侧)- 沿新华东街/通胡大街主干道走向
-        [
-          { "路口编号": "GK-H1-01", "路口名称": "新华东街与永顺西街交叉路口", "位置-经度": 116.642, "位置-纬度": 39.917 },
-          { "路口编号": "GK-H1-02", "路口名称": "新华东街与新华北路交叉路口", "位置-经度": 116.652, "位置-纬度": 39.917 },
-          { "路口编号": "GK-H1-03", "路口名称": "新华东街与车站路交叉路口", "位置-经度": 116.663, "位置-纬度": 39.917 },
-          { "路口编号": "GK-H1-04", "路口名称": "新华东街与玉桥西路交叉路口", "位置-经度": 116.674, "位置-纬度": 39.917 },
-          { "路口编号": "GK-H1-05", "路口名称": "通胡大街与芙蓉东路交叉路口", "位置-经度": 116.682, "位置-纬度": 39.917 },
-        ],
-        // 第二条横向干线(中间)- 沿运河西大街/运河东大街主干道走向
-        [
-          { "路口编号": "GK-H2-01", "路口名称": "运河西大街与通惠南路交叉路口", "位置-经度": 116.643, "位置-纬度": 39.907 },
-          { "路口编号": "GK-H2-02", "路口名称": "运河西大街与新华南路交叉路口", "位置-经度": 116.653, "位置-纬度": 39.907 },
-          { "路口编号": "GK-H2-03", "路口名称": "运河大街与车站路交叉路口", "位置-经度": 116.663, "位置-纬度": 39.907 },
-          { "路口编号": "GK-H2-04", "路口名称": "运河东大街与玉桥东路交叉路口", "位置-经度": 116.673, "位置-纬度": 39.907 },
-          { "路口编号": "GK-H2-05", "路口名称": "运河东大街与紫运中路交叉路口", "位置-经度": 116.683, "位置-纬度": 39.907 },
-        ],
-        // 第三条横向干线(南侧)- 沿九棵树东路/云景南大街主干道走向
-        [
-          { "路口编号": "GK-H3-01", "路口名称": "九棵树西路与通马路交叉路口", "位置-经度": 116.644, "位置-纬度": 39.897 },
-          { "路口编号": "GK-H3-02", "路口名称": "九棵树东路与翠屏西路交叉路口", "位置-经度": 116.654, "位置-纬度": 39.897 },
-          { "路口编号": "GK-H3-03", "路口名称": "九棵树东路与梨园路交叉路口", "位置-经度": 116.664, "位置-纬度": 39.897 },
-          { "路口编号": "GK-H3-04", "路口名称": "云景南大街与玉桥西路交叉路口", "位置-经度": 116.674, "位置-纬度": 39.897 },
-          { "路口编号": "GK-H3-05", "路口名称": "云景南大街与运河西大街交叉路口", "位置-经度": 116.684, "位置-纬度": 39.897 },
-        ],
-      ],
-      // 固定的勤务路线数据(2条纵向路线,每条5-6个路口)
-      // 坐标基于通州真实道路走向设计,确保路线落在真实道路上,避免横穿建筑
-      dutyRoutes: [
-        // 第一条纵向勤务路线(西侧)- 沿新华北路/新华南路主干道走向
-        [
-          { "路口编号": "QW-V1-01", "路口名称": "新华北路与通燕高速交叉路口", "位置-经度": 116.652, "位置-纬度": 39.922 },
-          { "路口编号": "QW-V1-02", "路口名称": "新华北路与永顺南街交叉路口", "位置-经度": 116.652, "位置-纬度": 39.917 },
-          { "路口编号": "QW-V1-03", "路口名称": "新华南路与新华东街交叉路口", "位置-经度": 116.652, "位置-纬度": 39.912 },
-          { "路口编号": "QW-V1-04", "路口名称": "新华南路与运河西大街交叉路口", "位置-经度": 116.652, "位置-纬度": 39.907 },
-          { "路口编号": "QW-V1-05", "路口名称": "通马路与九棵树西路交叉路口", "位置-经度": 116.652, "位置-纬度": 39.897 },
-        ],
-        // 第二条纵向勤务路线(东侧)- 沿玉桥东路/紫运中路主干道走向
-        [
-          { "路口编号": "QW-V2-01", "路口名称": "玉桥东路与通胡大街交叉路口", "位置-经度": 116.673, "位置-纬度": 39.922 },
-          { "路口编号": "QW-V2-02", "路口名称": "玉桥东路与运河东大街交叉路口", "位置-经度": 116.673, "位置-纬度": 39.917 },
-          { "路口编号": "QW-V2-03", "路口名称": "玉桥东路与梨园南街交叉路口", "位置-经度": 116.673, "位置-纬度": 39.912 },
-          { "路口编号": "QW-V2-04", "路口名称": "紫运中路与运河东大街交叉路口", "位置-经度": 116.673, "位置-纬度": 39.907 },
-          { "路口编号": "QW-V2-05", "路口名称": "紫运中路与临河里路交叉路口", "位置-经度": 116.673, "位置-纬度": 39.897 },
-        ],
-      ]
+
     };
   },
   mounted() {
@@ -227,13 +179,7 @@ export default {
 
     // 将真实路口数据按状态类型分类
     classifyIntersectionsByStatus() {
-      // 干线协调使用固定的路线数据
-      const trunkData = this.trunkRoutes.flat();
-      // 勤务路线使用固定的路线数据
-      const dutyData = this.dutyRoutes.flat();
-      // 排除路线数据后,剩余数据分配给其他状态
       const remainingData = this.intersectionData;
-
       const normalStatusCount = 6;
       const abnormalStatusCount = 3;
       const chunkSize = Math.floor(remainingData.length / (normalStatusCount + abnormalStatusCount));
@@ -304,21 +250,12 @@ export default {
 
         this.AMap = AMap;
         this.map = new AMap.Map(this.$refs.mapContainer, {
-          zoom: 13.8,
+          zoom: 14.2,
           mapStyle: "amap://styles/darkblue",
           center: [116.663, 39.905], // 通州区中心
         });
 
-        this.trafficLayer = new AMap.TileLayer.Traffic({
-          autoRefresh: true, // 是否自动刷新,默认为false
-          interval: 180,     // 刷新间隔,单位秒
-          zIndex: 10         // 确保交通线在底层,勤务/干线协调线(zIndex: 15)在其上方
-        });
 
-        // 如果默认开启,则添加
-        if (this.isTrafficVisible) {
-          this.map.add(this.trafficLayer);
-        }
 
         // 建议在地图加载完成后再画线
         this.map.on('complete', () => {
@@ -331,7 +268,9 @@ export default {
       }
     },
 
-    // 1. 修改 drawStaticRoutes 方法
+    // 绘制静态路线和标记
+    // 对于普通状态,从 mock 数据加载路口标记
+    // 对于路线类(干线协调和勤务路线),使用高德地图路线规划绘制路线和密集点位
     drawStaticRoutes() {
       if (!this.isMapReady()) return;