traffic-diagram

v1.1.9

Published

7 days ago

Vue components for visualizing traffic diagrams.

0High
0Medium
0Low

zhoumeng1219

vue lane traffic greenwave intersection

traffic-diagram

Vue components for visualizing traffic diagrams, including lane schematics and green wave animations.

Features

Traffic Lane Component: Interactive lane schematic visualization with click events and multiple selection support
Green Wave Component: Animated green wave effect for traffic signal timing visualization
Responsive Design: Adjustable dimensions and styles
PC Platform Support: Optimized for desktop applications

Effect Preview

Lane Schematic Diagram

展示交通路口的车道布局和流向
支持不同方向车道的可视化
显示车道拥堵状态

Interactive Operation

支持点击选择车道
支持车道方向配置
动态更新车道状态

Installation

npm install traffic-diagram

// main.js
import TrafficDiagram from 'traffic-diagram';
import 'traffic-diagram/lib/index.scss';

Vue.use(TrafficDiagram);

Dependencies

fabric@^5.5.2 - Canvas manipulation library
lodash - Utility functions

Components

Traffic Lane Component

Interactive lane schematic visualization for traffic intersections.

Usage

<template>
  <traffic-lane
    :lane-diagram-data="laneDiagramData"
    :lane-width="16"
    :canvas-height="300"
    :style="customStyle"
    @choose-lane="handleLaneSelection"
    multiple
    click-event
  ></traffic-lane>
</template>

<script>
export default {
  data() {
    return {
      laneDiagramData: [
        // Lane data array (see below for format)
      ],
      customStyle: {
        // Custom styles
      }
    };
  },
  methods: {
    handleLaneSelection(selectedLanes) {
      // Handle lane selection event
      console.log('Selected lanes:', selectedLanes);
    }
  }
};
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | lane-diagram-data | Array | [] | 画布数据，包含车道ID、方向、拥堵值等信息字段描述：- id: string - 车道ID- laneDirCode: string - 车道方向编码- laneDirName: string - 车道方向名称- inDirection: string - 车道入口方向- laneNo: number - 车道编号- congestionFactor: number - 拥堵值 | | canvas-height | Number | 300 | 画布高度 | | config-type | String | '' | 配置项，只有进行车道-流向配置时可在canvas图上点击替换方向图标- Possible values: - LaneConfig | | lane-width | Number | 22 | 车道宽度 | | lane-divider-length | Number | 80 | 车道分隔线长度 | | lane-directions | Array | 预设方向数组 | 车道方向配置，包含方向名称和图标默认值：左转、直行、右转、直左、左右、直右、直左右、掉头、其他 | | max-congestion-value | Number | 1 | 拥堵值最大值，用于拥堵颜色计算 | | click-event | Boolean | false | 是否启用点击事件 | | congestion-factor-visible | Boolean | false | 是否在车道上显示拥堵指标值 | | multiple | Boolean | false | 是否支持多选车道 | | selected-lane | String | '' | 已被选择的车道 | | lane-active-color | String | '#27ffd5' | 车道激活颜色 | | style | Object | {} | 组件自定义样式 |

Events

| Event | Description | Payload | |-------|-------------|---------| | choose-lane | 多选时车道选择事件，当用户选择或取消选择车道时触发 | Array - 已选择的车道名称数组 | | select-lane | 单选时车道选择事件，当用户点击车道时触发 | Object - 包含选中车道信息格式：{ laneDirCode: string } | | change-lane-dir | 车道方向变更事件，当用户在配置模式下更改车道方向时触发 | Object - 包含车道编码和新方向格式：{ laneDirCode: string, laneDirName: string } |

Data Format

// laneDiagramData format example
const laneDiagramData = [
  {
    "id": "unique-id",
    "laneDirCode": "102",
    "laneDirName": "直行",
    "inDirection": "东",
    "laneNo": "01",
    "congestionFactor": 0.75
  }
  // More lane objects...
];

// Lane direction codes
const laneDirections = [
  { "id": "1", "laneDirCode": "101", "laneDirName": "左转", "remark": "L" },
  { "id": "2", "laneDirCode": "102", "laneDirName": "直行", "remark": "S" },
  { "id": "3", "laneDirCode": "103", "laneDirName": "右转", "remark": "R" },
  { "id": "4", "laneDirCode": "104", "laneDirName": "直左", "remark": "S_L" },
  { "id": "5", "laneDirCode": "105", "laneDirName": "直右", "remark": "S_R" },
  { "id": "6", "laneDirCode": "109", "laneDirName": "左右", "remark": "L_R" },
  { "id": "7", "laneDirCode": "106", "laneDirName": "直左右", "remark": "L_S_R" },
  { "id": "8", "laneDirCode": "107", "laneDirName": "掉头", "remark": "T" },
  { "id": "9", "laneDirCode": "108", "laneDirName": "其他", "remark": "O" }
];

Green Wave Component

Animated green wave effect visualization for traffic signals.

Effect Preview

展示交通信号灯的绿波效果，直观呈现信号配时方案
支持正向和反向绿波双向可视化
动态显示绿波在路口间的传播动画
可视化路口距离、绿灯时长和相位差参数
支持调整绿波速度和间隔时间
支持拖拽交互调整绿波参数
实时计算和展示绿波协调数据

交互示意图

Usage

<template>
  <green-wave
    :cross-data="crossData"
    :canvas-height="500"
    :forward-direction="true"
    :interval="70"
    :style="customStyle"
    @compute-data="handleComputeData"
    @update-cross-params="handleUpdateParams"
  ></green-wave>
</template>

<script>
export default {
  data() {
    return {
      crossData: [
        // Green wave intersection data (see below for format)
      ],
      customStyle: {
        // Custom styles
      }
    };
  },
  methods: {
    handleComputeData(data) {
      // Handle computed green wave data
      console.log('Computed data:', data);
    },
    handleUpdateParams(params) {
      // Handle updated intersection parameters
      console.log('Updated params:', params);
    }
  }
};
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | cross-data | Array | [] | 绿波路口数据字段描述：- crossId: string - 路口ID- crossRoadName: string - 路口名称- crossDistance: number - 路口距离- orderNumber: number - 排序编号- forwardGreen: number - 路口正向车道绿灯时长(A路口 -> B路口)- reverseGreen: number - 路口反向车道绿灯时长(B路口 -> A路口)- forwardSpeed: number - 路口正向车道速度(A路口 -> B路口)- reverseSpeed: number - 路口反向车道速度(B路口 -> A路口)- forwardPhaseDiff: number - 路口正向车道相位差时长(A路口 -> B路口)- reversePhaseDiff: number - 路口反向车道相位差时长(B路口 -> A路口)- greenFlag: boolean - 绿波标志- phaseDiffFlag: boolean - 相位标志 | | canvas-height | Number | 500 | 画布高度 | | forward-direction | Boolean | true | 是否正向(从上到下，从左到右为正方向) | | interval | Number | 70 | 绿波周期间隔(单位：秒) | | forward-color | String | '#058213' | 正向绿波颜色 | | backward-color | String | '#0eed28' | 反向绿波颜色 | | drag-stroke-width | Number | 5 | 拖拽线宽 | | single-wave-width | Number | 2 | 单绿波宽度值越小宽度越小，值越大宽度越大 | | x-axis-bottom | Number | 30 | X轴底部间距 | | y-axis-top | Number | 30 | Y轴顶部间距 | | y-axis-width | Number | 200 | Y轴文本刻度宽度 | | loop-time | Number | 0 | 绿波循环次数- Possible values: - 0 - 默认值，自动计算 - 1 - 循环一次 | | style | Object | {} | 组件自定义样式 |

Events

| Event | Description | Payload | |-------|-------------|---------| | compute-data | 计算绿波数据事件，当绿波参数变化时触发 | Object - 包含绿波组数据格式：{ groups_forward: Array, groups_back: Array, rate: Number, current_group?: Object } | | update-cross-params | 更新路口参数事件，当拖拽调整绿波时触发 | Object - 包含更新的参数格式：{ rate: Number, current_group: Object, direction: String } |

Data Format

// crossData format example
const crossData = [
  {
    "crossId": "cross-1",
    "crossRoadName": "路口1",
    "crossDistance": 500,
    "orderNumber": 1,
    "forwardGreen": 30,
    "reverseGreen": 35,
    "forwardSpeed": 40,
    "reverseSpeed": 35,
    "forwardPhaseDiff": 0,
    "reversePhaseDiff": 10,
    "greenFlag": true,
    "phaseDiffFlag": true
  },
  {
    "crossId": "cross-2",
    "crossRoadName": "路口2",
    "crossDistance": 800,
    "orderNumber": 2,
    "forwardGreen": 35,
    "reverseGreen": 30,
    "forwardSpeed": 45,
    "reverseSpeed": 40,
    "forwardPhaseDiff": 15,
    "reversePhaseDiff": 5,
    "greenFlag": true,
    "phaseDiffFlag": true
  }
  // More intersection objects...
];

Project Structure

├── src/
│   ├── components/
│   │   ├── traffic-lane/       # Traffic lane component
│   │   └── green-wave/          # Green wave component
│   ├── libs/                    # Utility libraries
│   ├── assets/                  # Static assets
│   └── index.js                 # Main export file
├── dist/                        # Built library files
└── package.json                 # Project configuration

Development

Build the Library

npm run build:lib

Run Development Server

npm run serve

Run Tests

npm run test

Linting

npm run eslint
npm run stylelint

Future Components

This library is actively being developed. Future components will include:

Traffic Signal Component
Vehicle Flow Visualization
Intersection Simulation
Real-time Data Integration

License

MIT

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

traffic-diagram

Features

Effect Preview

Lane Schematic Diagram

Interactive Operation

Installation

Dependencies

Components

Traffic Lane Component

Usage

Props

Events

Data Format

Green Wave Component

Effect Preview

Usage

Props

Events

Data Format

Project Structure

Development

Build the Library

Run Development Server

Run Tests

Linting

Future Components

License

Contributing