A green wave band time-distance map rendering method and system based on Canvas

Abstract

The present invention provides a Canvas-based green wave band time distance map rendering method, comprising initializing green wave band time distance map parameters, rendering a Canvas required for the green wave band time distance map, and drawing a two-dimensional coordinate axis in the Canvas; determining a drawing direction of a current green wave band intersection according to the initialized green wave band time distance map parameters, wherein the drawing direction of the current green wave band intersection includes a forward and reverse bidirectional green wave band; determining a position of the red and green cycle in the two-dimensional coordinate axis by calculating the red and green cycle of the green wave band, and drawing red and green cycle columns that can represent the cycle state of the current green wave band intersection on the bidirectional green wave band; calculating a time required to reach the adjacent green wave band intersection according to a point set of the current green wave band intersection and an adjacent green wave band intersection and the initialized green wave band time distance map parameters, finding the intersection of the current green wave band intersection and the adjacent green wave band intersection, and drawing a green wave band time distance map; and binding web page related events to the green wave band time distance map. A green wave band time-distance graph rendering method is implemented that can be displayed on a web page, with customized data and linked event changes.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a Canvas-based green wave band time-distance map rendering method and system. Background Art

[0002] A traffic road green wave band time-distance diagram is a chart used to describe traffic signal control. It can be used to evaluate the effectiveness of traffic signal timing adjustments and optimize traffic signal control plans. Existing traffic road green wave band time-distance diagrams are often displayed using simple lines and curves, which has the following drawbacks:

[0003] First, drawing tools are limited and usually require the use of professional traffic engineering software or data visualization tools.

[0004] Second, it is difficult to draw and requires professional knowledge and skills. It is difficult for non-professionals to draw and analyze quickly.

[0005] Third, the display method is relatively simple and difficult to be compatible with different operating systems and browsers.

[0006] Fourth, the interactive experience is poor. Users cannot freely adjust and explore different traffic scheduling plans, and cannot quickly feedback the effects of the optimization plan.

[0007] It can be seen that the existing traffic road green wave belt time distance map lacks a green wave belt time distance map rendering method that can be displayed on a web page, customize data, and link event changes. Summary of the Invention

[0008] The technical problem to be solved by the present invention is how to provide a green wave band time-distance graph rendering method that can be displayed on a web page, customize data, and link event changes.

[0009] In order to solve the above technical problems, the present invention provides a Canvas-based green wave band time-distance map rendering method, including the following methods:

[0010] Initialize the green wave band time-distance map parameters, render the Canvas required for the green wave band time-distance map, and draw a two-dimensional coordinate axis in the Canvas;

[0011] Determining a drawing direction of a current green wave band intersection according to the initialized green wave band time-distance map parameters, wherein the drawing direction of the current green wave band intersection includes forward and reverse bidirectional green wave bands;

[0012] By calculating the red-green cycle of the green wave band, determining the position of the red-green cycle in the two-dimensional coordinate axis, and drawing a red-green cycle column that can represent the cycle state of the current green wave band intersection on the bidirectional green wave band;

[0013] Calculating the time required to reach the adjacent green wave belt intersection based on the point set of the current green wave belt intersection and the adjacent green wave belt intersection and the parameters of the initialized green wave belt time distance map, finding the intersection of the current green wave belt intersection and the adjacent green wave belt intersection, and drawing a green wave belt time distance map; and

[0014] Bind web page related events to the green wave band time interval graph.

[0015] Furthermore, the two-dimensional coordinate axes include an X-axis, a Y-axis, and scales, scale labels, and scale dividing lines on the axes, wherein:

[0016] The X-axis represents the length of the intersection. The position of each green wave intersection on the X-axis is determined by proportional conversion, and then the X-axis scale is drawn. The X-axis scale label is the intersection name, wherein the proportional conversion formula is:

[0017]

[0018] Wherein, d1 is the length of the first green wave intersection, dn is the length of the nth green wave intersection, s is the scale, and c is the position of the current green wave intersection on the X-axis;

[0019] The Y-axis represents time, and the time interval is defined as 100 seconds. The Y-axis scale is drawn, and the Y-axis scale label is the current second. At the same time, a parallel dotted line is drawn from each scale position to the right as the scale dividing line.

[0020] Furthermore, the time required to reach the adjacent green wave belt intersection is calculated based on the point set of the current green wave belt intersection and the adjacent green wave belt intersection and the parameters of the initialized green wave belt time distance map, the intersection of the current green wave belt intersection and the adjacent green wave belt intersection is found, and the green wave belt is drawn, which also includes the following method:

[0021] When the green wave band is a positive green wave band, the point set stores the scale values ​​of all green light positions at the current intersection corresponding to the Y-axis;

[0022] When the green wave band is a reverse green wave band, the point set stores the scale values ​​of all red light positions at the current intersection corresponding to the Y-axis.

[0023] Furthermore, the specific method of drawing the red and green cycle columns that can represent the cycle state of the current green wave band intersection on the bidirectional green wave band includes:

[0024] Starting from the scale of the first green light phase difference time on the Y-axis, the red and green cycles are drawn upward and downward respectively, and the number of red and green cycles drawn upward is the maximum number of cycles plus the extended number of cycles, and the number of red and green cycles drawn downward is the extended number of cycles, wherein the maximum number of cycles is the fixed duration of a certain section of the green wave band divided by the red and green cycles of the intersection, and rounded up, and the extended number of cycles is the number of cycles added on the basis of the maximum number of cycles so that more red and green cycles can be displayed within a fixed duration of a certain section of the green wave band.

[0025] Furthermore, it also includes binding the drag event for the red and green cycle columns, specifically including the following methods:

[0026] First select the red and green cycle columns;

[0027] Drag along the Y-axis direction;

[0028] By monitoring the selected, deselected, and moving events of the Canvas, the difference between the drag offsets before and after is compared to trigger the redrawing of the green wave band time interval diagram.

[0029] Furthermore, the drawing of the green wave band further includes:

[0030] Calculate the running time of the vehicle to the adjacent intersection based on the green wave speed and intersection length of the current intersection;

[0031] Calculating the point intersections of the adjacent intersections according to the running time;

[0032] The rectangle drawn counterclockwise along the overlapping points of the intersection of the adjacent intersections is the green wave belt of the current intersection.

[0033] Furthermore, the green wave band time interval graph is bound to web page related events, and the specific method is as follows:

[0034] Call the getZoom and setZoom events of the Canvas canvas to realize the zooming in and out display of the green wave band on the Canvas canvas;

[0035] By monitoring the mouse:down, mouse:move and mouse:up events of the Canvas canvas, the horizontal drag effect of the green wave band on the Canvas canvas is realized;

[0036] By monitoring the mouse:over and mouse:out events of the Canvas, the display and hiding effects of the information prompt box are achieved. The content of the information prompt box includes the green wave band width, time scale value and green wave band intersection data.

[0037] Furthermore, the parameters of the initialized green wave band time diagram include the length of the green wave band intersection, the signal timing scheme cycle, the forward and reverse green light time, the forward and reverse phase difference, and the forward and reverse vehicle speed.

[0038] A Canvas-based green wave band time-distance map rendering system, comprising:

[0039] A green wave band time-distance map real-time adjustment module is used for users to generate corresponding green wave band time-distance maps in real time according to their needs; and

[0040] The scheme configuration module is used for users to switch between different intersections to view and edit the signal scheme configuration after the green wave band time distance diagram is optimized.

[0041] Compared with the prior art, the present invention has the following beneficial effects:

[0042] The present invention provides a Canvas-based green wave band time-distance map rendering method and system, which realizes a green wave band time-distance map rendering method that can be displayed on a web page, customize data, and link event changes. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 is a flow chart of the present invention;

[0044] Figure 2 It is a structural schematic diagram of the present invention;

[0045] Figure 3 The Canvas display flow chart required for rendering the green wave band time-distance map of the present invention;

[0046] Figure 4 A schematic diagram of obtaining the time-distance intersection of green wave bands at adjacent intersections for the present invention;

[0047] Figure 5 This is a complete display effect diagram of the green wave band time-distance diagram of the present invention;

[0048] Figure 6 This is a diagram showing the effect of the green wave band time interval diagram and the corresponding signal scheme configuration of the present invention. DETAILED DESCRIPTION

[0049] In order to make the technical solution and technical effects of the present invention clearer, the technical solution in the embodiment of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiment. Obviously, the described embodiment is only a part of the embodiment of the present invention, not all of the embodiments.

[0050] like Figure 1-2 As shown, the present invention provides a method for rendering a green wave band time-distance map based on Canvas, comprising:

[0051] Initialize the green wave band time-distance map parameters, render the Canvas required for the green wave band time-distance map, and draw the two-dimensional coordinate axis in the Canvas;

[0052] Determine the drawing direction of the current green wave intersection according to the parameters of the initialized green wave time-distance map, wherein the drawing direction of the current green wave intersection includes a forward green wave, a reverse green wave, and a forward and reverse bidirectional green wave;

[0053] By calculating the red-green cycle of the green wave band, the position of the red-green cycle in the two-dimensional coordinate axis is determined, and a red-green cycle column that can represent the cycle state of the current green wave band intersection on the two-way green wave band is drawn;

[0054] Based on the point set of the current green belt intersection and the adjacent green belt intersection and the parameters of the initialized green belt time distance map, calculate the time required to reach the adjacent green belt intersection, find the intersection of the current green belt intersection and the adjacent green belt intersection, and draw the green belt time distance map; and

[0055] Bind web page related events to the green wave band time-distance graph.

[0056] It should be noted that the present invention obtains green band intersection data by using Axios or Ajax technology sources through an interface call under the Internet HTTP or HTTPS transmission protocol. Green band intersection data includes green band intersection length, signal timing plan period, forward and reverse green light time, forward and reverse phase difference, and forward and reverse vehicle speed.

[0057] In addition, this invention also supports basic and personalized configurations for customizing green wave band time-distance charts. Basic configurations are used to change the canvas's x-axis, y-axis, and mouse hover style, specifically including tooltip, xAxis, and yAxis configuration items. Personalized configurations include, but are not limited to, customizing the canvas background color, green wave band color, and the minimum spacing between adjacent green wave band intersections on the chart.

[0058] Combining the acquired green wave belt intersection data, the basic configuration of the green wave belt time distance map and the personalized configuration, the initialization parameters of the green wave belt time distance map can be constructed.

[0059] The following shows some examples of initializing parameters for the green wave band time-distance diagram (“ / / ” indicates the meaning of the configuration item, and “…” indicates that some parameters are omitted):

[0060]

[0061]

[0062]

[0063] The Canvas required to render the green wave band time-distance map includes the following steps:

[0064] First, according to the parameters of the green wave band time-distance map, draw a Canvas with properties such as width, height, and background color;

[0065] Then, based on the parameters of the green wave band time-distance map, draw the X-axis, Y-axis, and the scale, scale labels, and scale dividing lines on the axis on the Canvas.

[0066] The X-axis represents the length of the intersection in meters (m). The position of each green band intersection on the X-axis is determined by proportional conversion, and then the X-axis scale is drawn. The X-axis scale label is the intersection name. The proportional conversion formula is:

[0067]

[0068] Where d1 is the length of the first green band intersection, dn is the length of the nth green band intersection, s is the scale, which means the actual number of meters represented by one pixel on the web page, and the result c is the position of the current green band intersection on the X-axis;

[0069] The Y-axis represents time in seconds (s). Define the time interval as 100 seconds, then draw the Y-axis scale. The Y-axis scale label is the current second, and draw a parallel dotted line from each scale position to the right as the scale dividing line.

[0070] Drawing a green wave band time-distance map on the Canvas canvas also includes the following steps:

[0071] definition:

[0072] Maximum number of cycles: Divide the fixed duration of a green wave segment by the red-green cycle at the intersection, and then round up to get the maximum number of cycles. Assuming that the fixed duration of a green wave segment is t and the red-green cycle at intersection 1 is s, the formula for calculating the maximum number of cycles is as follows:

[0073] c=Math.ceil(t / s)

[0074] Extended cycle number: The number of cycles increased based on the maximum number of cycles in order to display more red and green cycles within a fixed time;

[0075] Red-green cycle column: A bar chart perpendicular to the X-axis, with red representing red light time and green representing green light time. Each set of red and green fills is a cycle, and multiple cycles can be drawn. The column represents the cycle status of the current green wave band intersection on the positive and negative green wave bands.

[0076] The following is a detailed list of the green wave band drawing process for the two intersections. The steps are as follows:

[0077] S1. Select the drawing direction for the current green wave intersection based on the green wave time-distance map parameter styleMarkCode: 1 - only draw the forward green wave, 2 - only draw the reverse green wave, 3 - two-way green wave;

[0078] S2. Start drawing the red-green cycle column. First, find the scale of the first green light phase difference time on the Y-axis. Starting from this scale, draw the red-green cycle upwards. The number of cycles is the maximum number of cycles plus the number of extended cycles. Then, draw the red-green cycle downwards from the same scale. The number of cycles is the number of extended cycles.

[0079] S3. Bind a drag event to the red and green cycle columns. During the dragging process, redraw the green wave band time-distance diagram according to the drag offset, and update the green wave band width and forward and reverse phase difference data. It should be noted that the red and green cycle columns must be selected before they can be dragged up and down in the vertical direction (i.e., along the Y axis). By monitoring the selected, deselected, and moving events of the Canvas canvas, the difference between the two drag offsets is compared to trigger the redrawing of the green wave band time-distance diagram.

[0080] S4. Calculate the time required to reach the next intersection based on the point set of the current and adjacent green wave belt intersections and the parameters of the green wave belt time distance map, find the intersection of the green wave belts of the two intersections, and draw the green wave belt; when the green wave belt is in the positive direction, the point set stores the scale values ​​of the Y axis corresponding to all green light positions at the current intersection; when the green wave belt is in the negative direction, the point set stores the scale values ​​of the Y axis corresponding to all red light positions at the current intersection; Figure 4 As shown in the figure, based on the green wave speed and intersection length of the current intersection, we can calculate the running time runTimeY of the vehicle to reach the next intersection. Based on runTimeY, we can calculate the point intersection of adjacent intersections. The rectangle drawn counterclockwise along the overlapping points is the green wave belt of the current intersection.

[0081] Preferably, after the green wave band time-distance graph is rendered, the present invention also provides a method for binding web page related events to the green wave band time-distance graph, which is specifically performed as follows:

[0082] Call the getZoom and setZoom events of the Canvas canvas to realize the zooming in and out display of the green wave band on the Canvas canvas;

[0083] By monitoring the mouse:down, mouse:move, and mouse:up events of the Canvas canvas, the horizontal drag effect of the green wave band on the Canvas canvas is achieved;

[0084] By monitoring the mouse:over and mouse:out events of the Canvas canvas, the display and hiding effects of the information prompt box are realized. The content of the information prompt box includes the green wave band width, time scale value and green wave band intersection data.

[0085] The final green wave band time-distance map is shown in the following figure: Figure 5 shown.

[0086] like Figure 3 As shown, the present invention also provides a complete monitoring process for the life cycle of the green band time interval diagram.

[0087] like Figure 6 As shown, the present invention also discloses a rendering system for a traffic road green wave band time-distance map, comprising the following modules:

[0088] Green band time-distance diagram real-time adjustment module: used for users to generate corresponding green band time-distance diagrams in real time according to their needs. Specifically, it allows users to edit the forward and reverse bandwidth, forward and reverse green light duration, and forward and reverse phase difference input boxes, or directly drag the red and green cycle columns to achieve real-time adjustment, so as to generate corresponding green band time-distance diagrams according to needs; click the "Refresh Plan" button to preview the green band plan configuration.

[0089] Scheme configuration module: used for users to switch between different intersections to view and edit the signal scheme configuration after the green wave band time distance map is optimized. Specifically, it allows users to switch between different intersections to view the signal scheme configuration after the green wave band time distance map is optimized; at the same time, users can also edit these scheme configurations and redraw the green wave band time distance map by clicking the "Refresh Time Distance Map" button.

[0090] While embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions, and variations may be made to these embodiments without departing from the principles and spirit of the invention, and that the scope of the invention is defined by the appended claims and their equivalents.

Claims

1. A method for rendering a green wave band time-distance map based on Canvas, characterized in that: This includes the following methods: Initialize the green wave band time-distance map parameters, render the Canvas required for the green wave band time-distance map, and draw a two-dimensional coordinate axis in the Canvas; Determining a drawing direction of a current green wave band intersection according to the initialized green wave band time-distance map parameters, wherein the drawing direction of the current green wave band intersection includes forward and reverse bidirectional green wave bands; By calculating the red and green cycles of the green wave band, the position of the red and green cycles in the two-dimensional coordinate axis is determined, and a red and green cycle column that can represent the cycle state of the current green wave band intersection on the bidirectional green wave band is drawn; a drag event is bound to the red and green cycle column, and a green wave band time interval diagram is redrawn according to the drag offset; Calculating the time required to reach the adjacent green wave belt intersection based on the point set of the current green wave belt intersection and the adjacent green wave belt intersection and the parameters of the initialized green wave belt time distance map, finding the intersection of the current green wave belt intersection and the adjacent green wave belt intersection, and drawing a green wave belt time distance map; and Bind web page related events to the green wave band time interval graph.

2. The method for rendering a green wave band time-distance map based on Canvas according to claim 1, characterized in that: The two-dimensional coordinate axes include the X-axis, the Y-axis, and the scales, scale labels, and scale dividing lines on the axes, where: The X-axis represents the length of the intersection. The position of each green wave intersection on the X-axis is determined by proportional conversion, and then the X-axis scale is drawn. The X-axis scale label is the intersection name, wherein the proportional conversion formula is: in, is the length of the first green wave intersection, For the The length of the green wave intersection, is the scale, is the position of the current green wave intersection on the X axis; The Y-axis represents time, and the time interval is defined as 100 seconds. The Y-axis scale is drawn, and the Y-axis scale label is the current second. At the same time, a parallel dotted line is drawn from each scale position to the right as the scale dividing line.

3. The method for rendering a green wave band time-distance map based on Canvas according to claim 2, characterized in that: According to the point set of the current green wave belt intersection and the adjacent green wave belt intersection and the parameters of the initialized green wave belt time distance map, the time required to reach the adjacent green wave belt intersection is calculated, the intersection of the current green wave belt intersection and the adjacent green wave belt intersection is found, and the green wave belt is drawn, wherein the following method is also included: When the green wave band is a positive green wave band, the point set stores the scale values ​​of all green light positions at the current intersection corresponding to the Y-axis; When the green wave band is a reverse green wave band, the point set stores the scale values ​​of all red light positions at the current intersection corresponding to the Y-axis.

4. The method for rendering a green wave band time-distance map based on Canvas according to claim 1, characterized in that: The specific method of drawing the red and green cycle columns that can represent the cycle state of the current green wave band intersection on the two-way green wave band includes: Starting from the scale of the first green light phase difference time on the Y-axis, the red and green cycles are drawn upwards and downwards respectively, and the number of red and green cycles drawn upwards is the maximum number of cycles plus the extended number of cycles, and the number of red and green cycles drawn downwards is the extended number of cycles, wherein the maximum number of cycles is the fixed duration of a certain section of the green wave band divided by the red and green cycles of the intersection, and rounded up, and the extended number of cycles is the number of cycles added on the basis of the maximum number of cycles so that more red and green cycles can be displayed within a fixed duration of a certain section of the green wave band.

5. The method for rendering a green wave band time-distance map based on Canvas according to claim 4, characterized in that: It also includes binding the drag event for the red and green cycle columns, specifically including the following methods: First select the red and green cycle columns; Drag along the Y-axis direction; By monitoring the selected, deselected, and moving events of the Canvas, the difference in the drag offset before and after is compared to trigger the redrawing of the green wave band time interval diagram.

6. The method for rendering a green wave band time-distance map based on Canvas according to claim 1, characterized in that: Drawing the green wave band includes: Calculate the running time of the vehicle to the adjacent intersection based on the green wave speed and intersection length of the current intersection; Calculating the point intersections of the adjacent intersections according to the running time; The rectangle drawn counterclockwise along the overlapping points of the intersection of the adjacent intersections is the green wave belt of the current intersection.

7. The method for rendering a green wave band time-distance map based on Canvas according to claim 1, characterized in that: Bind web page related events to the green wave band time-distance graph. The specific method is as follows: Calling the getZoom and setZoom events of the Canvas canvas to realize the zooming in and out display of the green wave band on the Canvas canvas; By monitoring the mouse:down, mouse:move, and mouse:up events of the Canvas, a horizontal drag effect of the green wave band on the Canvas is achieved; By monitoring the mouse:over and mouse:out events of the Canvas, the display and hiding effects of the information prompt box are achieved. The content of the information prompt box includes the green wave band width, time scale value and green wave band intersection data.

8. The method for rendering a green wave band time-distance map based on Canvas according to claim 1, characterized in that: The parameters of the initialized green wave band time diagram include the length of the green wave band intersection, the signal timing scheme cycle, the forward and reverse green light time, the forward and reverse phase difference, and the forward and reverse vehicle speed.

9. A Canvas-based green wave band time-distance map rendering system for implementing the method according to any one of claims 1 to 8, characterized in that: include: Green wave band time distance map real-time adjustment module, used for users to generate corresponding green wave band time distance map in real time according to their needs; as well as The scheme configuration module is used for users to switch between different intersections to view and edit the signal scheme configuration after the green wave band time distance diagram is optimized.

Images