Method and system for dynamically drawing two-dimensional expressway based on real-time data driving canvas

Abstract

The application relates to the technical field of traffic state visualization, in particular to a method and system for dynamically drawing a two-dimensional highway based on real-time data driving Canvas, which comprises the following steps: acquiring highway geographic information data, constructing a road topology model and converting the road topology model into Canvas vector path data, and establishing a road geometry cache; receiving a real-time traffic data stream; establishing a layered rendering architecture comprising at least a static base layer and a dynamic traffic layer; and establishing a rendering cycle, in each frame of which the following steps are executed: a data updating stage, in which traffic states are extracted, coordinate conversion is carried out, kinematic interpolation compensation is performed, standardized traffic entity objects and real-time positions are generated; and a rendering and drawing stage, in which the static base layer is drawn once by using path caching, the dynamic traffic layer is locally redrawn by using a dirty rectangle, and the rendering mode is dynamically adjusted according to data load and a viewport level; and high-performance, low-delay and fine real-time visualization of highway traffic states is realized.

Description

Technical Field

[0001] This application relates to the field of traffic condition visualization technology, specifically to a method and system for dynamically drawing two-dimensional highways using real-time data-driven Canvas. Background Technology

[0002] With the rapid development of intelligent transportation systems and vehicle-to-everything (V2X) technology, the demand for real-time monitoring and visualization of highway traffic conditions is increasing. Traditional traffic monitoring systems mostly use static maps overlaid with simple icons to display road condition information, which has the following technical shortcomings: (1) DOM-based map rendering or traditional grid map solutions suffer from low frame rates when processing large-scale dynamic traffic elements, making it difficult to meet the smoothness requirements of real-time monitoring. When the number of vehicle entities reaches tens of thousands, traditional solutions will experience significant stuttering and latency.

[0003] (2) Existing solutions mostly use polling mechanisms to obtain traffic data, resulting in a significant time delay between data updates and screen rendering, which makes it impossible to achieve true real-time data-driven visualization. Dynamic changes in traffic conditions cannot be reflected on the screen in a timely manner, affecting the timeliness of monitoring.

[0004] (3) Lack of refined visualization of vehicle micro-behavior, road topology and traffic flow characteristics. Traditional solutions usually use simple lines and colors to represent road conditions, which cannot truly reproduce the motion of vehicles and the geometry of roads.

[0005] (4) It is difficult to flexibly adapt to the changing needs of different road geometries, lane configurations and traffic scenarios. When the road topology changes or new traffic elements need to be added, the modification cost of traditional solutions is high and the cycle is long.

[0006] HTML5 Canvas technology provides high-performance bitmap rendering capabilities, but how to efficiently combine it with real-time traffic data streams to achieve dynamic visualization of large-scale highway scenarios remains a technical challenge that needs to be addressed. Summary of the Invention

[0007] To address the aforementioned issues, this invention provides a method and system for dynamically drawing two-dimensional highways using real-time data-driven Canvas, aiming to solve the technical problems of insufficient rendering performance, data synchronization delay, and monotonous visual representation in existing highway traffic visualization technologies.

[0008] In a first aspect, the technical solution of the present invention provides a method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas, comprising the following steps: Acquire geographic information data of highways, construct a road topology model, convert the road topology model into vector path data in the Canvas coordinate system, and establish a road geometry cache; Establish a long-lived web socket connection to the traffic data source to receive real-time traffic data streams; Initialize the Canvas rendering context and establish a layered rendering architecture, which includes at least a static base layer and a dynamic traffic layer. Establish a rendering loop, executing the data update phase, collision detection phase, rendering and drawing phase, and state synchronization phase sequentially in each frame: During the data update phase, the current traffic entity state is extracted from the real-time traffic data stream. After coordinate transformation and kinematic interpolation compensation, the standardized traffic entity object of the current frame and its real-time position in the Canvas coordinate system are generated. During the collision detection phase, spatial relationships between vehicle entities are quickly detected and conflict areas are identified based on spatial hash grids or quadtree indexes. During the rendering stage, for the static base layer, a path caching technique is used to render it all at once based on the road geometry cache; for the dynamic traffic layer, a dirty rectangle local redraw optimization strategy is adopted, which only renders the areas in the canvas that need to be redrawn, and the rendering method is dynamically adjusted according to the data load and viewport level. During the state synchronization phase, the rendering state of the current frame is fed back to the data management module.

[0009] During the rendering phase, the rendering method is dynamically adjusted based on the data load and viewport level. It can adaptively switch rendering strategies under different data volumes and different scaling levels to ensure stable operation of the system in various scenarios.

[0010] As a preferred embodiment of the technical solution of the present invention, the road topology model includes the sequence of latitude and longitude nodes of the road centerline, lane configuration information, interchange structure and layout of ancillary facilities; the lane configuration information includes the number of lanes, lane width, lane type and speed limit parameters.

[0011] This provides a complete data foundation for the subsequent establishment of road geometry cache, enabling the rendered highways to realistically reflect the lane structure, interchanges and other complex traffic facilities of the actual road, and improving the accuracy and refinement of the visualization.

[0012] As a preferred embodiment of the technical solution of the present invention, the step of converting the road topology model into vector path data in the Canvas coordinate system and establishing a road geometry cache includes: The latitude and longitude node sequence of the road centerline is smoothly interpolated using cubic spline curves to generate a continuous and differentiable road reference line; the nodes on the road reference line are converted into planar coordinate points in the Canvas local coordinate system through Mercator projection; the lane boundary lines are generated by offsetting the planar coordinate points to both sides according to the lane width parameter; and a road geometry cache is established based on the planar coordinate points and the lane boundary lines.

[0013] By using cubic spline curves to smoothly interpolate the latitude and longitude node sequence of the road centerline, a continuous and differentiable road reference line is generated, eliminating possible inflection points of broken lines in the original data and making the road curve smoother and more natural. The geographic coordinates are converted into Canvas plane coordinates through Mercator projection, ensuring that the angles are not distorted. By offsetting to both sides according to the lane width parameter to generate lane boundary lines, it can automatically adapt to roads with different numbers of lanes, significantly improving the automation and geometric accuracy of road modeling.

[0014] As a preferred embodiment of the technical solution of the present invention, a dual-buffer mechanism is adopted to manage the real-time data stream: The front-end buffer is used to receive network data packets and perform preliminary decoding, while the back-end buffer is used to aggregate data by time window and fill in missing frames using a linear interpolation algorithm; the data update stage extracts traffic entity status from the back-end buffer.

[0015] By employing a dual-buffer mechanism to manage the real-time data stream, the front-end buffer is responsible for receiving network data packets and performing preliminary decoding, while the back-end buffer aggregates data according to time windows and fills in missing frames using a linear interpolation algorithm. This effectively solves the problem of data discontinuity caused by network jitter and data packet loss, ensuring the continuity and temporal consistency of the data stream and providing stable and reliable data input for the rendering loop.

[0016] As a preferred embodiment of the present invention, the data update stage extracts the traffic entity status from the backend buffer. The data update stage extracts the traffic entity status from the backend buffer. The rendering status feedback during the state synchronization phase includes: the actual rendering position of each traffic entity in the current frame, the perspective change parameters generated by user interaction, and the conflict area information identified during the collision detection phase; the data management module updates the position attributes of the standardized traffic entity objects according to the feedback rendering status, and generates traffic congestion warnings based on the conflict area information.

[0017] By limiting the data update phase to extract traffic entity status from the backend buffer, it is clarified that the data source for the data update phase is stable data after aggregation and interpolation, rather than raw and potentially incomplete network data packets. This ensures the integrity and temporal consistency of the traffic entity status used in the data update phase and avoids location jumps or screen jitter caused by using raw data.

[0018] As a preferred embodiment of the technical solution of the present invention, the area requiring redrawing is determined using a dirty rectangle local redrawing optimization strategy, specifically including: The rendering result of the previous frame is compared with the content to be rendered in the current frame to determine the changed area; in each frame, the newly added changed area is merged with the dirty rectangle of the previous frame to form the area that needs to be redrawn in the current frame; after the redraw is completed, the dirty rectangle record is cleared.

[0019] By comparing the rendering result of the previous frame with the content to be rendered in the current frame to determine the changed areas, each frame merges the newly added changed areas with the dirty rectangles of the previous frame to form the area that needs to be redrawn in the current frame. After redrawing, the dirty rectangle record is cleared, realizing incremental accumulation management of dirty rectangles. This mechanism effectively avoids the fragmentation problem of redrawing areas caused by continuous vehicle movement, further reducing the redrawing area and improving rendering performance.

[0020] As a preferred embodiment of the technical solution of the present invention, the rendering method is dynamically adjusted according to the data load and viewport level, including aggregate rendering mode and detail level switching; The aggregate rendering mode is as follows: when the vehicle density exceeds a preset threshold, the road space is divided into grid cells, the number of vehicles and average speed in each grid are counted, the grid is rendered in the form of a heat map, and individual vehicle sprites are hidden. The level of detail switching is as follows: based on the viewport scaling level, when the viewport scaling level is less than a preset threshold, a simplified geometric model is used to render the vehicle; otherwise, a fine model is enabled.

[0021] When vehicle density exceeds a preset threshold, the road space is divided into grid cells. The number of vehicles and average speed within each grid are counted, and the grid is rendered as a heatmap, while individual vehicle sprites are hidden. This avoids performance bottlenecks caused by rendering a massive number of vehicle sprites, while visually presenting traffic flow density and speed distribution in a heatmap format.

[0022] Based on the viewport zoom level, when the viewport zoom level is less than a preset threshold (i.e., viewing from a distance), a simplified geometric model is used to render the vehicle; otherwise, a detailed model is used. This strategy reduces the rendering complexity of a single vehicle when viewing from a distance, while ensuring the detailed representation of the vehicle when viewing from close distance.

[0023] As a preferred embodiment of the technical solution of the present invention, it further includes a spatiotemporal trajectory playback step: Historical traffic data is encoded into a compact binary format in a time series manner, supporting random access and forward / reverse playback based on the time axis, with the same rendering loop being called during playback.

[0024] By encoding historical traffic data into a compact binary format based on a time series, it supports random access and forward / reverse playback based on the timeline, with the same rendering loop being used for rendering during playback. This feature unifies the rendering pipeline for real-time monitoring and historical playback, eliminating the need to develop two separate rendering systems. At the same time, the compact binary encoding significantly reduces the storage space of historical data, and the random access capability allows for quick jumps to the traffic status at any point in time, meeting the multi-dimensional needs of traffic management.

[0025] As a preferred embodiment of the technical solution of the present invention, the layered rendering architecture further includes an effects overlay layer for rendering traffic event signs, traffic flow heatmaps and environmental effects, and an interactive response layer for handling user perspective changes, element selection and information pop-up interaction. The static base layer is used to render roadbeds, markings, guardrails, and fixed facilities; the dynamic traffic layer is used to realize the dynamic position update and shape rendering of vehicles based on the standardized traffic entity objects; the special effects overlay layer is used to render traffic event signs, traffic flow heatmaps, and environmental effects; and the interactive response layer is used to handle user perspective changes, element selection, and information pop-up interaction.

[0026] By clearly defining the layered rendering architecture, which also includes special effects overlay layers and interactive response layers, and defining the rendering content of each layer, independent updates of each layer are achieved without interference, facilitating the independent evolution and maintenance of functional modules.

[0027] The interactive response layer handles user perspective changes, element selection, and information pop-up interactions, supporting viewpoint operations such as panning, zooming, and rotating, as well as interactive functions such as clicking to select traffic elements, thus improving the system's usability and user experience. The special effects overlay layer renders traffic event markers, traffic flow heatmaps, and environmental effects, overlaying event information and traffic analysis results on top of basic road and vehicle rendering. This allows monitoring personnel to intuitively identify congested areas and traffic event locations, enhancing the decision support capabilities of traffic monitoring.

[0028] Secondly, the present invention also provides a system for dynamically drawing two-dimensional highways based on real-time data-driven Canvas, comprising: The data acquisition module is used to acquire geographic information data of the highway, construct a road topology model, convert the road topology model into vector path data in the Canvas coordinate system, and establish a road geometry cache. The real-time communication module is used to establish a long-lived web socket connection with the traffic data source and receive real-time traffic data streams. The rendering architecture module is used to initialize the Canvas rendering context and establish a layered rendering architecture, which includes at least a static base layer and a dynamic traffic layer. The rendering loop module is used to establish the rendering loop, which sequentially executes the data update phase, collision detection phase, rendering and drawing phase, and state synchronization phase in each frame: During the data update phase, the current state of traffic entities is extracted from the real-time traffic data stream. After coordinate transformation and kinematic interpolation compensation, standardized traffic entity objects for the current frame and their real-time positions in the Canvas coordinate system are generated. In the collision detection phase, spatial relationships between vehicle entities are quickly detected and conflict areas are identified based on spatial hash grids or quadtree indexes. In the rendering stage, for the static base layer, a path caching technique is used to draw it all at once based on the road geometry cache; for the dynamic traffic layer, a dirty rectangle local redraw optimization strategy is adopted, which only draws the areas in the canvas that need to be redrawn, and the rendering method is dynamically adjusted according to the data load and viewport level. During the state synchronization phase, the rendering state of the current frame is fed back to the data management module.

[0029] As can be seen from the above technical solutions, this application has the following advantages: By establishing a road geometry cache and using path caching technology to draw the static base layer once, the overhead of repeatedly constructing road graphic data every frame is avoided; at the same time, a dirty rectangle local redraw optimization strategy is adopted for the dynamic traffic layer, drawing only the areas in the canvas that need to be redrawn, which greatly reduces the number of drawing calls and the drawing area of ​​the Canvas 2D API. Real-time traffic data streams are received through a WebSocket long connection, and coordinate transformation and kinematic interpolation compensation are performed in conjunction with the data update stage in the rendering loop, achieving end-to-end latency from millisecond-level data update to screen presentation. By constructing a road topology model and converting it into vector path data, the road geometry features of the highway are realistically reproduced; through kinematic interpolation compensation, smooth animation of vehicle micro-behavior is achieved. Attached Figure Description

[0030] To more clearly illustrate the technical solution of this application, the accompanying drawings used in the description will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0031] Figure 1This is a flowchart illustrating the method provided in an embodiment of the present invention.

[0032] Figure 2 A block diagram of a system provided in an embodiment of the present invention. Detailed Implementation

[0033] To make the purpose, features, and advantages of this application more apparent and understandable, specific embodiments and accompanying drawings will be used to clearly and completely describe the technical solution protected by this application. Obviously, the embodiments described below are only some embodiments of this application, and not all embodiments. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0034] Unless otherwise defined, all technical and scientific terms used in this application have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains. The terminology used in this application and in the specification of this invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention.

[0035] In this embodiment of the invention, abbreviations and key terms are defined as follows: Canvas (HTML Canvas Element): The HTML canvas element (a 2D / 3D graphics drawing interface in the HTML5 standard).

[0036] WebSocket (WebSocket Protocol): Web socket protocol (a full-duplex communication protocol based on TCP). In this application, it is also referred to as web socket.

[0037] API (Application Programming Interface): Application programming interface.

[0038] LOD (Level of Detail): Level of detail (multi-resolution rendering technique in computer graphics).

[0039] WGS84 (World Geodetic System 1984): The World Geodetic System of 1984 (a globally used geographic coordinate standard).

[0040] Real-time data-driven: This refers to a technical model where the system uses continuously flowing real-time traffic data as the core input to directly drive the update of the visualization rendering process, rather than relying on pre-rendered or static data.

[0041] Road topology model: A mathematical model that describes the spatial structure and connectivity of a highway, including the spatial layout and relationships of centerline node sequences, lane configurations, interchanges, and ancillary facilities.

[0042] Vector path data: Road geometry data described by mathematical curves (such as spline curves), which has the characteristic of infinite scaling without distortion, unlike raster images.

[0043] Canvas coordinate system: A two-dimensional Cartesian coordinate system with the top left corner of the Canvas element as the origin (0,0), the positive X-axis pointing horizontally to the right, and the positive Y-axis pointing vertically downwards.

[0044] Dual buffer mechanism: A data pipeline design with a two-level architecture of front-end buffer (receive / decode) and back-end buffer (aggregate / interpolate) is used to smoothly process asynchronous data streams.

[0045] Layered rendering architecture: The rendering task is divided into a multi-level rendering organization method, including a static base layer, a dynamic traffic layer, a special effects overlay layer, and an interactive response layer. Each layer is updated and composited independently for output.

[0046] Mercator projection: A map projection method that converts latitude and longitude coordinates of the Earth's ellipsoid into plane rectangular coordinates while preserving angular distortion.

[0047] For details, please refer to Figure 1 This invention provides a method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas, comprising the following steps: S1. Obtain geographic information data of the highway, construct a road topology model, convert the road topology model into vector path data in the Canvas coordinate system, and establish a road geometry cache; Import the latitude and longitude node sequence of the road centerline from the GIS system (using the WGS84 coordinate system). This sequence represents the spatial location of the road centerline on the actual Earth surface.

[0048] The road topology model includes: The sequence of latitude and longitude nodes along the road centerline: a discrete set of points that constitutes the road's orientation; Lane configuration information: number of lanes, lane width, lane type, and speed limit parameters; Interchange structure: entrance and exit locations, ramp connections; Layout of ancillary facilities: the spatial location of facilities such as toll stations, service areas, bridges, and tunnels; The latitude and longitude node sequence of the road centerline is smoothly interpolated using cubic spline curves to generate a continuous and differentiable road reference line; the interpolation sampling interval is set to 1 meter to ensure the smoothness and accuracy of the road curve.

[0049] The nodes on the road reference line are converted into planar coordinate points in the Canvas local coordinate system using Mercator projection; the Mercator projection formula is as follows:

[0050] in, For the Earth's radius, Longitude The central meridian, The coordinates are latitude and longitude. The converted coordinates can be used directly on the Canvas.

[0051] Lane boundary lines are generated by offsetting the lane width parameters to both sides of the planar coordinate points; for multi-lane scenarios, lane dividing lines are generated sequentially.

[0052] A road geometry cache object is created based on the aforementioned planar coordinate points and lane boundary lines. This cache object contains the following data: The vertex array of the road reference line, the vertex array of the lane boundary line, the index range of each lane, and the location coordinates of road fixtures; The cached object is constructed once during initialization and is not reconstructed in subsequent rendering loops.

[0053] S2. Establish a long-lived web socket connection with the traffic data source to receive real-time traffic data streams; Establish a long-lived WebSocket connection to the traffic data source to receive real-time traffic data streams; employ a double-buffer mechanism to manage the real-time data streams. Front-end buffer: Responsible for receiving network data packets and performing initial decoding. Upon receiving raw data, it is immediately parsed into an internal data structure, sorted by timestamp, and then stored in the front-end buffer.

[0054] Backend buffer: Reads data from the frontend buffer according to time windows and performs aggregation processing. For missing data frames, a linear interpolation algorithm is used to fill in the gaps.

[0055] The real-time traffic data includes the following types: Vehicle dynamic data: vehicle ID, location, speed, vehicle type, and direction of travel; Traffic incident data: incident type, incident location, scope of impact, and estimated duration; Environmental perception data: weather conditions, visibility, road conditions.

[0056] S3. Initialize the Canvas rendering context and establish a layered rendering architecture, which includes four independent layers; the specific rendering content of each layer is as follows: Static base layer: renders roadbed, lane markings, guardrails, and fixed facilities (toll booths, service area icons); Dynamic Traffic Layer: This layer uses standardized traffic entity objects to achieve dynamic position updates and shape rendering of vehicles. Vehicle sprites are managed using an object pool to avoid frequent creation and destruction.

[0057] Special effects overlay: rendering traffic event signs, traffic flow heatmaps, and environmental effects; Interactive response layer: handles user perspective changes, element selection, and information pop-ups.

[0058] S4. Establish a rendering loop, and in each frame, execute the data update phase, collision detection phase, rendering and drawing phase, and state synchronization phase in sequence: During the data update phase, in each frame's rendering loop, the traffic entity state at the current moment (i.e., the time point corresponding to the current frame) is extracted from the backend buffer. After coordinate transformation (WGS84 to Canvas plane coordinates) and kinematic interpolation compensation, a standardized traffic entity object for the current frame is generated.

[0059] In the collision detection phase, spatial relationships between vehicle entities are quickly detected and conflict areas are identified based on spatial hash grids or quadtree indexes. The spatial hash grid partitioning method is as follows: Divide the Canvas into N×M grid cells, and calculate the grid index of each vehicle entity based on its current position: gridX = floor(position.x / cellWidth) gridY = floor(position.y / cellHeight) During collision detection, only vehicle pairs within the same grid and adjacent grids are detected. After a conflict area is detected, it provides the basis for triggering events for special effects overlay (e.g., generating congestion alerts or collision warnings).

[0060] During the rendering stage, for the static base layer, a path caching technique is used to render it all at once based on the road geometry cache; for the dynamic traffic layer, a dirty rectangle local redraw optimization strategy is adopted, which only renders the areas in the canvas that need to be redrawn, and the rendering method is dynamically adjusted according to the data load and viewport level. The areas requiring redrawing are determined using a dirty rectangle local redraw optimization strategy, specifically including: The rendering result of the previous frame is compared with the content to be rendered in the current frame to determine the areas that have changed. These areas mainly include: areas caused by vehicle movement, newly appearing or disappearing vehicles, and areas where the viewpoint changes due to user interaction. Each frame, the newly added changed areas are merged with the dirty rectangles from the previous frame to form the areas that need to be redrawn in the current frame. The merging algorithm is as follows: if two rectangles overlap or the distance between them is less than a threshold, they are merged into a larger rectangle that covers all changed areas. Only the merged dirty rectangle area is used to execute drawing commands using the Canvas 2D API. After redrawing, the dirty rectangle record is cleared, waiting for remarking in the next frame.

[0061] After sorting the graphic elements to be drawn from farthest to nearest in depth, the Canvas 2D API is called to execute drawing commands layer by layer. The depth order is: road background → lane markings → vehicle shadows → vehicle body → vehicle outline → traffic event signs → interactive interface elements.

[0062] A certain number of vehicle sprite objects are pre-created, retrieved from a pool when needed, and returned after use to avoid performance overhead and memory fragmentation caused by frequent creation and destruction. Vehicle sprite rendering employs a 3x3 grid slicing technique, dividing the vehicle image into a 3x3 grid. The corresponding bitmap slice is automatically selected based on the vehicle's orientation angle, and smooth rotation at any angle is achieved using the Canvas's transform matrix.

[0063] During the state synchronization phase, the rendering state of the current frame is fed back to the data management module. The rendering state includes: the actual rendering position of each traffic entity in the current frame, the perspective change parameters generated by user interaction, and the conflict area information identified during the collision detection phase. The data management module updates the position attributes of the standardized traffic entity objects according to the fed-back rendering state and generates a traffic congestion warning based on the conflict area information.

[0064] A two-way data binding is established between the data management module and the rendering engine to store standardized traffic entity objects and respond to state updates from the rendering engine. For example, when a user clicks on a vehicle, the interaction response layer passes the click coordinates to the data management module, which then queries the vehicle information at that location and returns it to the rendering layer to display a pop-up window.

[0065] In some embodiments, the rendering method is dynamically adjusted based on the data load and viewport level, including aggregate rendering mode and level of detail switching; The aggregated rendering mode is as follows: when the vehicle density exceeds a preset threshold, the road space is divided into grid cells, the number of vehicles and average speed in each grid are counted, the grid is rendered in the form of a heatmap, and individual vehicle sprites are hidden; the specific steps are as follows: The road space is divided into grid cells of 500m x lane width; the number of vehicles and average speed in each grid are counted; the grid is rendered in the form of a heatmap, with color mapping density (red represents high density, green represents low density) and brightness mapping speed (high brightness represents fast speed, low brightness represents slow speed); individual vehicle sprites are hidden, and only the grid heatmap is displayed.

[0066] The level of detail (LOD) switching is based on the viewport zoom level: When the viewport zoom level is less than a preset threshold (e.g., zoom < 0.5, i.e., viewing from a distance), a simplified geometric model is used to render the vehicle. For example, the vehicle is rendered as a rectangular color block, without displaying details such as windows and wheels. When the viewport zoom level is greater than or equal to the preset threshold (i.e., viewing from a close distance), a refined model is enabled. For example, the vehicle is rendered as a complete 3D model or a high-precision bitmap, displaying vehicle model details.

[0067] In some embodiments, a spatiotemporal trajectory playback step is also included: Historical traffic data is encoded into a compact binary format according to time series, supporting random access and forward / reverse playback based on the time axis; among which, forward playback: historical data frames are loaded and rendered sequentially in chronological order; Reverse playback: Load and render historical data frames in reverse chronological order; Random access: Supports direct jump to a specified time point and locates keyframes near the target time through binary search.

[0068] During playback, the same rendering loop as real-time monitoring is used for rendering, thus unifying the rendering pipeline between real-time monitoring and historical playback, eliminating the need to develop two separate rendering systems.

[0069] In this embodiment of the invention, the state synchronization phase is the last stage of the rendering loop, and its core function is to realize bidirectional data binding between the rendering layer and the data management module, specifically including the following three aspects: (1) Update the entity location in the data management module The actual rendering position calculated by the rendering layer after kinematic interpolation compensation may deviate from the theoretical position in the original data due to factors such as interpolation algorithms and frame rate fluctuations. During the state synchronization phase, the actual rendering position is written back to the data management module to ensure that the position attributes of the standardized traffic entity objects stored in the data management module are consistent with the position displayed by the rendering layer, providing accurate basic data for data updates in subsequent frames.

[0070] (2) Respond to user interaction operations When users perform actions such as changing the viewpoint (panning, zooming, rotating) and selecting elements (clicking vehicle or event icons) in the interaction response layer, this operation information is fed back to the data management module through the state synchronization phase. The data management module updates the interaction state according to the operation type, such as recording the current viewport range, marking the selected vehicle ID, and caching user query conditions for subsequent rendering cycles.

[0071] (3) Triggering traffic incident warning Conflict areas identified during the collision detection phase (such as insufficient vehicle spacing or lane congestion) are fed back to the data management module during the status synchronization phase. The data management module generates corresponding traffic congestion warnings or safety alerts based on the severity of the conflict areas and visualizes them through special effects overlays, such as displaying red highlights in congested areas and flashing icons at accident locations.

[0072] like Figure 2 As shown, this embodiment of the invention also provides a system for dynamically drawing two-dimensional highways based on real-time data-driven Canvas, comprising: The data acquisition module is used to acquire geographic information data of the highway, construct a road topology model, convert the road topology model into vector path data in the Canvas coordinate system, and establish a road geometry cache. The road topology model includes the latitude and longitude node sequence of the road centerline, lane configuration information, interchange structure and ancillary facility layout. The lane configuration information includes the number of lanes, lane width, lane type and speed limit parameters.

[0073] The real-time communication module is used to establish a long-lived web socket connection with the traffic data source and receive real-time traffic data streams. The rendering architecture module is used to initialize the Canvas rendering context and establish a layered rendering architecture, which includes at least a static base layer and a dynamic traffic layer. The rendering loop module is used to establish the rendering loop, which sequentially executes the data update phase, collision detection phase, rendering and drawing phase, and state synchronization phase in each frame: During the data update phase, the current state of traffic entities is extracted from the real-time traffic data stream. After coordinate transformation and kinematic interpolation compensation, standardized traffic entity objects for the current frame and their real-time positions in the Canvas coordinate system are generated. In the collision detection phase, spatial relationships between vehicle entities are quickly detected and conflict areas are identified based on spatial hash grids or quadtree indexes. In the rendering stage, for the static base layer, a path caching technique is used to draw it all at once based on the road geometry cache; for the dynamic traffic layer, a dirty rectangle local redraw optimization strategy is adopted, which only draws the areas in the canvas that need to be redrawn, and the rendering method is dynamically adjusted according to the data load and viewport level. During the state synchronization phase, the rendering state of the current frame is fed back to the data management module.

[0074] In some embodiments, the data acquisition module converts the road topology model into vector path data in the Canvas coordinate system and establishes a road geometry cache, specifically including: The latitude and longitude node sequence of the road centerline is smoothly interpolated using cubic spline curves to generate a continuous and differentiable road reference line; the nodes on the road reference line are converted into planar coordinate points in the Canvas local coordinate system through Mercator projection; the lane boundary lines are generated by offsetting the planar coordinate points to both sides according to the lane width parameter; and a road geometry cache is established based on the planar coordinate points and the lane boundary lines.

[0075] In some embodiments, a dual-buffer management module is also included, which is used to manage the real-time data stream using a dual-buffer mechanism: the front-end buffer is used to receive network data packets and perform preliminary decoding, and the back-end buffer is used to aggregate data by time window and fill in missing frames using a linear interpolation algorithm; the data update phase extracts the traffic entity status from the back-end buffer.

[0076] In some embodiments, the area requiring redrawing is determined using a dirty rectangle local redrawing optimization strategy, specifically including: The rendering result of the previous frame is compared with the content to be rendered in the current frame to determine the changed area; in each frame, the newly added changed area is merged with the dirty rectangle of the previous frame to form the area that needs to be redrawn in the current frame; after the redraw is completed, the dirty rectangle record is cleared.

[0077] In some embodiments, the dynamic adjustment of the rendering method based on data load and viewport level includes aggregate rendering mode and level of detail switching: The aggregate rendering mode is as follows: when the vehicle density exceeds a preset threshold, the road space is divided into grid cells, the number of vehicles and average speed in each grid are counted, the grid is rendered in the form of a heat map, and individual vehicle sprites are hidden. The level of detail switching is as follows: based on the viewport scaling level, when the viewport scaling level is less than a preset threshold, a simplified geometric model is used to render the vehicle; otherwise, a fine model is enabled.

[0078] In some embodiments, a spatiotemporal trajectory playback module is also included, which encodes historical traffic data into a compact binary format according to time series, supports random access based on the time axis and forward / reverse playback, and calls the same rendering loop for rendering during playback.

[0079] In some embodiments, the layered rendering architecture further includes an effects overlay layer for rendering traffic event signs, traffic flow heatmaps and environmental effects, and an interactive response layer for handling user perspective changes, element selection and information pop-up interactions. The static base layer is used to render roadbeds, markings, guardrails, and fixed facilities; the dynamic traffic layer is used to realize the dynamic position update and shape rendering of vehicles based on the standardized traffic entity objects; the special effects overlay layer is used to render traffic event signs, traffic flow heatmaps, and environmental effects; and the interactive response layer is used to handle user perspective changes, element selection, and information pop-up interaction.

[0080] In fact, the overall architecture of the system in this application includes: The data access layer is equipped with a data management module: it connects to the traffic management center's data platform via a WebSocket connector, supports standard protocols such as JT / T808 and NTCIP, and is used to receive real-time traffic data streams.

[0081] Data processing layer: Implements data decoding, coordinate transformation (WGS84 to Canvas local coordinate system), data verification and completion, and adopts a double buffer mechanism to manage data flow.

[0082] Rendering engine layer: Built on the HTML5 Canvas API, it adopts a layered rendering strategy, including a static base layer, a dynamic traffic layer, an effects overlay layer, and an interactive response layer.

[0083] Interaction control layer: Handles user input and manages perspective changes (pan, zoom, rotation) and element interactions.

[0084] Application Interface Layer: Provides JavaScript APIs for upper-layer business systems to call.

[0085] This embodiment uses a highway monitoring center as an example to describe the complete operation process of the system: System initialization: Load highway geographic information data, construct road topology model, and establish road geometry cache.

[0086] Establish a data connection: Establish a long connection with the traffic data center via WebSocket and begin receiving real-time traffic data streams.

[0087] Start the rendering loop: Initialize the Canvas context, establish a four-layer rendering architecture, and start the requestAnimationFrame rendering loop.

[0088] Continuous operation: Extract the latest traffic entity state from the backend buffer every frame; update vehicle positions after coordinate transformation and kinematic interpolation compensation; perform collision detection to identify congested areas; render dynamic traffic layers using a dirty rectangle local redraw strategy; dynamically adjust the rendering method according to vehicle density and viewport scaling level; and feed back the rendering status to the data management module.

[0089] Users can pan, zoom, and rotate the camera view using a mouse or touchscreen, and click on vehicle or event icons to view detailed information. Users can switch to playback mode to query historical traffic conditions at any point in time; the rendering effect during playback is consistent with real-time monitoring.

[0090] Those skilled in the art will clearly understand that the techniques in the embodiments of the present invention can be implemented using software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solutions in the embodiments of the present invention, or the parts that contribute to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium such as a USB flash drive, mobile hard drive, read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk, or other media capable of storing program code, and includes several instructions to cause a computer terminal to execute all or part of the steps of the methods described in the various embodiments of the present invention.

[0091] In the embodiments provided by this invention, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0092] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0093] In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0094] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for dynamically drawing a 2D highway using a Canvas based on real-time data-driven drawing, characterized in that, Includes the following steps: Acquire geographic information data of highways, construct a road topology model, convert the road topology model into vector path data in the Canvas coordinate system, and establish a road geometry cache; Establish a long-lived web socket connection to the traffic data source to receive real-time traffic data streams; Initialize the Canvas rendering context and establish a layered rendering architecture, which includes at least a static base layer and a dynamic traffic layer. Establish a rendering loop, executing the data update phase, collision detection phase, rendering and drawing phase, and state synchronization phase sequentially in each frame: During the data update phase, the current traffic entity state is extracted from the real-time traffic data stream. After coordinate transformation and kinematic interpolation compensation, the standardized traffic entity object of the current frame and its real-time position in the Canvas coordinate system are generated. During the collision detection phase, spatial relationships between vehicle entities are quickly detected and conflict areas are identified based on spatial hash grids or quadtree indexes. During the rendering stage, for the static base layer, path caching technology is used to draw it all at once based on the road geometry cache; For the dynamic traffic layer, a dirty rectangle local redraw optimization strategy is adopted, which only draws the areas in the canvas that need to be redrawn, and dynamically adjusts the rendering method according to the data load and viewport level. During the state synchronization phase, the rendering state of the current frame is fed back to the data management module.

2. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 1, characterized in that, The road topology model includes the sequence of latitude and longitude nodes of the road centerline, lane configuration information, interchange structure and layout of ancillary facilities; the lane configuration information includes the number of lanes, lane width, lane type and speed limit parameters.

3. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 2, characterized in that, The steps for converting the road topology model into vector path data in the Canvas coordinate system and establishing a road geometry cache include: The latitude and longitude node sequence of the road centerline is smoothly interpolated using cubic spline curves to generate a continuous and differentiable road reference line; the nodes on the road reference line are converted into planar coordinate points in the Canvas local coordinate system through Mercator projection; the lane boundary lines are generated by offsetting the planar coordinate points to both sides according to the lane width parameter; and a road geometry cache is established based on the planar coordinate points and the lane boundary lines.

4. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 1, characterized in that, A double-buffer mechanism is used to manage real-time data streams: The front-end buffer is used to receive network data packets and perform preliminary decoding, while the back-end buffer is used to aggregate data by time window and fill in missing frames using a linear interpolation algorithm; the data update stage extracts traffic entity status from the back-end buffer.

5. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 4, characterized in that, The rendering status feedback during the state synchronization phase includes: the actual rendering position of each traffic entity in the current frame, the perspective change parameters generated by user interaction, and the conflict area information identified during the collision detection phase; the data management module updates the position attributes of the standardized traffic entity objects according to the feedback rendering status, and generates traffic congestion warnings based on the conflict area information.

6. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 5, characterized in that, The areas requiring redrawing are determined using a dirty rectangle local redraw optimization strategy, specifically including: The rendering result of the previous frame is compared with the content to be rendered in the current frame to determine the changed area; in each frame, the newly added changed area is merged with the dirty rectangle of the previous frame to form the area that needs to be redrawn in the current frame; after the redraw is completed, the dirty rectangle record is cleared.

7. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 1, characterized in that, The rendering method is dynamically adjusted based on the data load and viewport level, including aggregate rendering mode and level of detail switching; The aggregate rendering mode is as follows: when the vehicle density exceeds a preset threshold, the road space is divided into grid cells, the number of vehicles and average speed in each grid are counted, the grid is rendered in the form of a heat map, and individual vehicle sprites are hidden. The level of detail switching is as follows: based on the viewport scaling level, when the viewport scaling level is less than a preset threshold, a simplified geometric model is used to render the vehicle; otherwise, a fine model is enabled.

8. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 1, characterized in that, It also includes the spatiotemporal trajectory replay step: Historical traffic data is encoded into a compact binary format in a time series manner, supporting random access and forward / reverse playback based on the time axis, with the same rendering loop being called during playback.

9. The method for dynamically drawing a two-dimensional highway based on real-time data-driven Canvas according to claim 1, characterized in that, The layered rendering architecture also includes an effects overlay layer for rendering traffic event signs, traffic flow heatmaps and environmental effects, as well as an interactive response layer for handling user perspective changes, element selection and information pop-up interactions. The static base layer is used to render roadbeds, markings, guardrails, and fixed facilities; the dynamic traffic layer is used to realize the dynamic position update and shape rendering of vehicles based on the standardized traffic entity objects; the special effects overlay layer is used to render traffic event signs, traffic flow heatmaps, and environmental effects; and the interactive response layer is used to handle user perspective changes, element selection, and information pop-up interaction.

10. A system for dynamically drawing two-dimensional highways using a Canvas based on real-time data-driven drawing, characterized in that, include: The data acquisition module is used to acquire geographic information data of the highway, construct a road topology model, convert the road topology model into vector path data in the Canvas coordinate system, and establish a road geometry cache. The real-time communication module is used to establish a long-lived web socket connection with the traffic data source and receive real-time traffic data streams. The rendering architecture module is used to initialize the Canvas rendering context and establish a layered rendering architecture, which includes at least a static base layer and a dynamic traffic layer. The rendering loop module is used to establish the rendering loop, which sequentially executes the data update phase, collision detection phase, rendering and drawing phase, and state synchronization phase in each frame: During the data update phase, the current state of traffic entities is extracted from the real-time traffic data stream. After coordinate transformation and kinematic interpolation compensation, standardized traffic entity objects for the current frame and their real-time positions in the Canvas coordinate system are generated. In the collision detection phase, spatial relationships between vehicle entities are quickly detected and conflict areas are identified based on spatial hash grids or quadtree indexes. During the rendering stage, for the static base layer, path caching technology is used to draw it all at once based on the road geometry cache. For the dynamic traffic layer, a dirty rectangle local redraw optimization strategy is adopted, which only draws the areas in the canvas that need to be redrawn, and dynamically adjusts the rendering method according to the data load and viewport level. During the state synchronization phase, the rendering state of the current frame is fed back to the data management module.

Images