|
|
@@ -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;
|
|
|
|