Multi-dimensional track driving visualization method and system based on Atde JSSDK (JavaScript Software Development Kit)

Abstract

The invention discloses a multi-dimensional track driving visualization method and system based on Amod JSSDK (JavaScript Software Development Kit). The invention relates to the technical field of path planning and drawing. The application front end reads a starting point and an end point input by a user and sends the starting point and the end point to the server, and the server calculates track data of a driving route and returns the track data to the application front end. And the application front end determines a corresponding drawing and rendering mode based on the 2D mode or the 3D mode selected by the user. And adjusting the pitch angle and the rotation angle of the map in real time according to the driving condition of the trolley. And the head of the trolley faces the true north. According to the invention, by realizing multi-dimensional (2D / 3D) navigation track driving visualization, a user can select a navigation mode suitable for himself or herself according to personal preferences and requirements, so that more intuitive, vivid and personalized navigation experience is obtained. A flexible mode switching function enables a user to adjust the navigation mode at any time according to needs, and the use convenience and comfort are further improved.

Description

Technical Field

[0001] The present invention relates to the technical field of path planning and drawing, and in particular to a multi-dimensional trajectory driving visualization method and system based on Amap JSSDK. Background Art

[0002] In the field of intelligent transportation and autonomous driving, 2D planning maps of driver's route trajectory are the basis of vehicle navigation, path planning and environmental perception. This kind of map mainly uses two-dimensional images to represent geospatial information such as road networks, traffic signs, buildings, etc. Traditional 2D map generation technology mainly relies on geographic information system (GIS) and remote sensing technology to build maps by collecting and processing data sources such as satellite images and aerial photos.

[0003] Most of the navigation devices and vehicle systems on the market are designed based on 2D maps. To achieve 3D effects, existing equipment needs to be upgraded and modified on a large scale, which increases the difficulty and cost of implementation. Since the current planning map system cannot achieve 3D effects, especially the 2D / 3D switching effect, the 2D maps in practice cannot intuitively display the three-dimensional structure of the road, such as bridges, tunnels, overpasses and other complex terrains, which may cause drivers to make errors in judging spatial relationships during driving.

[0004] At the same time, in complex and ever-changing traffic environments, 2D maps may not provide sufficiently accurate navigation information. For example, on roads or intersections with large elevation changes, 2D maps may not accurately indicate the vehicle's driving trajectory and elevation changes. And for drivers who pursue a high-quality driving experience, maps without 3D effects may appear monotonous and boring, and fail to meet their pursuit of visual effects. In addition, in emergency situations, such as avoiding obstacles or emergency braking, the lack of intuitive spatial perception may affect the driver's judgment and reaction speed.

[0005] To this end, the present invention proposes a multi-dimensional trajectory driving visualization method and system based on Amap JSSDK. Summary of the invention

[0006] In view of this, the present invention hopes to provide a multi-dimensional trajectory driving visualization method and system based on Amap JSSDK to solve or alleviate the technical problems existing in the prior art, that is, how to realize multi-dimensional (2D / 3D) navigation trajectory driving visualization, and be able to flexibly switch modes, and at least provide a beneficial option for this; the technical solution of the present invention is implemented as follows:

[0007] First, a multi-dimensional trajectory visualization method based on Amap JSSDK:

[0008] 1. Overview:

[0009] The present invention aims to realize multi-dimensional (2D / 3D) navigation trajectory driving visualization and provide flexible mode switching function. Through the front-end user interface, the user inputs the starting point and end point information, which are sent to the server for calculation, and the server returns detailed driving trajectory data. The front end uses Gaode JSSDK or OpenGL and Three.js technology to draw and render the driving route according to the 2D or 3D mode selected by the user. In 2D mode, Polyline and Marker objects are used to display the route and the car position on the map; in 3D mode, a 3D route is drawn on the GL layer and a 3D car model is loaded. Regardless of the mode, real-time updating of the car position, adjustment of the map perspective and rotation angle are supported to ensure the best user experience. Users can switch between 2D and 3D modes at any time, and the front end will update the drawing and rendering methods accordingly.

[0010] (II) Technical solution:

[0011] To achieve the above technical objectives, the present invention selects to perform the following steps:

[0012] 2.1 Step S1, obtain the trajectory route:

[0013] The application front end reads the starting point and end point entered by the user and sends them to the server. The server calculates the trajectory data of the driving route and returns it to the application front end.

[0014] 2.1.1 Step S100, analysis:

[0015] The application front end reads the starting point node s and the end point node t entered by the user, encapsulates them into a request, and sends it to the server. After receiving the request, the server parses the starting point and the end point.

[0016] 2.1.2 Step S101, path analysis:

[0017] The server uses the Dijkstra algorithm to calculate the best driving route from the starting point s to the end point t;

[0018] The core of Dijkstra's algorithm is to continuously update the shortest distance from each node to the starting point until the shortest path to the end point t is found:

[0019] Let dist[i] represent the shortest distance from node i to the starting point s; when initialized, dist[s] = 0;

[0020] For all other nodes j, dist[j] = ∞ (infinity);

[0021] Iterate and update the dist array until the shortest path to the end point t is found;

[0022] In each iteration, select the node u with the smallest dist value among the currently unvisited nodes, and update the dist values ​​of all its adjacent nodes v:

[0023] If the distance from node u to node v is smaller than the current value of dist[v], update dist[v] to a smaller value:

[0024] dist[v]=min(dist[v],dist[u]+weight(u,v));

[0025] Where weight(u,v) represents the weight (distance or travel time) of the edge from node u to node v.

[0026] 2.1.3 Step S102, packaging:

[0027] The server encapsulates the calculated optimal driving route (trajectory data) into a response body and returns the response body to the application front end.

[0028] 2.2 Step S2, initialization mode drawing and rendering (2D / 3D):

[0029] The application front end determines the corresponding drawing and rendering method based on the 2D mode or 3D mode selected by the user.

[0030] 2.2.1 Step S200, drawing:

[0031] (1) If it is 2D mode, perform the following steps:

[0032] S2000, the application front end obtains the Polyline object and Marker object in Amap JSSDK;

[0033] S2001, using a Polyline object, drawing a driving route on a map according to the trajectory data;

[0034] S2002, use the Marker object to mark the real-time position of the 2D car on the map;

[0035] (2) If it is 3D mode:

[0036] S2000, obtain the OpenGL environment and its GL layer;

[0037] S2001, uses Three.js technology to draw 3D driving routes on the GL layer to ensure the three-dimensionality and realism of the routes;

[0038] S2002, uses Three.js technology to load the 3D car model and places it on the GL layer to achieve 3D visualization of the car.

[0039] 2.2.2 Step S201, rendering:

[0040] (1) If it is 2D mode:

[0041] S2010, updates the position of the 2D car in real time based on the trajectory data, allowing the 2D car marker to move as the driving route changes;

[0042] S2011, updates the center point and viewing angle of the map in real time according to the driving situation of the 2D car, so as to ensure that the user can clearly see the driving trajectory and current position of the car;

[0043] (2) If it is 3D mode:

[0044] S2010, updating the position of the 3D car model in real time according to the trajectory data to ensure that the 3D car model can move along the driving route;

[0045] S2011, adjust the parameters of the 3D view, including the center point and viewing angle, as needed to provide the best 3D visualization effect.

[0046] 2.3 Step S3, update rendering:

[0047] Adjust the map's pitch and rotation angles in real time according to the car's driving conditions, so that the car's front faces due north, and dynamically adjust the map's rotation angle to best display the vehicle.

[0048] If the 3D mode is currently being used, it also includes real-time updating of the center point and viewing angle of the map in the 3D environment to follow the movement of the car.

[0049] 2.3.1 Step S300, update:

[0050] The front end of the application obtains the driving direction data of the car in real time and adjusts the pitch angle of the map in real time to ensure the best display effect of the map;

[0051] For example, when the car is driving on an uphill or downhill section, the pitch angle is adjusted accordingly based on the slope information obtained from the actual road conditions to better display the road conditions.

[0052] 2.3.2 Step S301, adjust the map rotation angle:

[0053] By calculating the angle between the car's driving direction and the north direction, and adjusting the map's rotation angle θ accordingly, the car's front is directed toward the north, and the map's rotation angle is dynamically adjusted to best display the vehicle:

[0054] θ=arctan 2(sin(the angle of the car's driving direction - the angle of the north direction), cos(the angle of the car's driving direction - the angle of the north direction));

[0055] If the current application front end selects the 2D mode, proceed to step S4; otherwise, proceed to step S302.

[0056] 2.3.3 Step S302, 3D mode processing:

[0057] By calculating the position of the 3D car model in the 3D environment and updating the center point and viewing angle of the map accordingly, the center point and viewing angle of the map can be updated in real time in the 3D environment to follow the movement of the 3D car model.

[0058] According to the adjusted pitch angle, rotation angle, center point and viewing angle parameters, the rendering effect of the map is updated in real time to ensure that the user can clearly see the driving trajectory and current position of the car.

[0059] 2.4 Step S4, continuous interaction:

[0060] If the user switches the 2D mode or the 3D mode, the process returns to step S2 , otherwise the process always keeps step S3 until the navigation ends.

[0061] (III) Mechanism for solving technical problems:

[0062] 3.1 Map drawing and rendering technology

[0063] 3.1.1 2D mode:

[0064] The front end uses the Polyline object in Amap JSSDK to draw the driving route on the map based on the trajectory data returned by the back end. Different Polyline styles (such as color, width, etc.) are used to distinguish traffic conditions (smooth, slow, congested, and severely congested).

[0065] Use the Marker object to mark the real-time position of the car on the map, so that users can observe the car's driving path. Update the car's position in real time according to the trajectory data to ensure that the car mark is consistent with the actual driving situation.

[0066] 3.1.2 3D Mode:

[0067] Use OpenGL technology to set up the GL layer to provide a basic environment for 3D rendering. Use Three.js, a powerful 3D graphics library, to draw the 3D route and load the 3D car model on the GL layer. Use Three.js to build the 3D route to give it a three-dimensional and spatial sense. Load and render the 3D car model to ensure that the car is displayed in a real proportion and posture in the 3D environment.

[0068] 3.1.3 Viewing angle and rotation adjustment:

[0069] Adjust the map's pitch and rotation angles based on user selection or system default settings to display the 3D track and car from the best viewing angle. Dynamically adjust the map's rotation angle to ensure the car's front is facing due north, improving the user experience.

[0070] 3.2 Flexible mode switching function:

[0071] Users can choose 2D or 3D mode for navigation on the front-end user interface. The system automatically switches the drawing and rendering mode according to the user's choice. If the user chooses 2D mode, Polyline and Marker are used for drawing; if 3D mode is selected, Three.js is used to draw on the GL layer. Regardless of the mode, the system supports real-time updates of the car's position, adjustment of the map's perspective and rotation angle, ensuring the accuracy and real-time nature of navigation information.

[0072] Second, a multi-dimensional trajectory driving visualization system based on Amap JSSDK:

[0073] The system comprises:

[0074] (1) Application front end for receiving user input, displaying navigation information, and providing visualization effects;

[0075] (2) It is used to perform computing tasks (such as path planning) and return the results to the server side of the application front end;

[0076] (3) The database side stores map data, user information, and driving trajectories; it is responsible for providing data query, update, and other interfaces for the server to call.

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

[0078] 1. Improve user experience: The present invention realizes multi-dimensional (2D / 3D) navigation trajectory driving visualization, and users can choose the navigation mode that suits them according to their personal preferences and needs, thereby obtaining a more intuitive, vivid and personalized navigation experience. The flexible mode switching function allows users to adjust the navigation mode at any time according to their needs, further improving the convenience and comfort of use.

[0079] Second, enhance the accuracy and real-time performance of navigation information: Regardless of whether the user chooses 2D mode or 3D mode, the system of the present invention supports real-time updating of the car's position and driving trajectory to ensure the accuracy and real-time performance of navigation information. Map drawing and rendering using advanced technologies such as Amap JSSDK and Three.js can more accurately display driving routes and road conditions, helping users make more informed driving decisions.

[0080] 3. Improving the flexibility and scalability of the system: The present invention supports flexible mode switching, so that the system can adapt to the needs and preferences of different users, thereby improving the flexibility of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0081] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or technical descriptions will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0082] Figure 1 This is a logic diagram of a method according to Embodiment 1 of the present invention;

[0083] Figure 2 This is a schematic diagram of the application process of the method of Embodiment 1 of the present invention;

[0084] Figure 3 This is a schematic diagram of the system composition of the second embodiment of the present invention. DETAILED DESCRIPTION

[0085] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below;

[0086] It should be noted that the various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.

[0087] Terminology explanation:

[0088] (1) Track route data: Based on the starting point and end point in the order information, the detailed information of the track route is obtained by calling the server interface;

[0089] (2) Trajectory route drawing: Generate a driving route based on traffic conditions (smooth, slow, congested, etc.) and draw it on the map using the Polyline object in Amap JSSDK;

[0090] (3) 2D car: The main body is a picture of a car in a top view. The marker points (Marker) in Amap JSSDK are used to mark the real-time position of the car on the map, making it easier for users to observe the driving path of the car.

[0091] (4) 3D car (model): The main body is a 3D car low-polygon model. The model is loaded using Three.js technology and loaded into the GL layer of the map;

[0092] (5) GL layer: refers to OpenGL technology. OpenGL is a cross-platform graphics library used to render 2D and 3D vector graphics, and GL layer is a mechanism in OpenGL used to manage and process graphics rendering;

[0093] (6) Amap JSSDK's Geographic Information System: An existing geographic information platform library that can use the WebGL third-party library Threejs to achieve 3D effects.

[0094] Embodiment 1: Figures 1-2 As shown, this embodiment will provide a multi-dimensional trajectory driving visualization method and system based on AutoNavi JSSDK, which is a vehicle navigation method. Users can input the starting point and end point through the application front end, and the system calculates the best driving route and displays the vehicle's driving trajectory and position in real time on the map in 2D or 3D mode. It includes the following execution methods.

[0095] In this embodiment, regarding step S1, obtaining the trajectory route:

[0096] Specifically, S100, parsing: the user inputs the starting point and the end point through the graphical interface of the application front end. These inputs are processed by the front end logic and encapsulated into a structured request. This request contains the user's identity authentication information, the detailed coordinates of the starting point and the end point, and other navigation preferences (such as avoiding congested roads). After receiving this request, the server first performs identity authentication, and then parses the coordinate information of the starting point and the end point to prepare for subsequent path analysis.

[0097] Specifically, S101, path analysis: The server uses the Dijkstra algorithm to perform path analysis on a pre-built map data model. This map data model contains information such as road networks, nodes (intersections), and edge weights (distance or travel time). The algorithm iteratively updates the dist array until the shortest path to the end point t is found.

[0098] Specifically, S102, encapsulation: the server encapsulates the calculated optimal driving route (trajectory data) into a structured response body. This response body contains information such as the coordinate point sequence of the trajectory, the estimated driving time, and the estimated driving distance. The server returns this response body to the application front end for subsequent drawing and rendering.

[0099] In this embodiment, regarding step S2, initialization mode drawing and rendering (2D / 3D):

[0100] Specifically, S200, plots:

[0101] (1) 2D mode: The front-end application obtains the Polyline object and Marker object in the Amap JSSDK. The Polyline object is used to draw the driving route on the map based on the trajectory data. This route will be clearly displayed to the user in the form of lines. The Marker object is used to mark the real-time position of the 2D car on the map. This car icon will move as the vehicle moves.

[0102] (2) 3D mode: In 3D mode, the application front end first obtains the OpenGL environment and its GL layer. Then, the 3D driving route is drawn on the GL layer using Three.js technology. This route is displayed to the user in a three-dimensional form to increase the sense of immersion. At the same time, the 3D car model is loaded using Three.js technology and placed on the GL layer to achieve 3D visualization of the car.

[0103] Specifically, S201, rendering:

[0104] (1) 2D mode: The position of the 2D car is updated in real time based on the trajectory data, allowing users to clearly see the vehicle's driving trajectory and current position. At the same time, the center point and viewing angle of the map are updated in real time based on the driving conditions of the 2D car, ensuring that users can always pay attention to the driving conditions of the vehicle.

[0105] (2) 3D mode: The position of the 3D car model is updated in real time based on the trajectory data. In addition, the parameters of the 3D view, including the center point and viewing angle, need to be adjusted in real time according to the vehicle's driving conditions to provide the best 3D visualization effect.

[0106] In this embodiment, regarding step S3, updating the rendering:

[0107] Specifically, S300, Update: The front end of the application obtains the driving direction data of the car in real time, which can be achieved through the GPS or sensor of the vehicle. Then, the pitch angle of the map is adjusted in real time according to the driving direction data to ensure the best display effect of the map.

[0108] For example, when the vehicle goes uphill, the pitch angle of the map will increase accordingly so that the user can see the road conditions ahead more clearly.

[0109] Specifically, S301, adjust the map rotation angle: by calculating the angle between the vehicle's driving direction and the true north direction, and adjusting the map's rotation angle θ accordingly, the vehicle's front is directed toward the true north. This ensures that the map display direction is consistent with the vehicle's driving direction, thereby improving the user's navigation experience. If the current mode is 2D, directly proceed to step S4; otherwise, proceed to step S302 for 3D mode processing.

[0110] Specifically, S302, 3D mode processing: calculate the position of the 3D car model in the 3D environment, and update the center point and viewing angle of the map according to this position. In this way, the map can always move and rotate with the driving of the 3D car model, ensuring that the user can always pay attention to the driving situation of the vehicle. Finally, according to the adjusted pitch angle, rotation angle, center point and viewing angle parameters, the rendering effect of the map is updated in real time to ensure that the user can clearly see the driving trajectory and current position of the car.

[0111] In this embodiment, regarding step S4, continuous interaction: if the user switches between 2D mode and 3D mode during use, the application front end will re-perform the initialization mode drawing and rendering work of step S2 to ensure that the map display effect is consistent with the user's choice. If the user does not switch modes, the application front end will always maintain the update rendering work of step S3 until the navigation ends. This ensures that the user can obtain clear and accurate navigation information throughout the navigation process.

[0112] In this embodiment, the Python execution program of the above application front end is as follows:

[0113]

[0114]

[0115] In the above program, after the user enters the starting point and the end point, a POST request is sent to the backend service. After receiving the request, the backend service will process the request and return the best route. After the script receives the response from the backend, it will check the response status code. If the status code is 200, indicating that the request is successful, it will parse the route in the response body and display it; otherwise, it will display an error message.

[0116] In this embodiment, the Python execution program of the above server is as follows:

[0117]

[0118]

[0119] In the above program, we first create a Flask application instance. Then we define a route

[0120] / get_route, and specifies that the route only accepts POST requests. When receiving a POST request, it obtains the start and end point information from the request body. It then calculates the best route. It encapsulates the calculated route into a JSON response body and returns it to the front end.

[0121] In this embodiment, the Python execution program of the 3D / 2D mode and its switching function of the above application front end is as follows:

[0122]

[0123]

[0124] The above script defines a ViewMode class, which has a mode property to store the current display mode (2D, 3D), and toggle_mode and display_mode methods to switch and display the current mode. simulate_frontend is the front-end interface that allows the user to switch display modes through command line input. In the actual front-end application, JavaScript is used to listen to the user's input and update the graphics display on the page accordingly. The graphics themselves are rendered using WebGL (through libraries such as Three.js) or SVG / Canvas (through libraries such as D3.js).

[0125] Embodiment 2: Figure 3 As shown, this embodiment discloses a multi-dimensional trajectory driving visualization system based on Amap JSSDK, and the system includes:

[0126] (1) An application front end for receiving user input, displaying navigation information, and providing visualization effects; including:

[0127] HTML / CSS / JavaScript: Basic elements and styles for building user interfaces.

[0128] Front-end framework (React, Vue, Angular, etc.): used to improve development efficiency and interface responsiveness.

[0129] Map API (Amap JSSDK): used to display maps on the front end, draw track routes, mark car locations, etc.

[0130] WebGL / Three.js: In 3D mode, used for drawing and rendering 3D graphics on the front end.

[0131] The user enters the starting point and end point information through the front-end interface. The front-end interface displays the driving route, the real-time location of the car, road conditions, etc. The user can select 2D or 3D navigation mode on the front-end interface and view the switching effect in real time.

[0132] (2) Used to perform computing tasks (such as path planning) and return the results to the server side of the application front end; including:

[0133] Server technology (Node.js, Java, Python, etc.): used to build server-side applications.

[0134] Database technology (MySQL, MongoDB, etc.): used to store map data, user information, driving trajectories and other data.

[0135] Path planning algorithm: used to calculate the best driving route based on the starting point and end point information entered by the user.

[0136] RESTful API: used to define the communication interface between the server and the front end.

[0137] The data processing flow on the server side is:

[0138] P1. The front end sends a request to the server, which contains the starting point and end point information entered by the user.

[0139] P2. After receiving the request, the server calls the path planning algorithm to calculate the driving route.

[0140] P3. The server encapsulates the calculated driving route data into a response body and returns it to the front end.

[0141] (3) The database side stores map data, user information, and driving trajectories; it is responsible for providing data query, update, and other interfaces for the server to call.

[0142] All the above embodiments only express the implementation methods of the relevant practical applications of the present invention, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention. Therefore, the protection scope of the patent of the present invention shall be based on the attached claims.

[0143] For those skilled in the art, it can be further appreciated that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0144] At the same time, those skilled in the art can understand that all or part of the processes in all the above-mentioned embodiments can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media provided in this application and used in the embodiments may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

Claims

1. A multi-dimensional trajectory driving visualization method based on Amap JSSDK, characterized in that: The following steps are included: S1, the application front end reads the starting point and the end point input by the user and sends them to the server, the server calculates the trajectory data of the driving route and returns it to the application front end; S2, the application front end determines the corresponding drawing and rendering method based on the 2D mode or 3D mode selected by the user; S3, adjusts the pitch angle and rotation angle of the map in real time according to the driving situation of the car, so that the front of the car faces due north; if the 3D mode is currently used, it also includes updating the center point and viewing angle of the map in real time in the 3D environment to follow the driving of the car; S4: If the user switches the 2D mode or the 3D mode, the process returns to S2; otherwise, the process remains in S3 until the navigation ends.

2. The multi-dimensional trajectory driving visualization method according to claim 1, characterized in that: The implementation method of S1 includes: S100, the application front end reads the node s of the starting point and the node t of the end point input by the user, encapsulates them into a request, and sends it to the server; after receiving the request, the server parses the starting point and the end point; S101, the server uses the Dijkstra algorithm to calculate the best driving route from the starting point s to the end point t; S102, the server encapsulates the calculated optimal driving route into a response body and returns it to the application front end.

3. The multi-dimensional trajectory driving visualization method according to claim 2, characterized in that: In S101, the calculation method of the Dijkstra algorithm is: Let dist[i] represent the shortest distance from node i to the starting point s; when initialized, dist[s] = 0; For all other nodes j, dist[j] = ∞; Iterate and update the dist array until the shortest path to the end point t is found; In each iteration, select the node u with the smallest dist value among the currently unvisited nodes, and update the dist values ​​of all its adjacent nodes v: If the distance from node u to node v is smaller than the current value of dist[v], update dist[v] to a smaller value: dist[v]=min(dist[v],dist[u]+weight(u,v)); Where weight(u,v) represents the weight (distance or travel time) of the edge from node u to node v.

4. The multi-dimensional trajectory driving visualization method according to claim 1, characterized in that: The implementation method of S2 is: For 2D mode: S2000, the application front end obtains the Polyline object and Marker object in Amap JSSDK; S2001, using a Polyline object, drawing a driving route on a map according to the trajectory data; S2002, use the Marker object to mark the real-time position of the 2D car on the map; For 3D mode: S2000, obtain the OpenGL environment and its GL layer; S2001, use Three.js technology to draw 3D driving routes on the GL layer; S2002, use Three.js technology to load the 3D car model and place it on the GL layer.

5. The multi-dimensional trajectory driving visualization method according to claim 4, characterized in that: The implementation method of S2 further includes: For 2D mode: S2010, updates the position of the 2D car in real time according to the trajectory data, allowing the 2D car marker to move as the driving route changes; S2011, updates the center point and viewing angle of the map in real time according to the driving conditions of the 2D car; For 3D mode: S2010, updating the position of the 3D car model in real time according to the trajectory data, so that the 3D car model moves along the driving route; S2011, adjust the parameters of the 3D view as needed, including the center point and viewing angle.

6. The multi-dimensional trajectory driving visualization method according to claim 1, characterized in that: The implementation method of S3 includes: S300, the front end of the application obtains the driving direction data of the car in real time and adjusts the pitch angle of the map in real time; S301, calculate the angle between the driving direction of the vehicle and the north direction, and adjust the rotation angle θ of the map accordingly to make the front of the vehicle face the north, and dynamically adjust the map rotation angle to best display the vehicle.

7. The multi-dimensional trajectory driving visualization method according to claim 6, characterized in that: In the step S301, the rotation angle θ is calculated as follows: θ=arctan 2 (sin(angle of the car's driving direction - angle of the north direction), cos(angle of the car's driving direction - angle of the north direction)).

8. The multi-dimensional trajectory driving visualization method according to claim 6, characterized in that: In S3, if the current application front end selects the 2D mode, then enter S4; otherwise enter the following S302: S302, calculating the position of the 3D car model in the 3D environment, and updating the center point and viewing angle of the map accordingly, so as to achieve real-time updating of the center point and viewing angle of the map in the 3D environment; The rendering effect of the map is updated in real time according to the adjusted pitch angle, rotation angle, center point and viewing angle parameters.

9. A multi-dimensional trajectory driving visualization system based on AutoNavi JSSDK adopting the multi-dimensional trajectory driving visualization method according to any one of claims 1 to 8, characterized in that: The system comprises, Application front end for receiving user input, displaying navigation information and providing visualization effects; It is used to perform computing tasks and return the results to the server of the application front end; The database side that stores map data, user information, and driving trajectories.

10. The multi-dimensional trajectory driving visualization system according to claim 9, characterized in that: The application front end uses Amap JSSDK to display maps, draw track routes and mark the location of the car; The data processing flow of the server is as follows: P1. The application frontend sends a request to the server, which contains the start and end point information entered by the user. P2. After receiving the request, the server calculates the driving route; P3. The server encapsulates the calculated driving route data into a response body and returns it to the application front end.

Images