Map visual rendering method and system based on WebGPU engine and computer equipment
By adopting a map visualization rendering method based on the WebGPU engine, the problem of poor map rendering performance is solved, achieving efficient and smooth rendering effects, which are suitable for application scenarios such as smart cities and real-time monitoring.
Patent Information
- Application Number
- CN202511359286.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-09-23
- Publication Date
- 2025-10-28
- Estimated Expiration
- Not applicable · inactive patent
AI Technical Summary
Existing map visualization rendering methods suffer from slow rendering speeds, frequent stuttering and loading delays, resulting in poor performance when processing large-scale geographic data.
A map visualization rendering method based on the WebGPU engine is adopted. By acquiring map data in a unified format, dividing it into layers and allocating an independent rendering thread to each layer, and using image tiles in a pyramid structure for rendering, combined with multi-threaded parallel loading and real-time data update mechanisms, efficient rendering is achieved.
It significantly improves map visualization rendering performance, achieves smooth rendering effects, and supports dynamic scheduling and on-demand rendering of large-scale geographic data, while reducing graphics memory usage and real-time computing load.
Smart Images

Figure CN120852144A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of map visualization, and in particular to map visualization rendering methods, systems and computer devices based on the WebGPU engine. Background Technology
[0002] With the rapid development of map visualization technology, large-screen map visualization displays, as an important carrier for the display and analysis of geographic information, have been widely used in urban planning, traffic management, logistics scheduling, smart scenic spots, and smart agriculture. An efficient and intelligent map visualization rendering technology will directly impact the timeliness, accuracy, and ease of user interaction in the presentation of geographic information.
[0003] Current map visualization rendering methods employ traditional graphics rendering techniques to process map data, coupled with basic interaction methods primarily based on mouse and keyboard. The drawback of this approach is that traditional rendering technologies experience a significant slowdown when dealing with large-scale data containing millions of Points of Interest (POIs), detailed building models, and complex road networks. This results in frequent stuttering, loading delays, and other issues, leading to poor map visualization rendering performance.
[0004] There is currently no effective solution to the problem of poor map visualization rendering performance in related technologies. Summary of the Invention
[0005] This embodiment provides a map visualization rendering method, system, and computer device based on the WebGPU engine to solve the problem of poor map visualization rendering performance in related technologies.
[0006] Firstly, this embodiment provides a map visualization rendering method based on a WebGPU engine, including:
[0007] Obtain map data in a unified format;
[0008] The map data is input into the rendering layer, and the map data is divided into layers according to spatial hierarchy and feature type to obtain multiple layer data; and an independent rendering thread is assigned to each layer data.
[0009] The map data is divided into blocks to obtain image blocks of a pyramid structure;
[0010] Under the current view range and zoom level, the corresponding rendering thread is invoked to load the corresponding image block for rendering and display.
[0011] In some embodiments, acquiring map data in a uniform format includes:
[0012] Heterogeneous map data is obtained from multiple data sources through the data layer's data source access interface;
[0013] The heterogeneous map data is identified and parsed through the format parsing unit of the data layer;
[0014] The data conversion unit in the data layer converts the parsed data into map data in the unified format.
[0015] In some embodiments, the data layer further includes a real-time data update mechanism;
[0016] The real-time data update mechanism adopts a publish-subscribe model to establish a continuous connection with each of the data sources; based on data fingerprinting technology and incremental update engine, it only extracts and updates the data that has changed.
[0017] In some embodiments, the rendering layer further includes a map rendering style library;
[0018] The map rendering style library includes basic style templates and style editing tools;
[0019] The basic style template is used to provide preset style configurations for a variety of typical application scenarios;
[0020] The style editing tool is used to edit the preset styles in the basic style template.
[0021] In some embodiments, the method further includes:
[0022] After obtaining the layer data, coordinate transformation, clipping, and lighting calculations are performed on the layer data based on the compute shader.
[0023] In some embodiments, the method further includes:
[0024] The multimodal interaction integration module based on the interaction layer provides three interaction methods: gesture recognition, voice control, and eye tracking.
[0025] In some embodiments, the method further includes:
[0026] Based on the BERT model of the interaction layer, a semantic understanding unit is constructed to perform deep semantic analysis on the text or voice query input by the user and identify the query intent.
[0027] In some embodiments, the method further includes:
[0028] Based on the loaded and displayed image blocks, when the user selects a target element, an analysis process associated with the target element is triggered through knowledge graph technology to obtain the association relationship; and the association relationship is displayed using dynamic lines, heatmaps or bar charts.
[0029] Secondly, this embodiment provides a map visualization rendering system based on a WebGPU engine, including: a data layer, a rendering layer, and an interaction layer;
[0030] The data layer includes the data source access interface, the format parsing unit, and the data conversion unit, which are used to collect and parse multi-source heterogeneous data of different formats, convert the parsed data into map data of a unified format, and realize real-time data synchronization based on the publish-subscribe model;
[0031] The rendering layer is used to build a parallel rendering pipeline based on the WebGPU engine, and to perform layer data partitioning and independent thread rendering of the map data;
[0032] The interaction layer is used to receive user commands through a multimodal interaction interface, realize semantic parsing and intelligent association analysis of user intent based on natural language processing and the knowledge graph technology, and control the rendering layer to realize real-time response and feedback of visualization effects.
[0033] Thirdly, this embodiment provides a computer device including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the map visualization rendering method based on the WebGPU engine described in the first aspect above.
[0034] Compared with related technologies, the map visualization rendering method, system, and computer device based on the WebGPU engine provided in this embodiment acquire map data in a unified format; input the map data into the rendering layer; divide the map data into layers according to spatial hierarchy and feature type to obtain multiple layers; allocate an independent rendering thread for each layer; process the map data into blocks to obtain pyramid-structured image blocks; and call the corresponding rendering thread under the current view range and zoom level to load and render the corresponding image blocks. This solves the problem of poor map visualization rendering performance in related technologies. Through the integrated architecture design of "data layer-rendering layer-interaction layer," it improves the performance and interactivity of map visualization rendering.
[0035] Details of one or more embodiments of this application are set forth in the following drawings and description to make other features, objects and advantages of this application more readily apparent. Attached Figure Description
[0036] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments of this application and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:
[0037] Figure 1 This is a hardware structure block diagram of a terminal device for a map visualization rendering method based on a WebGPU engine, as provided in an embodiment of this application.
[0038] Figure 2 This is a flowchart of a map visualization rendering method based on the WebGPU engine provided in an embodiment of this application;
[0039] Figure 3 This is a flowchart of a method for acquiring map data in a unified format provided in an embodiment of this application;
[0040] Figure 4 This is a detailed flowchart illustrating a map visualization rendering method based on the WebGPU engine provided in an embodiment of this application;
[0041] Figure 5 This is a structural block diagram of a map visualization rendering system based on the WebGPU engine provided in one embodiment of this application.
[0042] In the diagram: 102, Processor; 104, Memory; 106, Transmission Device; 108, Input / Output Device; 210, Data Layer; 220, Rendering Layer; 230, Interaction Layer. Detailed Implementation
[0043] To better understand the purpose, technical solution, and advantages of this application, the application is described and explained below in conjunction with the accompanying drawings and embodiments.
[0044] Unless otherwise defined, the technical or scientific terms used in this application shall have the general meaning understood by one of ordinary skill in the art to which this application pertains. Words such as “a,” “an,” “an,” “the,” “the,” and “these” used in this application do not indicate quantitative limitation and may be singular or plural. The terms “comprising,” “including,” “having,” and any variations thereof used in this application are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or device that comprises a series of steps or modules (units) is not limited to the listed steps or modules (units) but may include steps or modules (units) not listed, or may include other steps or modules (units) inherent to these processes, methods, products, or devices. Words such as “connected,” “linked,” and “coupled” used in this application are not limited to physical or mechanical connections but may include electrical connections, whether direct or indirect. “Multiple” used in this application refers to two or more. “And / or” describes the relationship between related objects, indicating that three relationships may exist; for example, “A and / or B” can represent: A alone, A and B simultaneously, and B alone. Normally, the character " / " indicates that the objects before and after it are in an "or" relationship. The terms "first," "second," "third," etc., used in this application are merely to distinguish similar objects and do not represent a specific order of objects.
[0045] The method embodiments provided in this example can be executed on a terminal, computer, or similar computing device. For example, it can run on a terminal. Figure 1 This is a hardware structure block diagram of the terminal for the map visualization rendering method based on the WebGPU engine in this embodiment. For example... Figure 1 As shown, a terminal may include one or more ( Figure 1 Only one is shown in the diagram. A processor 102 and a memory 104 for storing data are also included. The processor 102 may be, but is not limited to, a microprocessor (MCU) or a programmable logic device (FPGA). The terminal may also include a transmission device 106 for communication functions and an input / output device 108. Those skilled in the art will understand that… Figure 1 The structure shown is for illustrative purposes only and does not limit the structure of the terminal described above. For example, the terminal may also include components that are larger than... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown are illustrated.
[0046] The memory 104 can be used to store computer programs, such as application software programs and modules, like the computer program corresponding to the map visualization rendering method based on the WebGPU engine in this embodiment. The processor 102 executes various functional applications and data processing by running the computer programs stored in the memory 104, thereby implementing the above-described method. The memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the terminal via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.
[0047] The transmission device 106 is used to receive or send data via a network. This network includes a wireless network provided by the terminal's communication provider. In one example, the transmission device 106 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 106 can be a Radio Frequency (RF) module used for wireless communication with the Internet.
[0048] This embodiment provides a map visualization rendering method based on the WebGPU engine. Figure 2 This is a flowchart of the map visualization rendering method based on the WebGPU engine in this embodiment, as shown below. Figure 2 As shown, the process includes the following steps:
[0049] Step S201: Obtain map data in a uniform format.
[0050] Specifically, through the data acquisition and parsing modules deployed in the data layer, it accesses various heterogeneous data sources such as satellite remote sensing image systems, traffic sensor networks, social media platforms, and government geographic information databases; it automatically identifies and parses various data formats using a built-in format parsing unit, and then the data conversion unit uniformly converts the parsed data into a format that meets the requirements of the map visualization engine, while strictly maintaining spatial coordinate accuracy during the conversion process; finally, it pushes the standardized map data to the rendering layer in real time through a predefined interface, providing a high-quality, real-time data foundation for subsequent high-performance rendering and intelligent interaction.
[0051] Step S202: Input map data into the rendering layer, divide the map data into layers according to spatial hierarchy and feature type to obtain multiple layer data; and allocate an independent rendering thread for each layer data.
[0052] Specifically, the rendering layer receives standardized data streams pushed from the data layer through a predefined interface. Secondly, based on the spatial hierarchy and feature type of the map data, the input data is divided into multiple logical layers, such as road layers, building layers, water system layers, and POI layers. Each layer contains the same type of geographic features and can be further organized into a pyramid structure according to its level of detail to support multi-scale rendering. In other embodiments, layer division can also be based on business functions, data update frequency, and data security permissions; there are no restrictions on this.
[0053] After layer division, the rendering engine creates and allocates a dedicated rendering thread for each individual layer. These threads operate in parallel based on the high-concurrency computing power of WebGPU, performing preprocessing tasks such as coordinate transformation, geometric clipping, lighting calculation, and style matching for their respective layer data within the thread. By transferring computationally intensive tasks to the GPU and utilizing parallel threads, the load on individual threads and the data transfer overhead between the CPU and GPU are significantly reduced.
[0054] Step S203: The map data is divided into blocks to obtain image blocks of a pyramid structure; under the current view range and zoom level, the corresponding rendering thread is called to load the corresponding image blocks for rendering and display.
[0055] Specifically, the standardized vector or raster data is preprocessed using a tile pyramid model. This model divides the map data vertically into different levels of detail, and each level is further divided horizontally into several 256x256 pixel image tiles. Level 0 represents the coarsest overview of the entire map, typically consisting of only 1-4 image tiles. As the level increases, the map detail becomes richer, and the number of image tiles grows exponentially until the highest precision level is reached. All image tiles are uniquely encoded and stored according to their level, row number, and column number, forming a complete pyramid index structure.
[0056] When a user interacts with the view, the rendering engine calculates the geographic extent of the current viewport and its corresponding zoom level in real time. Based on these parameters, it quickly calculates the numbers of all image tiles intersecting with this viewport, generating a queue of image tile loading requests for the current frame. The scheduler then prioritizes image tile loading requests located at the center of the viewport and in front of the field of view, and calls the corresponding independent rendering threads to load and render the corresponding image tiles, ultimately displaying the complete view on the screen.
[0057] The above steps resolve the issue of poor map visualization rendering performance. By employing a tile pyramid and multi-threaded parallel loading mechanism, dynamic scheduling and on-demand rendering of large-scale geographic data are achieved, allowing the system to process only a limited number of tiles within the current viewport at any zoom level and view extent. This mechanism effectively reduces graphics memory usage and real-time computing load, avoiding performance degradation caused by excessive data volume. Simultaneously, combined with the underlying GPU parallel computing capabilities and multi-threaded architecture provided by WebGPU, rapid parsing, preprocessing, and rendering of tile data are achieved, providing reliable high-performance visualization support for smart city, real-time monitoring, and other application scenarios.
[0058] The above steps are explained in detail below:
[0059] In some embodiments, the map visualization rendering method based on the WebGPU engine further includes the following steps:
[0060] Heterogeneous map data is obtained from multiple data sources through the data layer's data source access interface;
[0061] Heterogeneous map data is identified and parsed through the format parsing unit of the data layer;
[0062] The data conversion unit in the data layer converts the parsed data into map data in a unified format.
[0063] Specifically, such as Figure 3 As shown, the data layer, acting as the data hub of the entire system, first establishes connections with various internal data sources and obtains raw data through its standardized and scalable data source access interface. Secondly, upon arrival of the raw data, the format parsing unit automatically identifies and parses it. This unit maintains an scalable parser library, which pre-configures parsing logic for Shapefile, GeoJSON, KML, CSV, and various custom binary formats, without restricting the data format. The system automatically matches and calls the corresponding parser by detecting the file header, content structure, or metadata of the data, extracting the original spatial geometric information and attribute information from the heterogeneous data's original formats, and reconstructing it into the system's internal intermediate data structure.
[0064] Finally, the data transformation unit standardizes the parsed intermediate data structure. It converts diverse data into a unified, efficient format required by the rendering engine, such as GeoJSON or Protocol Buffers-encoded vector slices, without restriction. During the transformation, a coordinate transformation algorithm ensures the spatial coordinate accuracy of the data. The standardized data is then pushed to the rendering layer in real-time via the DataOutputInterface, providing high-quality data for subsequent real-time updates and high-performance rendering.
[0065] This embodiment constructs a highly automated and scalable data access pipeline. It solves the problems of complex formats, diverse protocols, and inconsistent quality in the access of multi-source heterogeneous geographic data, achieving efficient conversion from raw data to standardized data. For example, in intelligent transportation scenarios, it can simultaneously access data from different sources such as satellite remote sensing imagery systems, social media platforms, and government geographic information databases, completing the entire process from data acquisition, parsing, and conversion to a renderable state in a short time, greatly improving the efficiency of data preparation.
[0066] In some embodiments, the data layer also includes a real-time data update mechanism;
[0067] The real-time data update mechanism establishes a continuous connection with each data source using a publish-subscribe model; based on data fingerprinting technology and an incremental update engine, it only extracts and updates the data that has changed.
[0068] Specifically, the real-time data update mechanism constructs an efficient, low-latency data pipeline to ensure synchronization between the visualization dashboard and the actual data state. The system establishes persistent connections with various heterogeneous data sources and subscribes to their data change channels through a publish-subscribe model. Each data source, acting as a publisher, immediately pushes a change notification message containing data identifiers and version information to the designated channel when its data state changes, instead of pushing the entire data content, greatly reducing network bandwidth consumption.
[0069] Upon receiving a change notification, the system subscriber first uses the incremental update engine to request the latest snapshot of the changed data block and its corresponding cryptographic hash value from the source server via a lightweight metadata query interface. The engine then quickly compares the newly acquired data fingerprint with the old fingerprint of the corresponding data currently stored in the system to accurately pinpoint the specific data block or record that has changed.
[0070] Secondly, the engine only extracts the differential data and distributes the incremental update tasks from multiple data sources to different computing nodes for parallel processing through its built-in distributed data processing framework. After processing, the updated data is synchronized to the rendering layer and the interaction layer with extremely low latency via the RealTimeUpdateInterface interface.
[0071] This embodiment solves the high latency and resource waste problems caused by the traditional polling mode, realizing an efficient data pipeline from the data source to the visualization terminal. It not only ensures the real-time nature of massive dynamic geographic data on the large screen, but also significantly reduces the overall system load and network overhead, ensuring the platform remains stable and smooth even when facing sudden, high-concurrency data flows. For example, in a smart transportation scenario, the traffic sensor network pushes data change information every 2 minutes. When a traffic flow surge occurs on a certain road segment, the system can complete the entire process from receiving the notification, incremental acquisition, processing, to finally updating the traffic flow on the map within 3 seconds, providing solid data support for real-time decision-making by traffic management departments.
[0072] In some embodiments, the rendering layer also includes a map rendering style library;
[0073] The map rendering style library includes basic style templates and style editing tools;
[0074] Basic style templates provide preset style configurations for various typical application scenarios;
[0075] The style editing tool is used to edit the preset styles in the basic style template.
[0076] Specifically, the map rendering style library, as the core configuration management system of the rendering layer, enables rapid matching of map visual effects with business scenarios by providing pre-defined reusable style schemes and visual editing capabilities. The basic style template library predefines more than five complete style configurations for different industry applications. For example, it provides color schemes that highlight land use and building height for urban planning scenarios; road heatmap styles based on traffic flow intensity for traffic management scenarios; thematic map styles that highlight POIs and navigation routes for smart scenic areas; high-contrast visualization styles that highlight key facilities and dangerous areas for emergency command scenarios; and rendering schemes that highlight plot boundaries and crop types for smart agriculture scenarios.
[0077] The style editing tool provides users with a graphical editing interface that requires no programming knowledge. Users can adjust any visual parameter in any preset style in real time using drag-and-drop controls, color pickers, sliders, and other UI components. For example, users can change the base color of traffic flow lines from blue to red, or increase the thickness of building outline borders using sliders. All editing operations can be previewed in real time on the current map canvas, providing a WYSIWYG editing experience. After editing, the tool serializes the entire style configuration into a lightweight JSON format configuration file and synchronizes it to the WebGPU rendering engine through a dedicated StyleConfigInterface interface.
[0078] After receiving a new style configuration, the rendering engine does not need to reload or parse the original geographic data. Instead, it drives its parallel rendering pipeline to dynamically update the style resources of the corresponding layer in the GPU and make them effective immediately in the next rendering frame, achieving millisecond-level response for global or layer-level style switching.
[0079] This embodiment achieves customizable and rapid deployment capabilities for map visual presentation. It significantly reduces the cost and time of adapting a general map platform to specific industry visualization needs, enabling users to independently design professional map visual effects that meet business requirements without needing professional computer graphics and development knowledge. This significantly improves the practicality and flexibility of the technical solution in different application fields.
[0080] In some embodiments, the map visualization rendering method based on the WebGPU engine further includes the following steps:
[0081] After obtaining the layer data, coordinate transformation, clipping, and lighting calculations are performed on the layer data based on the compute shader.
[0082] Specifically, after each independent rendering thread receives the partitioned layer data, it first submits this data to the WebGPU computing pipeline for parallel preprocessing. A dedicated computation shader is created for each layer, within which a parallel algorithm for geographic data processing is written.
[0083] During the coordinate transformation phase, multiple working groups in the computation shader process the vertex coordinates of each geographic feature in parallel, converting latitude and longitude coordinates into two-dimensional or three-dimensional coordinates in the WebGPU clipping space in batches through projection transformation matrices, and simultaneously completing map generalization and simplification calculations for large-scale data.
[0084] In the geometric clipping stage, the compute shader performs parallel clipping and culling operations on the transformed geometry based on the view frustum extent of the current view and the user-defined clipping region. Each thread processes one or more primitives and performs clipping calculations on features that cross boundaries to generate new geometric shapes, significantly reducing the number of pixels that need to be processed in subsequent stages.
[0085] In the lighting calculation stage, for layers with three-dimensional geometric information (such as building models and terrain), the calculation shader calculates the normal, diffuse and specular reflection intensity of each vertex or fragment in parallel based on the preset lighting model and light source position, generating a visual output with light and shadow effects to enhance the three-dimensionality of the map.
[0086] All preprocessing results are written to the WebGPU's storage buffer, which can be directly accessed and reused by subsequent rendering pipelines. This avoids data copying between the CPU and GPU during the preprocessing stage, achieving an efficient data processing workflow.
[0087] This embodiment transfers computationally intensive graphics preprocessing tasks from the CPU to the GPU parallel computing unit, making full use of the GPU's parallel computing advantages, significantly reducing the load on the main thread, avoiding blocking of the rendering thread, and maintaining a high-speed preprocessing frame rate when processing millions or even tens of millions of geographic features, providing core computing support for achieving smooth, lag-free real-time rendering of large-scale maps.
[0088] In some embodiments, the map visualization rendering method based on the WebGPU engine further includes the following steps:
[0089] The multimodal interaction integration module based on the interaction layer provides three interaction methods: gesture recognition, voice control, and eye tracking.
[0090] Specifically, the multimodal interaction integration module provides an intuitive and efficient hybrid interaction channel for map screens through the collaboration of hardware sensors and software algorithms. Regarding gesture recognition, the module captures the movement trajectory of key points of the user's hand using a depth camera deployed in front of the screen, and combines this with deep learning algorithms to accurately recognize more than ten custom gesture commands, including zooming, panning, rotating, box selection, and point selection. No restrictions are placed on the gesture commands. For voice control, the module uses a natural language processing engine, supports continuous Mandarin voice input, and can accurately parse complex operation commands. For eye tracking, the module uses an eye tracker to capture the real-time coordinates of the user's gaze on the screen. When the system detects that the user has been continuously gazing at a certain area for more than a preset time, it automatically determines that the user intends to select that area and triggers the detailed information query and display process for that area, automatically popping up a detailed information panel for that area. Interaction commands are converted into standardized operation commands through the InteractionCommandInterface interface and distributed to the rendering layer and data layer to drive view transformations or data queries and analyses. The three interaction methods can work independently or collaboratively; this embodiment does not limit the interaction methods.
[0091] This embodiment breaks through the reliance on keyboard and mouse devices in traditional map interaction, significantly improving users' operational freedom in long-distance, large-screen environments. In scenarios such as smart parks, emergency command, and exhibitions, users can complete most complex operations without touching the device, lowering the learning threshold for public users and improving the command and dispatch efficiency of professional users.
[0092] In some embodiments, the map visualization rendering method based on the WebGPU engine further includes the following steps:
[0093] The BERT model based on the interaction layer constructs a semantic understanding unit to perform deep semantic analysis on user-input text or voice queries and identify query intent.
[0094] Specifically, firstly, the multimodal interaction module of the interaction layer receives natural language query information submitted by the user through voice input or text input boxes. After the voice signal is converted into text by the voice control unit, it is sent to the semantic understanding unit built based on the BERT pre-trained model along with the directly input text query. This unit performs deep semantic analysis on the query, fully understanding the meaning of words in a specific context through its bidirectional attention mechanism, thereby accurately identifying the user's core query intent.
[0095] Secondly, the identified structured intent information is converted into query descriptors, which include key parameters such as operation type, target feature type, spatial range, attribute filtering conditions, and analysis mode. There are no restrictions on the parameter types. For example... Figure 4 As shown, the descriptor is then sent to the data layer via the DataQueryInterface interface. Upon receiving the request, the data layer retrieves the target data in parallel using a combination of spatial and attribute indexes. The spatial index is built on an R-tree structure to quickly locate the query region; the attribute index builds an inverted index for key fields such as POI name, type, and address, supporting efficient fuzzy matching and filtering of text attributes. The candidate results retrieved by the two indexes are deduplicated and merged before being input into an analysis engine with multiple built-in spatial analysis algorithms for further processing, ultimately generating complete analysis results. The analysis results are pushed to the rendering layer for visualization via the AnalysisResultInterface interface. In other embodiments, the spatial index can also be implemented using a quadtree or grid index, and the attribute index can be implemented using a B+ tree index or bitmap index; there are no restrictions on this.
[0096] This embodiment achieves a precise mapping from natural language input to spatial data querying. It significantly lowers the operational threshold for users, eliminating the need to learn complex query syntax or navigate multi-layered menus. Complex geospatial information can be obtained solely through the most intuitive voice input method, enhancing the naturalness, intelligence, and efficiency of the interaction. For example, in smart park management, managers only need to say "Find all parking lots with more than 10 available spaces," and the system can automatically understand, query, and highlight the target locations that meet the criteria on the map.
[0097] In some embodiments, the map visualization rendering method based on the WebGPU engine further includes the following steps:
[0098] Based on the loaded and displayed image blocks, when the user selects a target element, the analysis process associated with the target element is triggered through knowledge graph technology to obtain the relationship; and the relationship is displayed using dynamic lines, heat maps or bar charts.
[0099] Specifically, firstly, when a user selects a map feature through interactive operations such as clicking, selecting a box, or using voice commands, this operation is captured by the interaction layer and sent to the intelligent association analysis unit via the ElementSelectInterface interface, along with the feature identifier and context information. There are no restrictions on the type of interaction operation. The unit then activates a pre-built geographic knowledge graph and, based on the defined spatial, semantic, and business relationships between entities in the graph (such as roads, buildings, events, and people), initiates association queries and analyses to identify other entities and relationship types directly or indirectly related to the target feature.
[0100] Secondly, after the analysis is completed, the system automatically selects and generates corresponding visualizations based on the nature of the relationships and data characteristics. For example: for spatial connectivity or path-related relationships (such as traffic flow and material scheduling), dynamic flow line animations are used for representation; for density or intensity distribution data (such as pedestrian density and accident hotspots), heat maps are generated and overlaid on the map for display; and for statistical or comparative relationships (such as traffic flow comparisons at different times and facility quantity statistics), bar charts or pie charts are automatically generated and embedded in the information panel. This application does not limit the method of visualization. All these visualizations are sent to the rendering layer through the RelationDisplayInterface interface and integrated into the current map view in real time, forming a unified dynamic visualization effect.
[0101] This embodiment achieves a closed loop from user intent perception and knowledge graph-driven association analysis to multimodal visualization, significantly improving users' cognitive efficiency and decision support capabilities regarding implicit relationships in complex geographic spaces. For example, in a smart transportation scenario, when a user selects a traffic accident site, the system can automatically associate and visualize surrounding congested road sections, available police resources, and estimated traffic management time, presenting this information intuitively in a dynamic graph to help users quickly formulate dispatch plans.
[0102] This embodiment provides a map visualization rendering system based on a WebGPU engine. This system is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. The terms "layer," "unit," and "subunit," etc., used below can refer to combinations of software and / or hardware that perform predetermined functions. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.
[0103] Figure 5 This is a structural block diagram of the WebGPU engine-based map visualization rendering system in this embodiment, as shown below. Figure 5 As shown, the device includes: a data layer 210, a rendering layer 220, and an interaction layer 230;
[0104] The data layer 210 includes a data source access interface, a format parsing unit, and a data conversion unit. It is used to collect and parse multi-source heterogeneous data in different formats, convert the parsed data into map data in a unified format, and realize real-time data synchronization based on a publish-subscribe model.
[0105] Rendering layer 220 is used to build a parallel rendering pipeline based on the WebGPU engine, and to divide map data into layer data and render it in an independent thread.
[0106] The interaction layer 230 is used to receive user commands through a multimodal interaction interface, realize semantic parsing and intelligent association analysis of user intent based on natural language processing and knowledge graph technology, and control the rendering layer to realize real-time response and feedback of visualization effects.
[0107] The above system solves the problem of poor map visualization rendering performance in related technologies. Through the integrated architecture design of "data layer-rendering layer-interaction layer", it improves the performance of map visualization rendering and the convenience of interaction.
[0108] In some embodiments, the data layer 210 is also used to obtain heterogeneous map data from multiple data sources through the data source access interface of the data layer;
[0109] Heterogeneous map data is identified and parsed through the format parsing unit of the data layer;
[0110] The data conversion unit in the data layer converts the parsed data into map data in a unified format.
[0111] In some embodiments, data layer 210 also includes a real-time data update mechanism;
[0112] The real-time data update mechanism establishes a continuous connection with each data source using a publish-subscribe model; based on data fingerprinting technology and an incremental update engine, it only extracts and updates the data that has changed.
[0113] In some embodiments, rendering layer 220 also includes a map rendering style library;
[0114] The map rendering style library includes basic style templates and style editing tools;
[0115] Basic style templates provide preset style configurations for various typical application scenarios;
[0116] The style editing tool is used to edit the preset styles in the basic style template.
[0117] In some embodiments, rendering layer 220 is also used to perform coordinate transformation, clipping, and lighting calculations on the layer data based on a compute shader after the layer data is obtained.
[0118] In some embodiments, the interaction layer 230 is also used as a multimodal interaction integration module based on the interaction layer to provide three interaction methods: gesture recognition, voice control, and eye tracking.
[0119] In some embodiments, the interaction layer 230 is also used to construct a semantic understanding unit based on the BERT model of the interaction layer, to perform deep semantic analysis on the text or voice query input by the user, and to identify the query intent.
[0120] In some embodiments, the interaction layer 230 is also used to trigger an analysis process associated with the target element through knowledge graph technology when the user selects the target element based on the loaded and displayed image block, to obtain the association relationship; and to display the association relationship using dynamic lines, heat maps or bar charts.
[0121] It should be noted that the aforementioned layers can be either functional layers or program layers, and can be implemented through software or hardware. For modules implemented in hardware, the aforementioned layers can reside in the same processor; or the aforementioned layers can be located in different processors in any combination.
[0122] This embodiment also provides a computer device, including a memory and a processor, wherein the memory stores a computer program and the processor is configured to run the computer program to perform the steps in any of the above method embodiments.
[0123] Optionally, the computer device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor and the input / output device is connected to the processor.
[0124] Optionally, in this embodiment, the processor can be configured to perform the following steps via a computer program:
[0125] S1, obtain map data in a unified format;
[0126] S2 inputs map data into the rendering layer, divides the map data into layers according to spatial hierarchy and feature type, and obtains multiple layer data; and assigns an independent rendering thread to each layer data.
[0127] S3 divides the map data into blocks to obtain image blocks in a pyramid structure; under the current view range and zoom level, it calls the corresponding rendering thread to load the corresponding image blocks for rendering and display.
[0128] It should be noted that the specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementations, and will not be repeated in this embodiment.
[0129] Furthermore, in conjunction with the WebGPU engine-based map visualization rendering method provided in the above embodiments, this embodiment can also provide a storage medium for implementation. This storage medium stores a computer program; when executed by a processor, the computer program implements any of the WebGPU engine-based map visualization rendering methods described in the above embodiments.
[0130] It should be understood that the specific embodiments described herein are merely illustrative of the application and not intended to limit it. All other embodiments derived by those skilled in the art based on the embodiments provided in this application without inventive effort are within the scope of protection of this application.
[0131] Obviously, the accompanying drawings are merely some examples or embodiments of this application. Those skilled in the art can apply this application to other similar situations based on these drawings without any creative effort. Furthermore, it is understood that although the work done in this development process may be complex and lengthy, for those skilled in the art, certain design, manufacturing, or production modifications made based on the technical content disclosed in this application are merely conventional technical means and should not be considered as insufficient disclosure of this application.
[0132] The term "embodiment" in this application refers to a specific feature, structure, or characteristic described in connection with an embodiment that may be included in at least one embodiment of this application. The appearance of this phrase in various places in the specification does not necessarily imply the same embodiment, nor does it imply that it is mutually exclusive with or independent of other embodiments. It will be clearly or implicitly understood by those skilled in the art that the embodiments described in this application may be combined with other embodiments without conflict.
[0133] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of patent protection. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the appended claims.
Claims
1. A map visualization rendering method based on the WebGPU engine, characterized in that, include: Obtain map data in a unified format; The map data is input into the rendering layer, and the map data is divided into layers according to spatial hierarchy and feature type to obtain multiple layer data. And allocate an independent rendering thread for each of the layer data; The map data is divided into blocks to obtain image blocks of a pyramid structure; Under the current view range and zoom level, the corresponding rendering thread is invoked to load the corresponding image block for rendering and display.
2. The map visualization rendering method based on the WebGPU engine according to claim 1, characterized in that, The acquisition of map data in a unified format includes: Heterogeneous map data is obtained from multiple data sources through the data layer's data source access interface; The heterogeneous map data is identified and parsed through the format parsing unit of the data layer; The data conversion unit in the data layer converts the parsed data into map data in the unified format.
3. The map visualization rendering method based on the WebGPU engine according to claim 2, characterized in that, The data layer also includes a real-time data update mechanism; The real-time data update mechanism adopts a publish-subscribe model to establish a continuous connection with each of the data sources; based on data fingerprinting technology and incremental update engine, it only extracts and updates the data that has changed.
4. The map visualization rendering method based on the WebGPU engine according to claim 1, characterized in that, The rendering layer also includes a map rendering style library; The map rendering style library includes basic style templates and style editing tools; The basic style template is used to provide preset style configurations for a variety of typical application scenarios; The style editing tool is used to edit the preset styles in the basic style template.
5. The map visualization rendering method based on the WebGPU engine according to claim 1, characterized in that, The method further includes: After obtaining the layer data, coordinate transformation, clipping, and lighting calculations are performed on the layer data based on the compute shader.
6. The map visualization rendering method based on the WebGPU engine according to claim 1, characterized in that, The method further includes: The multimodal interaction integration module based on the interaction layer provides three interaction methods: gesture recognition, voice control, and eye tracking.
7. The map visualization rendering method based on the WebGPU engine according to claim 1, characterized in that, The method further includes: The BERT model based on the interaction layer constructs a semantic understanding unit to perform deep semantic analysis on user-input text or voice queries and identify query intent.
8. The map visualization rendering method based on the WebGPU engine according to claim 1, characterized in that, The method further includes: Based on the loaded and displayed image blocks, when the user selects a target element, an analysis process associated with the target element is triggered through knowledge graph technology to obtain the association relationship; and the association relationship is displayed using dynamic lines, heatmaps or bar charts.
9. A map visualization rendering system based on a WebGPU engine, characterized in that, The method applicable to any one of claims 1 to 8 includes: a data layer, a rendering layer, and an interaction layer; The data layer includes the data source access interface, the format parsing unit, and the data conversion unit, which are used to collect and parse multi-source heterogeneous data of different formats, convert the parsed data into map data of a unified format, and realize real-time data synchronization based on the publish-subscribe model; The rendering layer is used to build a parallel rendering pipeline based on the WebGPU engine, and to perform layer data partitioning and independent thread rendering of the map data; The interaction layer is used to receive user commands through a multimodal interaction interface, realize semantic parsing and intelligent association analysis of user intent based on natural language processing and the knowledge graph technology, and control the rendering layer to realize real-time response and feedback of visualization effects.
10. A computer device, comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to run the computer program to perform the steps of the map visualization rendering method based on the WebGPU engine as described in any one of claims 1 to 8.
Citation Information
Patent Citations
Map element display method based on three-dimensional drawing protocol and map engine
CN114463506A
Map rendering method and device, electronic equipment and storage medium
CN117270834A
Three-dimensional data visualization rendering method and visualization rendering engine system
CN119379880A
Method, system and apparatus for rendering a map according to hybrid map data
US20130321456A1
Map rendering method and apparatus, computer device, and storage medium
US20200408558A1
Cited By
Method and system for integrating third-party map
CN121071056A
Dynamic hierarchical rendering method and system for super-large-scale atlas data and application
CN121235895A
Adaptive rendering optimization method, system, device and medium for large-scale workflow engine
CN122472971A
