A tile conversion method and system based on a headless browser

Abstract

This invention relates to the field of network security technology, specifically to a tile conversion method or system based on a headless browser. The method includes: acquiring map style data and tile processing data; generating tile parameters for each tile to be processed; launching the headless browser and loading a map renderer within it to render each tile; and the map renderer calling the headless browser to take screenshots and generate raster tiles. This invention uses a headless browser to load the map renderer, ensuring that tile rendering on the server side uses the same map renderer as on the client side, and uses the headless renderer's screenshot function to save the rendering results. The rendered results are completely consistent with the source map rendered on the client side, while simultaneously freeing up the client's computing power.

Description

Technical Field

[0001] This invention relates to the field of geospatial information data processing, and in particular to a tile conversion method and system based on a headless browser. Background Technology

[0002] Electronic map tiling technology is a core foundation of modern geographic information services. Its core idea is to divide massive map data into small tiles according to specific rules, a map service method that trades space for time. Through distributed storage and on-demand loading of tiles, map browsing efficiency can be significantly improved. Early online maps directly transmitted complete map images, resulting in slow loading and enormous server pressure. Tiling technology divides the map into fixed-size (e.g., 256×256 pixels) raster tiles according to zoom level, rows (X), and columns (Y), forming a pyramid-shaped hierarchical structure. Only tiles in the visible area are loaded during user interaction, significantly reducing data transmission volume. This technological breakthrough enabled services such as Google Maps (2005) to achieve smooth global browsing and became the standard paradigm for subsequent map services. However, raster tile tiling technology still has shortcomings such as high pre-generation thresholds, long time consumption for full-map pre-tiling, high resource requirements, and untimely data updates.

[0003] Vector tile slices directly store the geometric data (points, lines, polygons) and attribute information of map features, and are transmitted using protocol buffers (such as Mapbox MVT format) for compression. The client dynamically renders the tiles based on style files (such as Mapbox Style JSON), enabling seamless scaling and real-time interaction. Its core advantages lie in its dynamic flexibility and interactivity, with a data volume only 1 / 10 to 1 / 100 that of raster tiles. Existing technologies include open-source libraries such as Mapbox GL JS and OpenLayers 6, which support WebGL rendering of vector tiles, achieving seamless scaling and complex styles. Data and styles are decoupled, allowing clients to modify styles in real time without re-tiling the map; data changes only require modification of the data source or style file, and the client immediately obtains the latest tiles. WebGL is a browser-side 3D rendering API based on OpenGL ES 2.0. It uses JavaScript to call GPU hardware acceleration, enabling 3D graphics in web pages without plugins. Its core function is to bridge the gap between the front-end and the GPU, giving the browser high-performance 3D rendering capabilities. Compared to raster tiles, vector tiles have advantages such as faster slicing efficiency, smaller tile size, and faster network transmission and rendering speeds, and they also support dynamic style modification. However, vector tiles are rendered on the client side, relying on front-end performance. Complex styles require WebGL support, and there are compatibility and performance bottlenecks on older browsers, older systems, and low-end mobile devices. Furthermore, vector tiles such as MVT cannot be loaded and rendered by some map libraries (such as CesiumJS).

[0004] To address the shortcomings of raster and vector tiling technologies, new technical solutions exist. One approach dynamically converts vector tiles to raster tiles by rendering them off-screen using a Canvas on the client side and then converting them to raster tiles. Another approach involves rendering raster tiles on the canvas on the server side based on vector tile rendering information and drawing commands. However, these solutions also have limitations: they only support simple style rendering and cannot maintain complete consistency with the original vector map style (such as MapboxStyle); they do not support merging and rendering map styles that combine vector and raster tiles into raster tiles. Summary of the Invention

[0005] To overcome the problem that existing methods for converting vector tiles to raster tiles cannot maintain complete consistency with the original vector map style, this invention provides a tile conversion method and system based on a headless browser.

[0006] Therefore, the first objective of this invention is to provide a tile conversion method based on a headless browser, comprising: Acquire map style data and tile processing data; The tile parameters for each tile to be processed are generated based on the tile processing data; Launch the headless browser, load the map renderer in the headless browser, and the map renderer renders each tile to be processed according to the map style data and tile parameters; The map renderer continuously monitors whether the rendering of each tile to be processed is complete. If it is complete, it calls the headless browser to take a screenshot and generate raster tiles.

[0007] Preferably, the tile parameters for generating each tile to be processed include: Generate tile range parameters based on tile processing data; The tile parameters for each tile to be processed are generated based on the tile range parameters.

[0008] As a preferred option, it also includes: Enable multi-threaded processing configuration, calculate the total number of tiles to be processed based on the tile range parameter, and assign a processing task load of similar tile count to each thread.

[0009] Preferably, loading the map renderer in the headless browser includes: Create a new browser page using a headless browser, and set the browser page window size to the size of the grid tiles; Load the map renderer in the browser page.

[0010] Preferably, each tile to be processed is rendered, including: Iterate through the tile parameters of the tiles to be processed and send the map style data of each tile to the map renderer through a headless browser; The map renderer locates the tile to be processed and renders it based on the map style data of the latitude and longitude range of the tile.

[0011] Preferably, the method also includes: removing the background color of the raster tile based on the tile processing data to generate a transparent-filled PNG format tile.

[0012] Therefore, a second objective of this invention is to provide a tile conversion system based on a headless browser, characterized in that it includes: The acquisition module is used to acquire map style data and tile processing data; The generation module generates tile parameters for each tile to be processed based on the tile processing data; Headless browser; The rendering controller is a functional module built on the headless browser. It is used to launch the headless browser and receive instructions from the map renderer to take screenshots through the headless browser after the map renderer has completed rendering. The map renderer receives and renders each tile according to its tile parameters, map style data, and tile parameters. It continuously monitors whether the rendering of each tile is complete. If it is complete, it sends a command to the rendering controller to call the headless browser to take a screenshot and generate raster tiles.

[0013] Therefore, the third objective of this invention is to provide a tile conversion system based on a headless browser, characterized in that it includes: a map application server and a map application client.

[0014] The map application server includes the system of claim 7 and is capable of executing the method of any one of claims 1-6; The map application client is configured to send a raster tile retrieval request to the map application server; receive the raster tiles sent by the map application server; and build a map.

[0015] Therefore, a fourth objective of the present invention is to provide a computer device including a memory and a processor, wherein the memory stores computer instructions, and the processor executes the computer instructions to perform the method as described in the first objective of the invention.

[0016] Therefore, a fifth objective of the present invention is to provide a computer-readable storage medium storing computer instructions which, when executed by a computer, are described in accordance with the method described in the first objective.

[0017] Compared with the prior art, the present invention has the following beneficial effects: 1. The present invention loads the map renderer through a headless browser, so that the rendering of tiles uses the same map renderer on the server as on the client, and uses the screenshot function of the headless renderer to save the rendering results. The rendering results are completely consistent with the source map rendered by the client, while freeing up the client's computing power.

[0018] 2. Since the conversion rendering is performed on the server side, the map renderer can use vector tiles of different specifications, as well as map style data that combines vector tiles and raster tiles, thereby enabling the merged rendering of mixed layer data into raster tiles. Attached Figure Description

[0019] Figure 1 This is a flowchart of the method according to Embodiment 1 of the present invention; Figure 2 This is the rendering effect of the original vector map style in step S1 of embodiment one of the present invention; Figure 3 This is an example of storing the converted raster tile file according to Embodiment 1 of the present invention. Detailed Implementation

[0020] The present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the described embodiments of the present invention without inventive effort are within the scope of protection of the present invention. Unless otherwise defined, the technical or scientific terms used herein should have the ordinary meaning understood by those skilled in the art to which this invention pertains.

[0021] To further understand this invention, some terms mentioned in this invention and its embodiments are first explained: Headless Browsers: A headless browser is a browser environment without a graphical user interface (GUI). It is designed for automated testing and server environments, providing various API interfaces for browser page interaction control. Common headless browser tools include Headless Chrome, Firefox Headless, Playwright, and Selenium (Headless mode).

[0022] Map data source: Used to provide raw vector tile and raster tile layer data, generally obtained from services published by Geographic Information System (GIS) service software. Common GIS service software includes ArcGIS, Maptiler, etc. Among them, Maptiler software is a professional map creation and publishing tool that can quickly convert images into interactive maps, supports multi-platform use and free hosting, and is suitable for Web, mobile applications and GIS systems.

[0023] Format configuration files: These are used to obtain map data sources in a specified format. Common format configuration files include MapboxStyle JSON and SLD (Styled Layer Descriptor) styles. Among them, Mapbox Style JSON is the core configuration framework in the MapboxGL map system used to define map visualization rules. Its standardized structure based on JSON format can precisely control the map's style (such as color, line type, fill, etc.), data source, and interactive behavior. It is the core configuration file for MapboxGL maps.

[0024] A map renderer is a software component or tool responsible for converting geospatial data (such as vector data, raster data, terrain data, etc.) into visual map images. Its core function is to render abstract geographic information (coordinates, attributes, topological relationships) into a map image that humans can intuitively recognize. Common map renderers include Cesium, geospatial plugins for Unity / UnrealEngine, and Mapbox GL JS. Example 1

[0025] This embodiment uses an electronic map as an example. The map data source comes from Maptiler, the server is implemented in a Node.js execution environment, the headless browser tool is based on Playwright, and the map renderer is based on Mapbox GL JS for 3D terrain rendering. It must be noted that the choice of map data source, execution environment, headless browser, and map renderer is not limited to the case in this embodiment; the choices in this embodiment are for reference only.

[0026] This invention provides a tile conversion method based on a headless browser, such as... Figure 1 As shown, it includes the following steps: Step S1: Obtain map style data and tile processing data.

[0027] Map style data contains multiple vector tile layer data, or a mixture of multiple original raster map layer data and vector tile layer data.

[0028] For example, map style data is obtained from a map data source through a specific format configuration file. In this embodiment, map style data is obtained from Maptiler using a Mapbox Style JSON format configuration file, or it can be obtained from ArcGIS using an SLD (Styled Layer Descriptor) style configuration file.

[0029] Tile processing data includes: rectangular latitude and longitude range parameters, scaling level parameters, filtered RGB color values, and tile size, etc. The original vector map rendering effect is as follows: Figure 2 As shown, the client sends parameters to the server via an HTTP request.

[0030] For example, the latitude and longitude range parameters include: minimum longitude minLon, minimum latitude minLat, maximum longitude maxLon, and maximum latitude maxLat; the tile size defaults to 256×256 pixels; the scaling level parameters include: minimum scaling level minZoom and maximum scaling level maxZoom. Step S2: Generate tile parameters for each tile to be processed based on the tile processing data.

[0031] The steps for generating tile parameters for each tile to be processed include:

[0032] Step S21: Generate tile range parameters based on tile processing data.

[0033] The tile range parameters include: tile level, tile row number range, tile column number range, and maximum map range.

[0034] Specifically, based on the rectangular latitude and longitude range parameters and scaling level parameters in the tile processing data, the range of tile row numbers and the range of tile column numbers corresponding to different scaling levels are generated, thereby obtaining the maximum range of the map.

[0035] The layer range is between the minimum zoom level (minZoom) and the maximum zoom level (maxZoom). Users can choose whether to set the tile row number range and tile column number range according to the minZoom layer range for each layer as needed.

[0036] The range of tile row numbers includes: minimum row number minX and maximum row number maxX; The tile column number range includes: minimum column number minY and maximum column number maxY.

[0037] In this embodiment, the minimum row number minX is obtained by converting the minimum latitude minLat according to Formula 1; the maximum row number maxX is obtained by converting the maximum latitude maxLat according to Formula 1; the minimum column number minY is obtained by converting the minimum longitude minLon according to Formula 2; and the maximum column number maxY is obtained by converting the maximum longitude maxLon according to Formula 2.

[0038] Formula 1 is:

[0039] Formula 2 is:

[0040] Where Lon represents longitude in degrees, lat represents latitude, and zoom represents the level number.

[0041] Step S22: Generate tile parameters for each tile to be processed based on the tile range parameters.

[0042] Tile parameters include tile row number, tile column number, and layer parameters. After determining the tile range parameters, a different number of tiles are generated for different scaling levels, thereby determining the tile row number, tile column number, and corresponding scaling level layer parameters for each tile.

[0043] Step S3: Enable multi-threaded processing configuration, calculate the total number of tiles to be processed based on the tile range parameter, and assign a processing task load of similar tile count to each thread.

[0044] Includes the following steps: Step S31: Enable multi-threaded processing configuration.

[0045] Step S32: Calculate the total number of tiles to be processed based on the tile range parameters.

[0046] Based on the range of tile row numbers and the range of tile column numbers corresponding to different scaling levels calculated in step S2, the total number of tiles is calculated using formula 3.

[0047] Formula 3: ; Among them, z max For the maximum scaling level, z min For the minimum scaling level, x max x is the largest tile row number. min y is the smallest tile row number. max y is the largest column number min This is the smallest column number.

[0048] Step S33: Assign a processing task load of similar number of tiles to each thread.

[0049] Based on the number of threads configured in the server-side multi-threaded processing, the number of tasks each thread needs to process is obtained. Then, the scaling level, row number, and column number of the tiles to be processed are traversed, and the transformation tasks of each thread are assigned to the respective threads.

[0050] Step S4: Launch the headless browser and load the map renderer in the headless browser. The map renderer renders each tile to be processed according to the map style data and tile parameters.

[0051] For example, each thread launches a headless browser after receiving its assigned processing task.

[0052] Loading a map renderer in a headless browser involves the following steps: Step S401: Create a new browser page using a headless browser. Set the browser page window size to the size of the grid tiles, which is 256*256 pixels by default. Step S402: Load the map renderer in the browser page. This embodiment uses a map renderer based on Mapbox GL JS as an example.

[0053] The specific steps for rendering each tile to be processed include: Step S411: Traverse the tile parameters (including row number, column number, and level) of the tiles to be processed and send the map style data of each tile to the map renderer through the headless browser.

[0054] In step S412, the map renderer locates the tile to be processed and renders it according to the map style data of the latitude and longitude range of the tile to be processed.

[0055] In step S5, the map renderer continuously monitors whether the rendering of each tile to be processed is complete. If it is complete, it calls the headless browser to take a screenshot and generate raster tiles.

[0056] At this point, the multiple layers containing a mixture of raster tiles and vector tiles in the obtained map style data are merged and converted into a single-layer raster tile.

[0057] For example, the viewpoint is also set to this latitude and longitude range to match the screenshot.

[0058] Step S6: Remove the background color of the raster tiles based on the tile processing data to generate tiles with transparent fill. This includes: Step S61: Output the screenshot file as Buffer type data. Step S62: Iterate through and read the RGB values ​​of the filtered color in the tile processing data corresponding to each tile in the Buffer type data, and compare them with the set RGB values ​​to be filtered. If they match, set the Alpha channel value of the pixel to 0, that is, set the pixel to be transparent.

[0059] Step S61: Convert the processed Buffer type data into a transparent padding format, such as PNG or SVG.

[0060] Step S7: Save the rendered tiles to the corresponding file path and name them.

[0061] Taking saving as a PNG format as an example, save the rendered tile to the corresponding file path / {zoom} / {x} and name it {y}.png. The storage path and naming are as follows: Figure 3 As shown.

[0062] Step S8: Send the raster tiles to the corresponding requesting end, such as a client that requests to view the map.

[0063] The embodiments of the present invention load the map renderer through a headless browser, so that the rendering of tiles uses the same map renderer on the server as on the client. The rendering result is completely consistent with the source map rendered by the client, while freeing up the client's computing power.

[0064] Because the conversion rendering is performed on the server side, the map renderer can use map style data that overlays vector tiles and raster tiles, thereby enabling the merged rendering of mixed layer data into raster tiles. Example 2

[0065] This invention provides a tile conversion system based on a headless browser, comprising: The acquisition module is used to acquire map style data and tile processing data; The generation module generates tile parameters for each tile to be processed based on the tile processing data; The task allocation module is used to allocate a similar number of tiles to each thread for processing tasks. Headless browser; The rendering controller, a functional module built on the headless browser, is used to launch the headless browser; create a new browser page for the headless browser; traverse the tile parameters of the tiles to be processed and send the rendering parameters of each tile to the map renderer through the headless browser; and receive instructions from the map renderer to take screenshots through the headless browser after the map renderer has completed rendering. The map renderer receives and locates the tile to be processed based on its tile parameters, and renders it according to the map style data of the latitude and longitude range of the tile. It continuously monitors whether the rendering of each tile is complete. If it is complete, it sends a command to the rendering controller to call the headless browser to take a screenshot and generate raster tiles.

[0066] The background removal module is used to remove the background color of raster tiles and generate transparent PNG format tiles; The storage module is used to save the rendered tiles to the corresponding file path and name them. Example

[0067] This invention provides a tile conversion system based on a headless browser, including a map application server and a map application client.

[0068] The map application server includes the acquisition module, generation module, task allocation module, headless browser, rendering controller, map renderer, background removal module, and storage module as described in Embodiment 2. The map application client is configured to send a raster tile retrieval request to the map application server; receive the raster tiles sent by the map application server; and build a map.

[0069] The map application client uses the same map renderer as the map application server, ensuring that the rendering result is completely consistent with the source map. Example 3

[0070] A computer device includes a memory and a processor, the memory storing computer instructions, the processor executing the computer instructions to perform the method as described in claim 1. Example 4

[0071] A computer-readable storage medium storing computer instructions that, when executed by a computer, describe the method described in Embodiment 1.

[0072] The preferred embodiments of the present invention have been described in detail above with reference to the accompanying drawings. However, the present invention is not limited to the specific details of the above embodiments. Within the scope of the technical concept of the present invention, various simple modifications can be made to the technical solution of the present invention, and these simple modifications all fall within the protection scope of the present invention.

Claims

1. A tile conversion method based on a headless browser, characterized in that, include: Acquire map style data and tile processing data; The tile parameters for each tile to be processed are generated based on the tile processing data; Launch the headless browser, load the map renderer in the headless browser, and the map renderer renders each tile to be processed according to the map style data and tile parameters; The map renderer listens to whether the rendering of each tile to be processed is complete. If it is complete, it calls the headless browser to take a screenshot and generate raster tiles.

2. The tile conversion method based on a headless browser according to claim 1, characterized in that, The tile parameters for generating each tile to be processed include: Generate tile range parameters based on tile processing data; The tile parameters for each tile to be processed are generated based on the tile range parameters.

3. The tile conversion method based on a headless browser according to claim 2, characterized in that, Also includes: Enable multi-threaded processing configuration, calculate the total number of tiles to be processed based on the tile range parameter, and assign a processing task load of similar tile count to each thread.

4. The tile conversion method based on a headless browser according to claim 1 or 2, characterized in that, Loading the map renderer in the headless browser includes: Create a new browser page using a headless browser, and set the browser page window size to the size of the grid tiles; Load the map renderer in the browser page.

5. The tile conversion method based on a headless browser according to claim 1 or 2, characterized in that, Render each tile to be processed, including: Iterate through the tile parameters of the tiles to be processed and send the map style data of each tile to the map renderer through a headless browser; The map renderer locates the tile to be processed and renders it based on the map style data of the latitude and longitude range of the tile.

6. The tile conversion method based on a headless browser according to claim 1 or 2, characterized in that, Also includes: The background color of the raster tiles is removed based on the tile processing data, generating transparent-filled PNG format tiles.

7. A tile conversion system based on a headless browser, characterized in that, include: The acquisition module is used to acquire map style data and tile processing data; The generation module generates tile parameters for each tile to be processed based on the tile processing data; Headless browser; The rendering controller is a functional module built on top of the headless browser and is used to launch the headless browser. After the map renderer completes rendering, it receives instructions from the map renderer to take screenshots using a headless browser. The map renderer receives and renders each tile according to its tile parameters, map style data, and tile parameters. It listens to whether the rendering of each tile is complete, and if so, sends a command to the rendering controller to call the headless browser to take a screenshot and generate raster tiles.

8. A tile conversion system based on a headless browser, characterized in that, include: This includes map application servers and map application clients; The map application server includes the system of claim 7 and is capable of executing the method of any one of claims 1-6; The map application client is configured to send a raster tile retrieval request to the map application server; receive the raster tiles sent by the map application server; and build a map.

9. A computer device, characterized in that, It includes a memory and a processor, wherein the memory stores computer instructions, and the processor executes the computer instructions to perform the method as described in any one of claims 1-6.

10. A computer-readable storage medium, characterized in that, The storage medium stores computer instructions that, when executed by a computer, describe the method as described in any one of claims 1-6.

Images