Parcourir la source

feat: 重新设计干线和勤务路线坐标,确保沿真实道路走向

- 新增trunkRoutes和dutyRoutes固定路线数据,替代从mock数据筛选
- 干线协调:3条横向路线,沿新华东街、运河大街、九棵树东路等主干道
- 勤务路线:2条纵向路线,沿新华北路、玉桥东路等主干道
- 横向路线保持同一纬度,纵向路线保持同一经度,避免斜穿建筑
- 坐标范围集中在地图中心区域(116.642-116.684, 39.897-39.922)
- 路口名称使用通州真实道路名,增强真实感
- 修改classifyIntersectionsByStatus和drawStaticRoutes方法使用固定路线数据
sequoia tungfang il y a 1 mois
Parent
commit
5788806ed7
1 fichiers modifiés avec 87 ajouts et 24 suppressions
  1. 87 24
      src/components/TongzhouTrafficMap.vue

+ 87 - 24
src/components/TongzhouTrafficMap.vue

@@ -84,7 +84,55 @@ export default {
       // 真实路口数据
       intersectionData: [],
       // 按状态分类的路口数据
-      statusIntersections: {}
+      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() {
@@ -176,22 +224,22 @@ export default {
 
     // 将真实路口数据按状态类型分类
     classifyIntersectionsByStatus() {
-      // 首先为勤务路线和干线协调各分配4条数据
-      const routeData = this.intersectionData.slice(0, 8);
-      const remainingData = this.intersectionData.slice(8);
+      // 干线协调使用固定的路线数据
+      const trunkData = this.trunkRoutes.flat();
+      // 勤务路线使用固定的路线数据
+      const dutyData = this.dutyRoutes.flat();
+      // 排除路线数据后,剩余数据分配给其他状态
+      const remainingData = this.intersectionData;
       
-      // 计算正常状态数据需要分配的状态类型数量(11-2-3=6)
       const normalStatusCount = 6;
       const abnormalStatusCount = 3;
       const chunkSize = Math.floor(remainingData.length / (normalStatusCount + abnormalStatusCount));
-      
-      // 计算异常状态的最大数量(不超过10个)
       const maxAbnormalCount = 10;
 
       this.statusIntersections = {
         "中心计划": remainingData.slice(0, chunkSize),
-        "干线协调": routeData.slice(0, 4),
-        "勤务路线": routeData.slice(4, 8),
+        "干线协调": trunkData,
+        "勤务路线": dutyData,
         "定周期控制": remainingData.slice(chunkSize, chunkSize * 2),
         "感应控制": remainingData.slice(chunkSize * 2, chunkSize * 3),
         "自适应控制": remainingData.slice(chunkSize * 3, chunkSize * 4),
@@ -288,20 +336,35 @@ export default {
           try {
             const intersections = this.statusIntersections[config.name] || [];
             const markers = [];
-            let polyline = null;
-
-            // 路线逻辑:对于路线类型,创建连接线
-            if (["干线协调", "勤务路线"].includes(config.name)) {
-              if (intersections.length >= 2) {
-                const path = intersections.map(item => [item["位置-经度"], item["位置-纬度"]]);
-                polyline = new this.AMap.Polyline({
-                  path: path,
-                  strokeColor: config.color,
-                  strokeWeight: 6,
-                  strokeOpacity: 0.6,
-                  zIndex: 15
-                });
-              }
+            const polylines = [];
+
+            // 路线逻辑:对于路线类型,按分段创建连接线
+            if (config.name === "干线协调") {
+              this.trunkRoutes.forEach(route => {
+                if (route.length >= 2) {
+                  const path = route.map(item => [item["位置-经度"], item["位置-纬度"]]);
+                  polylines.push(new this.AMap.Polyline({
+                    path: path,
+                    strokeColor: config.color,
+                    strokeWeight: 6,
+                    strokeOpacity: 0.6,
+                    zIndex: 15
+                  }));
+                }
+              });
+            } else if (config.name === "勤务路线") {
+              this.dutyRoutes.forEach(route => {
+                if (route.length >= 2) {
+                  const path = route.map(item => [item["位置-经度"], item["位置-纬度"]]);
+                  polylines.push(new this.AMap.Polyline({
+                    path: path,
+                    strokeColor: config.color,
+                    strokeWeight: 6,
+                    strokeOpacity: 0.6,
+                    zIndex: 15
+                  }));
+                }
+              });
             }
 
             // 为每个路口创建标记
@@ -317,7 +380,7 @@ export default {
               markers.push(this.createTrafficLightMarker(position, markerConfig));
             });
 
-            const overlays = [...markers, polyline].filter(Boolean);
+            const overlays = [...markers, ...polylines].filter(Boolean);
             this.routeGroups[config.name] = overlays;
 
             if (this.isMapReady() && this.activeLegends.includes(config.name)) {