Picture generation method and system and computer storage medium
By calculating bounding boxes and tile information to generate methods, the inefficiency of map display technology when used on multiple devices and multiple times is solved, enabling the generation of images with geometric assets that can be used on multiple devices and multiple times, thus improving the user experience.
Patent Information
- Application Number
- CN202511015619.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-07-23
- Publication Date
- 2025-11-11
AI Technical Summary
Existing map display technologies cannot generate images with geometric assets at once when used on multiple devices and multiple times. They require the introduction of corresponding map libraries for each platform, resulting in low efficiency.
The spatial extent of geometric assets is determined by calculating bounding boxes, the map is flexibly scaled and resized, target images are generated by combining tile information, and graphics and geospatial analysis is performed using the Canvas.js and Turf.js libraries to generate images with geometric assets that can be used multiple times on multiple devices.
It enables the generation of images with geometric assets that can be used multiple times across multiple platforms, improving the user experience, eliminating the need to import map libraries for each platform, and enhancing the flexible control of image proportions.
Smart Images

Figure CN120929549A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of map technology, and further to an image generation method, system, and computer storage medium. Background Technology
[0002] In map applications, geometric assets such as the size, shape, and location of plots, as well as the length and position of line segments, play a crucial role in the user experience and intuitive understanding. The display of these geometric assets is essential for the usability of a map. However, traditional map display methods have some significant limitations. Existing map display technologies, when used across multiple platforms, require the introduction of corresponding map libraries (such as Mapbox GL and OpenLayers) for each platform, making it impossible to generate images with geometric assets that can be used multiple times across multiple platforms in a single step. Summary of the Invention
[0003] To address the aforementioned technical problems, this application provides an image generation method, system, and computer storage medium that can generate images with geometric assets that can be used multiple times on multiple devices at once.
[0004] In a first aspect, this application provides an image generation method, comprising: calculating a bounding box based on a geometric asset after format conversion; scaling the map to be rendered based on the longitude span, latitude span, and size of the bounding box and the map to be rendered, and determining the scaling level of the scaled map; expanding the scaled map when the original image ratio of the scaled map is inconsistent with the target image ratio, and using the expanded map as the target rendering map; determining the longitude range, latitude range, and address of each tile in the target rendering map based on the scaling level, a first coordinate, and a second coordinate of the target rendering map; and generating a target image with the geometric asset based on the geometric asset and the longitude range, latitude range, address, and index number of each tile in the target rendering map.
[0005] This image generation method determines the spatial extent of geometric assets by calculating bounding boxes. Then, based on the longitude and latitude spans of the bounding boxes and the size of the map to be rendered, it flexibly scales the map and determines the scaling level. If the original image ratio differs from the target image ratio, the map size is adjusted through an expansion operation to match the target ratio. Next, based on the scaling level and the coordinates of the target rendered map, the latitude and longitude range and address of each tile in the target rendered map are determined. Finally, by combining the geometric assets and tile information, a target image with geometric assets can be generated once and reused multiple times across multiple platforms.
[0006] In one implementation, the method further includes: calculating the total number of first tiles along the longitude direction of the scaled map to be rendered based on the scaling level; calculating the third and fourth abscissas of the scaled map to be rendered based on the longitude range of the scaled map to be rendered and the total number of first tiles; performing function transformations on the third and fourth abscissas respectively to determine the third and fourth ordinates; and calculating the original image ratio of the scaled map to be rendered based on the third abscissa, the fourth ordinate, and the fourth ordinate.
[0007] This image generation method calculates the total number of first tiles along the longitude direction of the map to be rendered based on the scaling level. Next, using the longitude range of the map and the total number of first tiles, the third and fourth horizontal coordinates are calculated. Then, by performing a function transformation on the third and fourth horizontal coordinates, the third and fourth vertical coordinates are determined. Finally, combining the third and fourth horizontal coordinates, the original image ratio of the scaled map to be rendered is calculated. This allows for comparison between the original image ratio and the target image, enabling flexible control of the generated image ratio when the original and target image ratios differ, thus improving the user experience.
[0008] In one implementation, calculating the longitude and latitude range of each tile in the target rendered map based on the zoom level and the first and second tile coordinates of the target rendered map specifically includes: calculating the total number of second tiles in the target rendered map based on the zoom level; calculating the first and second tile coordinates of each tile in the target rendered map based on the total number of second tiles, the first coordinate, and the second coordinate; calculating the longitude range of each tile in the target rendered map based on the abscissa of the first tile coordinate and the abscissa of the second tile coordinate; and performing a function transformation on the ordinate of the first tile coordinate and the ordinate of the second tile coordinate of each tile in the target rendered map to determine the latitude range of each tile in the target rendered map.
[0009] In one implementation, generating a target image with the geometric assets based on the geometric assets, the longitude range, the latitude range, and the address and index number of each tile in the target rendering map specifically includes: obtaining the tile base map corresponding to each tile in the target rendering map based on the address, and converting the tile base map corresponding to each tile in the target rendering map into a corresponding object; constructing a target base map based on the index number and the object of each tile in the target rendering map; and rendering the geometric assets onto the target base map based on the longitude and latitude range of each tile in the target rendering map to generate the target image.
[0010] This image generation method obtains the corresponding tile base map based on the address of each tile and converts these base maps into objects that can be manipulated during the rendering process. Next, these tile objects are systematically assembled using index numbers to construct the target base map, providing a precise geographic background for subsequent geometric asset rendering. Finally, based on the longitude and latitude range of each tile, the geometric assets are accurately rendered onto the target map, generating a target image containing the geometric assets. This process can generate a target image with geometric assets that can be used multiple times on multiple platforms in a single step.
[0011] In one implementation, the method further includes: when the original image ratio and the target image ratio are the same, using the scaled-down map to be rendered as the target rendering map.
[0012] Secondly, this application also provides an image generation system, comprising: a calculation module configured to calculate a bounding box based on geometric assets after format conversion; a scaling module configured to scale the map to be rendered based on the longitude span, latitude span, and size of the bounding box and the map to be rendered, and determine the scaling level of the scaled map to be rendered; an expansion module configured to expand the scaled map to be rendered when the original image ratio of the scaled map to be rendered is inconsistent with the target image ratio, and use the expanded map to be rendered as the target rendering map; the calculation module is further configured to determine the longitude range, latitude range, and address of each tile in the target rendering map based on the scaling level, a first coordinate, and a second coordinate of the target rendering map; and a rendering module configured to generate a target image with the geometric assets based on the geometric assets and the longitude range, latitude range, address, and index number of each tile in the target rendering map.
[0013] In one implementation, the calculation module is further configured to calculate the total number of first tiles along the longitude direction of the scaled map to be rendered based on the scaling level; the calculation module is further configured to calculate the third and fourth abscissas of the scaled map to be rendered based on the longitude range of the scaled map to be rendered and the total number of first tiles; the coordinate transformation module is further configured to perform function transformations on the third and fourth abscissas respectively to determine the third and fourth ordinates; the calculation module is further configured to calculate the original image ratio of the scaled map to be rendered based on the third abscissa, the fourth ordinate, the third ordinate, and the fourth ordinate.
[0014] In one implementation, the calculation module is further configured to calculate the second total number of tiles in the target rendered map based on the scaling level; the calculation module is configured to calculate the first tile coordinate and the second tile coordinate of each tile in the target rendered map based on the second total number of tiles, the first coordinate, and the second coordinate; the calculation module is further configured to calculate the longitude range of each tile in the target rendered map based on the abscissa of the first tile coordinate and the abscissa of the second tile coordinate of each tile in the target rendered map; the latitude conversion module is configured to perform a function conversion on the ordinate of the first tile coordinate and the ordinate of the second tile coordinate of each tile in the target rendered map to determine the latitude range of each tile in the target rendered map.
[0015] In one implementation, the system further includes: an acquisition module configured to acquire a tile base map corresponding to each tile in the target rendering map based on the address; an object conversion module configured to convert the tile base map corresponding to each tile in the target rendering map into a corresponding object; a construction module configured to construct a target base map based on the index number and the object of each tile in the target rendering map; and a rendering module configured to render the geometric assets onto the target map based on the longitude and latitude range of each tile in the target rendering map to generate the target image.
[0016] Thirdly, this application also provides a computer storage medium storing a computer program thereon, which, when executed by a processor, implements any of the steps of the above-described image generation method.
[0017] Compared with the prior art, the present invention has at least one of the following beneficial effects:
[0018] 1. The spatial extent of the geometric assets is determined by calculating the bounding box. Then, based on the longitude and latitude spans of the bounding box and the size of the map to be rendered, the map is flexibly scaled, and the scaling level of the map to be rendered is determined. If the original image scale differs from the target image scale, the map size is adjusted through an expansion operation to match the target scale. Next, based on the scaling level and the coordinates of the target rendered map, the latitude and longitude range and address of each tile in the target rendered map are determined. Finally, by combining the geometric assets and tile information, a target image with geometric assets can be generated once and used multiple times on multiple platforms without needing to import corresponding map libraries for each platform.
[0019] 2. Calculate the total number of first tiles along the longitude direction of the map to be rendered based on the scaling level. Next, using the longitude range of the map to be rendered and the total number of first tiles, calculate the third and fourth x-coordinates. Then, determine the third and fourth y-coordinates by performing a function transformation on the third and fourth x-coordinates. Finally, combine the third and fourth x-coordinates, the original image ratio of the scaled map to be rendered is calculated. This allows for comparison between the original image ratio and the target image, enabling flexible control of the generated image ratio when the original and target image ratios differ, thus improving the user experience.
[0020] 3. Based on the address of each tile, obtain the corresponding tile base map and convert these base maps into objects that can be manipulated during the rendering process. Next, using index numbers, these tile objects are systematically combined to construct the target base map, providing an accurate geographic background for subsequent geometric asset rendering. Finally, based on the longitude and latitude range of each tile, the geometric assets are accurately rendered onto the target map, generating a target image containing the geometric assets. This process can generate a target image with geometric assets that can be used multiple times on multiple platforms. Attached Figure Description
[0021] The preferred embodiments will now be described in a clear and easy-to-understand manner, in conjunction with the accompanying drawings, to further explain the above-mentioned characteristics, technical features, advantages, and implementation methods of the present invention.
[0022] Figure 1 A flowchart of an image generation method provided in an embodiment of this application is shown;
[0023] Figure 2 A flowchart of an image generation method provided in an embodiment of this application is shown;
[0024] Figure 3 This document illustrates a flowchart of a method for determining longitude and latitude ranges according to an embodiment of this application.
[0025] Figure 4 A flowchart illustrating a method for generating a target image according to an embodiment of this application is shown. Detailed Implementation
[0026] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the specific implementation methods of the present invention will be described below with reference to the accompanying drawings. Obviously, the drawings described below are merely some embodiments of the present invention. For those skilled in the art, other drawings and other implementation methods can be obtained based on these drawings without any creative effort.
[0027] To keep the drawings concise, each figure only schematically shows the parts relevant to the invention, and these do not represent the actual structure of the product. Furthermore, to facilitate understanding, in some figures, only one of components with the same structure or function is schematically depicted, or only one is labeled. In this document, "one" not only means "only one," but can also mean "more than one."
[0028] It should also be further understood that the term “and / or” as used in this application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.
[0029] In this document, it should be noted that, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to fixed connections, detachable connections, or integral connections; they can refer to mechanical connections or electrical connections; they can refer to direct connections or indirect connections through an intermediate medium; and they can refer to the internal communication between two components. Those skilled in the art can understand the specific meaning of the above terms in this invention based on the specific circumstances.
[0030] Furthermore, in the description of this application, the terms "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.
[0031] HTML5 is the fifth major version of HTML (HyperText Markup Language), a standard markup language used to create web page content and structure. HTML5 has several key features, such as the canvas element, which allows drawing graphics on web pages and supports 2D and 3D drawing. Canvas.js is a graphics library based on the HTML5 Canvas element, providing a rich set of chart types and graphic elements for creating and rendering charts on web pages. While Canvas.js is primarily used for chart drawing, it can also be used in conjunction with map libraries, such as drawing specific graphics or chart data on maps.
[0032] Turf.js is a JavaScript library focused on geospatial analysis. It provides a wealth of tools for processing GeoJSON data, performing spatial analysis, and creating and manipulating various geometric objects on maps. Turf.js can be used to calculate statistical information from geographic data, perform spatial operations (such as buffer analysis, intersection, union, etc.), measure distances and areas, and generate geospatial data patterns. Turf.js is typically used in conjunction with map libraries (such as Leaflet, Mapbox GL JS, etc.) to provide richer geospatial data processing capabilities. This application embodiment calls the Canvas.js and Turf.js libraries on an HTML5 page. By scaling, expanding, and calculating the longitude and latitude ranges of individual tiles on the map, at least one of the following beneficial effects can be achieved: images with geometric assets can be generated once and used multiple times on multiple devices; or, the scale and zoom level of the generated images can be flexibly controlled, improving the user experience.
[0033] The following explanation is based on the accompanying diagram:
[0034] Reference Appendix Figure 1 The diagram illustrates a flowchart of an image generation method provided in an embodiment of this application. Figure 1 As shown, it includes:
[0035] S100 calculates the bounding box based on the geometric assets after format conversion.
[0036] S110 scales the map to be rendered based on the longitude and latitude spans of the bounding box and the size of the map to be rendered, and determines the scaling level of the scaled map.
[0037] S120: When the scale of the original image of the scaled map to be rendered is inconsistent with the scale of the target image, the scaled map to be rendered is expanded and the expanded map to be rendered is used as the target rendering map.
[0038] S130, based on the scaling level, the first coordinate and the second coordinate of the target rendering map, determines the longitude range, latitude range and address of each tile in the target rendering map.
[0039] S140 generates a target image with geometric assets based on the geometric assets and the longitude range, latitude range, address, and index number of each tile in the target rendering map.
[0040] Geometric assets typically refer to geographic features with geometric shapes represented on a map, such as land parcels, roads, and rivers. These features include not only their shape and location but also associated attribute information, such as the area of a land parcel and the length of a road. In map applications, the size, shape, and location of geometric assets are crucial for users to understand and use the map. They are the basic building blocks of a map, directly affecting the map's intuitive feel and user experience.
[0041] A bounding box (BBox) is a rectangular area that completely contains one or more geometric assets. A bounding box is typically defined by two points on its diagonals: one at the bottom left (or bottom right) corner and the other at the top right (or top left) corner. In Geographic Information Systems (GIS), bounding boxes are commonly used to determine the smallest bounding rectangle of an area that contains all the geometric assets. Bounding boxes can be used for map zooming and positioning, as well as determining which map elements are visible in the current view.
[0042] This function receives geometric assets in WKT format and converts them to GeoJSON format using the basic processing method `geometryToGeoJSON`. WKT (Well-Known Text) is a text markup language used to represent geospatial data structures. It is a standard defined by the Open Geospatial Information Consortium (OGC) for describing geometric objects (such as points, lines, polygons, etc.) and geometric collections. GeoJSON is a JSON (JavaScript Object Notation)-based format used to encode various geographic data structures. It is easy for humans to read and write, and also easy for machines to parse and generate. GeoJSON is widely used in web maps and Geographic Information Systems (GIS) because it can be directly embedded into JavaScript code and is compatible with the web technology stack.
[0043] The Turf.js library is used to calculate the bounding boxes of the converted geometric assets. The outer margin of the bounding box can be set according to user needs to make the bounding box more visually appealing; the default outer margin is 1% of the bounding box area. Further, the longitude and latitude spans of the bounding box are calculated. Based on the size of the map to be rendered (or the expected width and height of the map to be rendered, defaulting to 800) and the calculated longitude span, the map to be rendered is scaled in the longitude direction to ensure it completely covers the bounding box, and the longitude scaling level is determined. Similarly, based on the size of the map to be rendered and the calculated latitude span, the map to be rendered is scaled in the latitude direction to ensure it completely covers the bounding box, and the latitude scaling level is determined. Then, the longitude and latitude scaling levels are compared, and the smaller of the two is selected as the scaling level of the scaled map to be rendered. This ensures that the bounding box is fully displayed in both the longitude and latitude directions. Additionally, a maximum zoom level (ZOOM_MAX) can be set to limit the zoom level of the rendered map to not exceed the maximum zoom level.
[0044] When the scale of the original image of the scaled map to be rendered is inconsistent with the scale of the target image, the scaled map to be rendered is expanded, and the expanded map to be rendered is used as the target rendering map. The target rendering map is obtained by scaling and expansion, that is, the shape of the target rendering map is also a rectangular area with the same bounding box. Similarly, the target rendering map can also be defined by two points on the diagonals, that is, the first coordinate can be the coordinate of the lower left corner of the target rendering map (or the minimum Google tile system coordinate), and the second coordinate can be the coordinate of the upper right corner of the target rendering map (or the maximum Google tile system coordinate); similarly, the first coordinate can also be the coordinate of the upper left corner of the target rendering map, and the second coordinate can be the coordinate of the lower right corner of the target rendering map. The embodiments of this application use the coordinates of the lower left corner and the upper right corner. The total number of tiles along the longitude direction or along the latitude direction of the target rendering map can be determined by the scaling level, because the total number of tiles is 2 raised to the power of zoom (scaling level). Simultaneously, based on the first and second coordinates, the lower-left and upper-right corner coordinates of each tile in the target rendered map can be obtained. Further, the x-coordinates of the lower-left and upper-right corners of each tile are converted to their corresponding longitudes, and the y-coordinates of the lower-left and upper-right corners are converted to their corresponding latitudes. Thus, the longitude and latitude ranges of each tile in the target rendered map can be obtained. The basic processing method `handlerUrl` returns the address of each tile in the target rendered map based on the zoom level and the lower-left and upper-right corner coordinates of each tile.
[0045] Furthermore, based on the address of each tile in the target rendered map, a corresponding tile base map is requested from the Google system for each tile. Then, the tile base map for each tile is converted into an object to construct the target base map. Based on the index number of each tile in the target rendered map, the objects corresponding to each tile are stitched together to obtain the target base map. Then, based on the longitude and latitude range of each tile in the target rendered map, the format-converted geometric assets are rendered onto the target base map, thus obtaining a target image with geometric assets.
[0046] This application's embodiments determine the spatial extent of geometric assets by calculating bounding boxes. Then, based on the longitude and latitude spans of the bounding boxes and the size of the map to be rendered, the map is flexibly scaled, and the scaling level of the map to be rendered is determined. If the original image ratio is inconsistent with the target image ratio, the map size is adjusted through an expansion operation to match the target ratio. Next, based on the scaling level and the coordinates of the target rendered map, the latitude and longitude range and address of each tile in the target rendered map are determined. Finally, by combining the geometric assets and tile information, a target image with geometric assets can be generated once and used multiple times on multiple devices.
[0047] Reference Appendix Figure 2 The diagram illustrates a flowchart of an image generation method provided in an embodiment of this application. Figure 2 As shown, it includes:
[0048] S200, based on the scaling level, calculates the total number of the first tiles along the longitude direction of the scaled map to be rendered.
[0049] S210, based on the longitude range of the scaled map to be rendered and the total number of first tiles, calculate the third and fourth horizontal coordinates of the scaled map to be rendered.
[0050] S220, perform function transformations on the third and fourth horizontal coordinates respectively to determine the third and fourth vertical coordinates.
[0051] S230 calculates the scale of the original image of the scaled map to be rendered based on the horizontal coordinate of the third tile, the vertical coordinate of the fourth tile, the vertical coordinate of the third tile, and the vertical coordinate of the fourth tile.
[0052] After scaling the map to be rendered and obtaining the scaling level, the total number of the first tiles along the longitude direction of the scaled map is first calculated based on the scaling level. Using the longitude range of the scaled map, the longitude values of the lower left and upper right corners can be determined. Then, the longitude values of the lower left and upper right corners are converted from the range of -180 to 180 to the range of 0 to 360. These converted longitude values are then divided by 360 to obtain the corresponding values between 0 and 1. The values corresponding to the lower left and upper right corners in the 0-1 range are then multiplied by the total number of the first tiles. Finally, the results for the lower left and upper right corners are rounded down using Math.floor to obtain the third and fourth horizontal coordinates of the scaled map. The third x-coordinate is the x-coordinate of the bottom left corner of the scaled map to be rendered, and the fourth x-coordinate is the x-coordinate of the top right corner of the scaled map to be rendered. By using the longitude range of the scaled map to be rendered and the total number of the first tiles, the longitude range of each tile in the scaled map to be rendered can be determined. That is, based on the same principle, the x-coordinates of the bottom left and top right corners of each tile in the scaled map to be rendered can be obtained. By performing trigonometric and logarithmic function transformations on the third x-coordinate, the third y-coordinate can be determined. Similarly, by performing trigonometric and logarithmic function transformations on the fourth x-coordinate, the fourth y-coordinate can be determined. The third y-coordinate is the y-coordinate of the bottom left corner of the scaled map to be rendered, and the fourth y-coordinate is the y-coordinate of the top right corner of the scaled map to be rendered. Furthermore, after obtaining the x-coordinates of the bottom left and top right corners of each tile in the scaled map to be rendered, based on the same principle, the y-coordinates of the bottom left and top right corners of each tile in the scaled map to be rendered can be determined.
[0053] Furthermore, based on the third, third, fourth, and fourth x-coordinates, the scale of the original image corresponding to the scaled map to be rendered can be calculated. The scale of the original image corresponding to the scaled map to be rendered is compared with the scale of the target image. If the comparison results are inconsistent, the scaled map to be rendered is expanded, and the expanded map to be rendered is used as the target rendering map. Based on the target image scale and the third x-coordinate and third y-coordinate, the first coordinate of the target rendering map can be determined; based on the target image scale and the fourth x-coordinate and fourth y-coordinate, the second coordinate of the target rendering map can be determined. Similarly, based on the target image scale and the x-coordinate and y-coordinate of the lower left corner of each tile in the scaled map to be rendered, the coordinates of the lower left corner of each tile in the target rendering map can be determined; similarly, based on the target image scale and the x-coordinate and y-coordinate of the upper right corner of each tile in the scaled map to be rendered, the coordinates of the upper right corner of each tile in the target rendering map can be determined.
[0054] Furthermore, the x-coordinates of the bottom-left and top-right corners of each tile in the target rendered map are converted to corresponding longitudes, and the y-coordinates of the bottom-left and top-right corners are converted to corresponding latitudes. This yields the longitude and latitude ranges of each tile in the target rendered map. The basic processing method `handlerUrl` returns the address of each tile in the target rendered map based on the zoom level and the bottom-left and top-right corner coordinates. Based on the address of each tile in the target rendered map, a corresponding tile base map is requested from the Google system, and then converted into an object to construct the target base map. Based on the index number of each tile in the target rendered map, the objects corresponding to each tile are concatenated to obtain the target base map. Finally, based on the longitude and latitude ranges of each tile in the target rendered map, the format-converted geometric assets are rendered onto the target base map, resulting in a target image with geometric assets.
[0055] This application's embodiment calculates the total number of first tiles along the longitude direction of the map to be rendered based on the scaling level. Next, using the longitude range of the map to be rendered and the total number of first tiles, the third and fourth abscissas are calculated. Then, by performing a function transformation on the third and fourth abscissas, the third and fourth ordinates are determined. Finally, combining the third and fourth abscissas, the original image ratio of the scaled map to be rendered is calculated. This allows for comparison between the original image ratio and the target image, enabling flexible control of the generated image ratio when the original and target image ratios are inconsistent, thus improving the user experience.
[0056] Reference Appendix Figure 3 This illustrates a flowchart illustrating how to determine longitude and latitude ranges according to an embodiment of this application. Figure 3 As shown, it includes:
[0057] S300 calculates the total number of second tiles of the target rendered map based on the scaling level.
[0058] S310, based on the total number of second tiles, the first coordinate, and the second coordinate, calculate the first tile coordinate and the second tile coordinate for each tile in the target rendering map.
[0059] S320 calculates the longitude range of each tile in the target rendering map based on the x-coordinate of the first tile coordinate and the x-coordinate of the second tile coordinate.
[0060] S330 performs a function transformation on the ordinate of the first tile coordinate and the ordinate of the second tile coordinate for each tile in the target rendering map to determine the latitude range of each tile in the target rendering map.
[0061] Based on the scaling level, the total number of tiles along the longitude direction and the total number of tiles along the latitude direction of the target rendered map can be calculated separately, thus obtaining the second total number of tiles in the target rendered map. Using the second total number of tiles, the first coordinate, and the second coordinate, the first tile coordinate and the second tile coordinate of each tile in the target rendered map can be determined. The first tile coordinate is the coordinate of the lower left corner of each tile in the target rendered map, and the second tile coordinate is the coordinate of the upper right corner of each tile in the target rendered map. For example, the x-coordinate value of the first coordinate can be 0, and the x-coordinate value of the second coordinate can be n, where n is the total number of tiles along the longitude direction of the target rendered map. Therefore, the x-coordinate range of the target rendered map can be determined to be 0-n. Converting the x-coordinate range of the target rendered map 0-n to the longitude range of -180 to 180, the longitude range of the target rendered map can be determined. The y-coordinate value of the first coordinate can be 0, and the y-coordinate value of the second coordinate can be m, where m is the total number of tiles along the latitude direction of the target rendered map (where m and n can be equal or unequal). Therefore, the vertical coordinate range of the target rendered map can be determined to be 0-m. This vertical coordinate range (0-m) is converted to a numerical range of 0 to 90. Then, the converted numerical range is multiplied by 180 and divided by Math.PI to obtain the latitude values corresponding to the lower left and upper right corners of the target rendered map, thus determining the latitude range. Based on the longitude range of the target rendered map and the total number of tiles along the longitude direction, the longitude range of each tile in the target rendered map can be determined; similarly, based on the latitude range of the target rendered map and the total number of tiles along the latitude direction, the latitude range of each tile can be determined. Alternatively, based on the same principle, the horizontal and vertical coordinate ranges of each tile can be determined using the first and second tile coordinates. The longitude and latitude ranges of each tile in the target rendered map are then processed using the basic processing method `tileToLatLng` in a loop.
[0062] The basic processing method `handlerUrl` returns the address of each tile in the target rendered map based on the zoom level and the first and second coordinates of each tile. Simultaneously, it adds a corresponding index number to each tile in the target rendered map. Further, based on the address of each tile in the target rendered map, it requests the corresponding tile base map from the Google system, and then converts the corresponding tile base map into an object for constructing the target base map. Based on the index number of each tile in the target rendered map, the objects corresponding to each tile are concatenated to obtain the target base map. Then, based on the longitude and latitude range of each tile in the target rendered map, the format-converted geometric assets are rendered onto the target base map, thus obtaining the target image with the geometric assets.
[0063] Reference Appendix Figure 4 This illustrates a flowchart of a method for generating a target image according to an embodiment of this application. Figure 4 As shown, it includes:
[0064] S400, based on the address, obtains the tile base map corresponding to each tile in the target rendering map, and converts the tile base map corresponding to each tile in the target rendering map into the corresponding object.
[0065] S410 constructs a target base map based on the index number and the object of each tile in the target rendering map.
[0066] The S420 renders geometric assets onto the target base map based on the longitude and latitude ranges of each tile in the target rendering map to generate a target image.
[0067] After obtaining the address of each tile in the target rendered map, the basic processing method `blobToDataURI` iteratively requests the Google system based on the address of each tile to obtain the tile base map (or blob object) corresponding to each tile in the target rendered map. The basic processing method `getImage` converts the tile base map corresponding to each tile in the target rendered map into an Image object required for rendering to the canvas. The Image objects corresponding to each tile are concatenated according to their index numbers to obtain the target base map (the target base map is essentially a canvas created by Canvas.js). Further, based on the longitude and latitude range of each tile in the target rendered map, the geometric assets are rendered onto the target base map, and then a target image with the geometric assets is generated based on the rendered target base map (the target image is a Base64 encoded image). The principle of the basic processing method `blobToDataURI` is to accept a Blob object as a parameter and return a Promise object. This Promise object is parsed when the Blob object is converted into a Data URI Scheme format string. Data URIScheme is a mechanism that embeds data directly into URIs. It's commonly used to embed small files (such as images and fonts) directly into web pages or CSS without requiring additional HTTP requests. The basic processing method `getImage` accepts a `url` parameter, which is the URL address of the image (the address of each tile in the target rendered map), and returns an `Image` object. The final generated target image is based on Google Maps, can be used multiple times across multiple platforms, and does not depend on third-party map libraries such as MapBoxGL or OpenLayers.
[0068] This application's embodiments obtain the corresponding tile base map based on the address of each tile and convert these base maps into objects that can be manipulated during the rendering process. Next, these tile objects are systematically combined using index numbers to construct the target base map, providing an accurate geographic background for subsequent geometric asset rendering. Finally, based on the longitude and latitude range of each tile, the geometric assets are accurately rendered onto the target map, generating a target image containing the geometric assets. This process not only allows for the generation of a target image with geometric assets that can be used multiple times on multiple devices in a single step, but also eliminates the need for third-party map libraries.
[0069] In one embodiment of this application, the method further includes: when the original image ratio and the target image ratio are the same, using the scaled-down map to be rendered as the target rendering map.
[0070] This application also provides an image generation system, including modules or units for performing any of the above image generation methods. The image generation system includes: a calculation module configured to calculate bounding boxes based on format-converted geometric assets; a scaling module configured to scale the map to be rendered based on the longitude span, latitude span, and size of the bounding box, and determine the scaling level of the scaled map; an expansion module configured to expand the scaled map when the original image ratio of the scaled map is inconsistent with the target image ratio, and use the expanded map as the target rendering map; the calculation module is further configured to determine the longitude range, latitude range, and address of each tile in the target rendering map based on the scaling level, a first coordinate, and a second coordinate of the target rendering map; and a rendering module configured to generate a target image with geometric assets based on the geometric assets and the longitude range, latitude range, address, and index number of each tile in the target rendering map.
[0071] In one embodiment of this application, the calculation module is further configured to calculate the total number of first tiles along the longitude direction of the scaled map to be rendered based on the scaling level; the calculation module is further configured to calculate the third abscissa and the fourth abscissa of the scaled map to be rendered based on the longitude range and the total number of first tiles of the scaled map to be rendered; the coordinate transformation module is further configured to perform function transformations on the third abscissa and the fourth abscissa respectively to determine the third ordinate and the fourth ordinate; the calculation module is further configured to calculate the original image ratio of the scaled map to be rendered based on the third abscissa, the fourth ordinate, the third ordinate, and the fourth ordinate.
[0072] In one embodiment of this application, the calculation module is further configured to calculate the second total number of tiles in the target rendering map based on the scaling level; the calculation module is configured to calculate the first tile coordinate and the second tile coordinate of each tile in the target rendering map based on the second total number of tiles, the first coordinate, and the second coordinate; the calculation module is further configured to calculate the longitude range of each tile in the target rendering map based on the abscissa of the first tile coordinate and the abscissa of the second tile coordinate of each tile in the target rendering map; and the latitude conversion module is configured to perform a function conversion on the ordinate of the first tile coordinate and the ordinate of the second tile coordinate of each tile in the target rendering map to determine the latitude range of each tile in the target rendering map.
[0073] In one embodiment of this application, the system further includes: an acquisition module configured to acquire a tile base map corresponding to each tile in the target rendering map based on an address; an object conversion module configured to convert the tile base map corresponding to each tile in the target rendering map into a corresponding object; a construction module configured to construct a target base map based on an index number and the object of each tile in the target rendering map; and a rendering module configured to render the geometric assets onto the target map based on the longitude and latitude range of each tile in the target rendering map to generate a target image.
[0074] This application also provides a computer storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the image generation method described in any of the above embodiments.
[0075] It should be noted that the above embodiments can be freely combined as needed. The above are merely preferred embodiments of the present invention. It should be pointed out that for those skilled in the art, several improvements and modifications can be made without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.
Claims
1. A method for generating an image, characterized in that, include: Calculate the bounding box based on the geometric assets after format conversion; Based on the longitude span and latitude span of the bounding box and the size of the map to be rendered, the map to be rendered is scaled, and the scaling level of the scaled map to be rendered is determined. When the scale of the original image of the scaled map to be rendered is inconsistent with the scale of the target image, the scaled map to be rendered is expanded, and the expanded map to be rendered is used as the target rendering map. Based on the zoom level, the first coordinate and the second coordinate of the target rendered map, determine the longitude range, latitude range and address of each tile in the target rendered map; Based on the geometric assets and the longitude range, latitude range, address, and index number of each tile in the target rendering map, a target image with the geometric assets is generated.
2. The image generation method according to claim 1, characterized in that, Also includes: Based on the scaling level, calculate the total number of the first tiles along the longitude direction of the scaled map to be rendered; Based on the longitude range of the scaled map to be rendered and the total number of the first tiles, calculate the third and fourth horizontal coordinates of the scaled map to be rendered. Perform function transformations on the third and fourth horizontal coordinates respectively to determine the third and fourth vertical coordinates; Based on the third horizontal coordinate, the fourth vertical coordinate, the third vertical coordinate, and the fourth vertical coordinate, the scale of the original image of the map to be rendered after scaling is calculated.
3. The image generation method according to claim 2, characterized in that, The calculation of the longitude and latitude range of each tile in the target rendered map based on the zoom level, the first tile coordinates, and the second tile coordinates of the target rendered map specifically includes: Based on the scaling level, calculate the total number of the second tiles of the target rendered map; Based on the total number of the second tiles, the first coordinate, and the second coordinate, calculate the first tile coordinate and the second tile coordinate for each tile in the target rendered map; Based on the x-coordinate of the first tile coordinate and the x-coordinate of the second tile coordinate of each tile in the target rendering map, calculate the longitude range of each tile in the target rendering map; The ordinates of the first and second tile coordinates of each tile in the target rendering map are transformed by a function to determine the latitude range of each tile in the target rendering map.
4. The image generation method according to claim 3, characterized in that, The process of generating a target image with the geometric assets based on the geometric assets, the longitude range, the latitude range, and the address and index number of each tile in the target rendering map specifically includes: Based on the address, obtain the tile base map corresponding to each tile in the target rendering map, and convert the tile base map corresponding to each tile in the target rendering map into a corresponding object; Construct a target base map based on the index number and the objects in each tile of the target rendered map; Based on the longitude and latitude range of each tile in the target rendering map, the geometric assets are rendered onto the target base map to generate the target image.
5. The image generation method according to any one of claims 1-4, characterized in that, Also includes: When the original image ratio and the target image ratio are the same, the scaled-up map to be rendered is used as the target rendering map.
6. An image generation system, characterized in that, include: The calculation module is configured to calculate bounding boxes based on the geometric assets after format conversion; The scaling module is configured to scale the map to be rendered based on the longitude span, latitude span, and size of the bounding box, and to determine the scaling level of the scaled map to be rendered. The extension module is configured to expand the scaled map to be rendered when the original image ratio of the scaled map to be rendered is inconsistent with the target image ratio, and to use the expanded map to be rendered as the target rendering map. The calculation module is also configured to determine the longitude range, latitude range, and address of each tile in the target rendering map based on the zoom level, the first coordinate, and the second coordinate of the target rendering map; The rendering module is configured to generate a target image with the geometric assets based on the geometric assets and the longitude range, latitude range, address, and index number of each tile in the target rendering map.
7. The image generation system according to claim 6, characterized in that, The calculation module is also configured to calculate the total number of first tiles along the longitude direction of the scaled map to be rendered based on the scaling level. The calculation module is further configured to calculate the third and fourth abscissas of the scaled map to be rendered based on the longitude range of the scaled map to be rendered and the total number of the first tiles. The coordinate transformation module is also configured to perform function transformations on the third horizontal coordinate and the fourth horizontal coordinate respectively to determine the third vertical coordinate and the fourth vertical coordinate; The calculation module is further configured to calculate the scale of the original image of the scaled map to be rendered based on the third horizontal coordinate, the fourth vertical coordinate, the third vertical coordinate, and the fourth vertical coordinate.
8. The image generation system according to claim 6 or 7, characterized in that, The calculation module is also configured to calculate the second total number of tiles of the target rendered map based on the scaling level; The calculation module is configured to calculate the first tile coordinates and the second tile coordinates of each tile in the target rendered map based on the second total number of tiles, the first coordinates, and the second coordinates; The calculation module is further configured to calculate the longitude range of each tile in the target rendering map based on the abscissa of the first tile coordinate and the abscissa of the second tile coordinate of each tile in the target rendering map. The latitude conversion module is configured to perform a function conversion on the ordinate of the first tile coordinate and the ordinate of the second tile coordinate of each tile in the target rendering map to determine the latitude range of each tile in the target rendering map.
9. The image generation system according to claim 8, characterized in that, Also includes: The acquisition module is configured to acquire the tile base map corresponding to each tile in the target rendered map based on the address; The object conversion module is configured to convert the tile base map corresponding to each tile in the target rendered map into a corresponding object; The construction module is configured to construct a target base map based on the index number and the object of each tile in the target rendered map; The rendering module is configured to render the geometric assets onto the target base map based on the longitude and latitude range of each tile in the target rendering map, in order to generate the target image.
10. A computer storage medium, characterized in that, It stores a computer program that, when executed by a processor, implements the steps of the image generation method according to any one of claims 1-5.
Citation Information
Patent Citations
Online automatic matching method for geometric correction of remote sensing image
CN105160684A
Interactive display system and interactive display method of steel trade price index information map
CN106777136A
An online map preservation method based on Canvas
CN109542987A
Three-dimensional ground penetrating radar measuring line coverage display method based on tile maps
CN112327291A
Parcel coordinate data desensitization method, device and equipment and medium
CN117974925A