Map customized region screenshot method and device based on front-end interaction, equipment and medium

Abstract

This invention discloses a method, apparatus, device, and medium for custom map area screenshots based on front-end interaction. The method includes: determining a target map screenshot area and its corresponding region pixel coordinates and map zoom level; if the map container has a container offset, determining the offset amount and updating the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area; generating a target tile set based on the actual pixel coordinates and the map zoom level; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers; downloading tile images of each tile to be downloaded according to its tile row and column numbers, and generating a target tile stitched image based on the downloaded tile images; cropping the target tile stitched image according to the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, and sending the target map screenshot image back to the target user.

Description

Technical Field

[0001] This invention relates to the field of computer image processing and map application technology, and in particular to a method, apparatus, device and medium for taking screenshots of custom map regions based on front-end interaction. Background Technology

[0002] Existing online map platforms, such as Amap, provide users with map browsing, basic positioning, and viewport screenshot functions. Their map data is segmented, stored, and loaded in the form of tiles, which is the core technology for achieving efficient rendering of online maps.

[0003] However, in existing technologies, mainstream online map platforms do not offer cross-viewport screenshot interfaces for custom rectangular areas. They only support screenshots of map areas within the current page viewport, limiting the screenshot range to a small area within the current viewport and failing to capture large-size, cross-viewport map screenshots that users can select themselves. If users need to obtain a custom area map base map, they can only achieve this by manually stitching together screenshots from multiple viewports, which is cumbersome, inefficient, and prone to misalignment and blurring at the stitching points, compromising image integrity and accuracy. Summary of the Invention

[0004] This invention provides a method, apparatus, device, and medium for taking screenshots of custom map regions based on front-end interaction, thereby enabling screenshots of custom map regions based on front-end interaction, solving the problems of limited screenshot range, inability to independently select large sizes, and screenshots across viewport regions, and improving the efficiency and image accuracy of custom region screenshots.

[0005] According to one aspect of the present invention, a method for taking screenshots of custom map regions based on front-end interaction is provided, the method comprising:

[0006] When a map screenshot event is detected on the front-end interface of a target user taking a screenshot of the target map rendered below the interactive layer, the map screenshot event is parsed to obtain the target map screenshot area and its corresponding area pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container;

[0007] If the map container has a container offset, then the offset of the map container is determined, and the region pixel coordinates are updated according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area;

[0008] Based on the actual pixel coordinates and the map zoom level, a target tile set is generated; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers;

[0009] The tile images of each tile to be downloaded are downloaded according to the tile row and column numbers of each tile to be downloaded, and a target tile splicing image is generated based on the downloaded tile images;

[0010] The target tile mosaic image is cropped based on the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, and the target map screenshot image is then fed back to the target user.

[0011] According to another aspect of the present invention, a map custom area screenshot device based on front-end interaction is provided, the device comprising:

[0012] The event parsing module is used to parse the map screenshot event when the target user takes a screenshot of the target map rendered below the interactive layer on the front-end interface, to obtain the target map screenshot area and its corresponding pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container;

[0013] The actual pixel coordinate determination module is used to determine the offset of the map container if the map container has a container offset, and update the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area.

[0014] The tile set generation module is used to generate a target tile set based on the actual pixel coordinates and the map zoom level; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers;

[0015] The tile image download module is used to download the tile image of each tile according to the tile row and column number of each tile to be downloaded, and generate a target tile splicing image based on the downloaded tile image;

[0016] The target map image feedback module is used to crop the target tile stitched image according to the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, and to feed the target map screenshot image back to the target user.

[0017] According to another aspect of the present invention, an electronic device is provided, the electronic device comprising:

[0018] At least one processor; and

[0019] A memory communicatively connected to the at least one processor; wherein,

[0020] The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to execute the map custom area screenshot method based on front-end interaction as described in any embodiment of the present invention.

[0021] According to another aspect of the present invention, a computer-readable storage medium is provided, the computer-readable storage medium storing computer instructions, the computer instructions being configured to cause a processor to execute and implement the map custom area screenshot method based on front-end interaction as described in any embodiment of the present invention.

[0022] This invention's technical solution determines the target map screenshot area and its corresponding actual pixel coordinates by listening to user-defined map screenshot events. Based on the actual pixel coordinates and the map zoom level, a target tile set is generated. Each tile to be downloaded is downloaded according to its row and column numbers. A target tile stitched image is generated from the downloaded tile images. The target tile stitched image is then cropped based on the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, which is then fed back to the target user. This technical solution achieves automated acquisition and stitching of custom area map tiles based on front-end interaction. It supports screenshots of areas of any size and location, solving the problems of limited screenshot range due to the viewport-only screenshot capability in existing technologies, as well as the inability to manually select large sizes and cross-viewport areas. Through pixel conversion and tile row and column number determination technologies, it achieves accurate matching between the screenshot area and map tiles, effectively avoiding manual stitching misalignment and blurring issues, and improving the efficiency, image accuracy, and image integrity of custom area screenshots.

[0023] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description

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

[0025] Figure 1 This is a flowchart of a map custom area screenshot method based on front-end interaction according to Embodiment 1 of the present invention;

[0026] Figure 2This is a flowchart of a map custom area screenshot method based on front-end interaction according to Embodiment 2 of the present invention;

[0027] Figure 3 This is a flowchart of a method for taking screenshots of a custom map region based on front-end interaction, according to Embodiment 3 of the present invention.

[0028] Figure 4 This is a flowchart of a map custom area screenshot method based on front-end interaction according to Embodiment 4 of the present invention;

[0029] Figure 5 This is a schematic diagram of a map custom area screenshot device based on front-end interaction according to Embodiment 5 of the present invention;

[0030] Figure 6 This is a schematic diagram of the structure of an electronic device that implements the map custom area screenshot method based on front-end interaction according to the embodiments of the present invention. Detailed Implementation

[0031] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0032] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0033] Example 1

[0034] Figure 1This is a flowchart of a method for capturing a custom map region based on front-end interaction, provided in Embodiment 1 of the present invention. This embodiment is applicable to situations where a custom region is captured from a target map displayed on a front-end map interface. This method can be executed by a flowchart device for capturing a custom map region based on front-end interaction. This flowchart device can be implemented in hardware and / or software, and can be configured in an electronic device. Figure 1 As shown, the method includes:

[0035] S110. When the target user takes a screenshot of the target map rendered below the interactive layer on the front-end interface, the map screenshot event is parsed to obtain the target map screenshot area and its corresponding area pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container.

[0036] S120. If the map container has a container offset, determine the offset of the map container and update the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area.

[0037] S130. Based on the actual pixel coordinates and the map zoom level, generate a target tile set; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers.

[0038] S140. Download the tile image of each tile according to the tile row and column number of each tile to be downloaded, and generate the target tile splicing image based on the downloaded tile image.

[0039] S150. Based on the actual pixel coordinates of the target map screenshot area, crop the target tile mosaic image to obtain the target map screenshot image, and send the target map screenshot image back to the target user.

[0040] The target users are those who need to take screenshots of custom areas of the map base map. The target map can be displayed on the front-end interface by calling the map platform API (Application Programming Interface).

[0041] For example, the center point latitude and longitude of the target map and the map zoom level can be pre-configured, the map container can be initialized, and the target map can be loaded and rendered in the map container of the front-end interactive interface based on the map platform API to which the target map belongs. The HTML5 Canvas API (HTML5 Canvas Application Programming Interface) can be called to create a Canvas of the same size as the map container, and the Canvas can be overlaid on top of the map container, with a higher layer, and its transparency can be set to make it easier for users to see the correspondence between the selected area and the target map.

[0042] Based on Canvas2D, an interactive Canvas layer is overlaid on top of the map container. This layer is the same size as the map container and does not obscure the map, providing users with map selection functionality. Users can drag and drop the target map area onto this interactive layer using a mouse or other interactive device, thus generating a screenshot of the target map area. Pre-set event listeners in the backend monitor native JavaScript events such as mousedown (mouse down), mousemove (mouse drag), and mouseup (mouse up) to enable real-time drawing and coordinate capture of the selected area.

[0043] When a screenshot event of the target user taking a picture of the target map rendered below the interactive layer is detected on the front-end interface (i.e., when mouse press, drag, and release events are detected), the screenshot event is parsed to determine the screen coordinates of the user's mouse press and release. Based on these coordinates, the target map screenshot area is determined. The mouse press and release coordinates are used as the pixel coordinates of the area. Specifically, the mouse press coordinates are the top-left pixel coordinates of the target map screenshot area, and the mouse release coordinates are the bottom-right pixel coordinates of the target map screenshot area.

[0044] It should be noted that the target map has a corresponding map zoom level after being rendered on the front-end interface. For example, the map zoom level can be 16. The determined target map screenshot area and its corresponding area pixel coordinates, including the top left and bottom right pixel coordinates, as well as the map zoom level, are stored in a temporary variable on the front end.

[0045] It's understandable that the map container carrying the target map might have container offset or page offset. When container offset exists, the pixel coordinates of the area corresponding to the target map screenshot need to be calibrated. When there is no container offset, there is no need to calibrate the pixel coordinates of the area corresponding to the target map screenshot. The pixel coordinates of the target map screenshot area are the actual pixel coordinates.

[0046] When the map container has an offset, determine the offset amount of the map container. ,in, This represents the offset in the X-axis direction. This is the offset in the Y-axis direction. If the top-left pixel coordinate of the region is... The bottom right pixel coordinates are The top-left pixel coordinates of the actual pixel coordinates corresponding to the target map screenshot area are... The bottom right pixel coordinates of the actual pixel coordinates corresponding to the target map screenshot area. .

[0047] Based on the actual pixel coordinates and the map zoom level, a target tile set is generated. This target tile set includes at least one tile to be downloaded and its corresponding row and column numbers. Specifically, based on the actual pixel coordinates and the map zoom level, all tiles within the target map cropping area selected by the user can be determined, and these all tiles are selected as the tiles to be downloaded.

[0048] Understandably, in the target map, the positions of tiles are represented in latitude and longitude, while the actual pixel coordinates are two-dimensional planar pixel coordinates. Therefore, it is necessary to convert the actual pixel coordinates to the latitude and longitude coordinates corresponding to the target map. Based on the tile's latitude and longitude coordinates, the set of tiles contained in the target map screenshot area selected by the user can be determined. In the process of converting pixel coordinates to latitude and longitude coordinates, the coordinate conversion function API of the map platform to which the target map belongs can be used to directly convert the screen coordinates to the platform's corresponding latitude and longitude coordinates.

[0049] The process involves determining the row and column numbers of each tile to be downloaded, and then downloading the tile images based on these numbers. Specifically, this can be done by calling the tile download API of the target map platform. After obtaining the tile images for each tile, the downloaded images are stitched together to obtain the stitched image of the target tile.

[0050] It should be noted that the target tile mosaic image is the initial image, which contains some areas that the target user has not selected. Therefore, after obtaining the target tile mosaic image, it can be precisely cropped according to the actual pixel coordinates to remove redundant tile parts that exceed the user's selected area, thereby obtaining a map area that is completely consistent with the target user's selected area or screenshot, so as to ensure the accuracy of the output image.

[0051] In one optional embodiment, cropping the target tile mosaic image based on the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image includes: determining the pixel offset between the target map screenshot area and the target tile mosaic image; determining the cropping width and height based on the actual pixel coordinates of the target map screenshot area; and cropping the target tile mosaic image based on the pixel offset and the cropping width and height to obtain the target map screenshot image.

[0052] Specifically, based on the actual pixel coordinates of the target map screenshot area. and By combining the pixel mapping relationship between the target map screenshot area and the target tile mosaic image, the pixel offset or cropping offset between the target map screenshot area and the target tile mosaic image can be determined. And based on the actual pixel coordinates of the target map screenshot area. and Determine the cutting width and height ,in, , .

[0053] The cropping width and height are the actual dimensions of the area selected by the target user. The top-left and bottom-right pixel offsets of the target map screenshot area in the target tile mosaic image can be calibrated using coordinate mapping.

[0054] Create a new Canvas clipping canvas with the following dimensions: The drawing function is invoked to perform pixel-level precise cropping of the target tile mosaic image based on pixel offset and cropping width and height, removing redundant parts of the mosaic image that exceed the target user selection area. The drawing function can be the HTML5 Canvas 2D API function ctx.drawImage(), which draws images, videos, or content from another canvas onto the current Canvas.

[0055] Optionally, anti-aliasing can be applied to the cropped canvas. For example, the smoothing property parameter used to control the image during scaling can be set to "ctx.imageSmoothingEnabled = true" to achieve sharpness adjustment and ensure that the cropped edges are smooth without blurring or misalignment.

[0056] The above technical solution calculates cropping parameters by combining the pixel mapping relationship between the map and the stitching canvas. This accurately restores the map area captured or selected by the target user, completely removing redundant tiles that extend beyond the target area in the stitched image, thus avoiding deviations such as over- or under-cropping. Combined with anti-aliasing and sharpness optimization, it ensures smooth, jagged edges during cropping, while avoiding blurring, misalignment, and color distortion that may occur during stitching and cropping. The final output image is visually highly consistent with the original map.

[0057] Once the target tile mosaic image is obtained, the image can be converted into standardized image data. For example, the `toDataURL(type, quality)` method of the HTML5 Canvas API can be called. This method converts the Canvas content into a data URL (Uniform Resource Locator), that is, converting the image or graphic content on the canvas into a Base64 encoded image string. Here, `type` specifies the image format, such as `image` or `png` (these formats use lossless compression, ensuring clear map text or lines). Alternatively, you can choose `image / jpg`, `image / webp`, etc., depending on the target user's actual needs. `Quality` specifies the compression quality, ranging from 0 to 1. No setting is needed for PNG format, while JPG format can be set to 0.9-0.95 to balance quality and file size.

[0058] The generated standardized map screenshot image files can be displayed to the target users through the front-end interface as downloadable links or page preview images.

[0059] Optionally, in this embodiment, the area selected by the target user is not limited to a rectangular area, but can be a polygonal area, such as a pentagon or hexagon. When the area selected by the target user is a polygonal area, the maximum bounding rectangle of the polygonal area can be determined, and subsequent tile downloading and stitching can be performed within the determined maximum bounding rectangle. After obtaining the stitched image, during the cropping process of the stitched image, the area is cropped based on the coordinates of several corner points of the polygon selected by the target user, and the final target map screenshot image is fed back to the target user.

[0060] This invention's technical solution determines the target map screenshot area and its corresponding actual pixel coordinates by listening to user-defined map screenshot events. Based on the actual pixel coordinates and the map zoom level, a target tile set is generated. Each tile to be downloaded is downloaded according to its row and column numbers. A target tile stitched image is generated from the downloaded tile images. The target tile stitched image is then cropped based on the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, which is then fed back to the target user. This technical solution achieves automated acquisition and stitching of custom area map tiles based on front-end interaction. It supports screenshots of areas of any size and location, solving the problems of limited screenshot range due to the viewport-only screenshot capability in existing technologies, as well as the inability to manually select large sizes and cross-viewport areas. Through pixel conversion and tile row and column number determination technologies, it achieves accurate matching between the screenshot area and map tiles, effectively avoiding manual stitching misalignment and blurring issues, and improving the efficiency, image accuracy, and image integrity of custom area screenshots.

[0061] Example 2

[0062] Figure 2 This is a flowchart of a map custom area screenshot method based on front-end interaction provided in Embodiment 2 of the present invention. This embodiment has been optimized and improved based on the above technical solutions.

[0063] Furthermore, the step "generate a target tile set based on the actual pixel coordinates and the map zoom level" is refined to "convert the actual pixel coordinates to latitude and longitude based on the map zoom level to obtain the latitude and longitude coordinates of the target map screenshot area; generate a target tile set based on the latitude and longitude coordinates of the target map screenshot area and the map zoom level." This improves the method for generating the target tile set.

[0064] It should be noted that for parts not described in detail in the embodiments of the present invention, please refer to the descriptions in other embodiments. For example... Figure 2 As shown, the method includes the following specific steps:

[0065] S210. When the target user takes a screenshot of the target map rendered below the interactive layer on the front-end interface, the map screenshot event is parsed to obtain the target map screenshot area and its corresponding area pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container.

[0066] S220. If the map container has a container offset, determine the offset of the map container and update the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area.

[0067] S230. Based on the map zoom level, perform latitude and longitude conversion on the actual pixel coordinates to obtain the latitude and longitude coordinates of the target map screenshot area.

[0068] S240. Based on the latitude and longitude coordinates of the target map screenshot area and the map zoom level, generate a target tile set; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers.

[0069] S250. Download the tile image of each tile according to its row and column number, and generate the target tile splicing image based on the downloaded tile image.

[0070] S260. Based on the actual pixel coordinates of the target map screenshot area, crop the target tile mosaic image to obtain the target map screenshot image, and send the target map screenshot image back to the target user.

[0071] For example, the coordinate conversion API publicly provided by the map platform to which the target map belongs can be used to perform the coordinate-to-latitude-longitude conversion. However, it should be noted that if the map platform to which the target map belongs does not publicly provide a coordinate conversion API, or to further improve the efficiency of coordinate conversion, the conversion can be performed by the server or device at the map pixel level. This avoids the problems of low conversion efficiency caused by call delays and call blocking during the coordinate conversion API call process.

[0072] In one optional embodiment, the latitude and longitude coordinates of the actual pixel coordinates are converted based on the map zoom level to obtain the latitude and longitude coordinates of the target map screenshot area, including: determining the total pixel size of the Earth according to the map zoom level; determining the relative pixel coordinates of the actual pixel coordinates relative to the map origin of the target map; and determining the latitude and longitude coordinates of the target map screenshot area according to the relative pixel coordinates.

[0073] For example, the total pixel size L of the Earth is determined based on the map zoom level Z:

[0074]

[0075] Where X is the pixel size of a single tile, which is usually 256; This indicates the number of tile rows and columns at map zoom level Z.

[0076] Assuming the actual pixel coordinates are: The bottom right pixel coordinates are Then, the relative pixel coordinates corresponding to the actual pixel coordinates are determined based on the map origin of the target map. and They are respectively:

[0077]

[0078]

[0079]

[0080]

[0081] Based on relative pixel coordinates, determine the latitude and longitude coordinates of the target map screenshot area, including the latitude and longitude coordinates of the top-left corner corresponding to the top-left pixel coordinates. And the latitude and longitude coordinates of the bottom right pixel coordinates. :

[0082]

[0083]

[0084]

[0085]

[0086] Therefore, based on the above formula, the latitude and longitude coordinates of the upper left corner of the target map screenshot area can be determined. and latitude and longitude coordinates in the lower right corner .

[0087] The above technical solution converts the pixel coordinates of the target map screenshot area to latitude and longitude coordinates based on the above formula, avoiding the call to the coordinate conversion function API of the map platform to which the target map belongs. Moreover, this method does not have API interface call permission restrictions, and can further avoid efficiency problems such as call congestion and call delay caused by API call methods.

[0088] Based on the latitude and longitude coordinates of the target map screenshot area and the map zoom level, all tiles contained within the target map screenshot area can be generated, i.e., the tiles to be downloaded. The set containing all the tiles to be downloaded is the target tile set.

[0089] In one optional embodiment, a target tile set is generated based on the latitude and longitude coordinates of the target map screenshot area and the map zoom level, including: determining the tile column number based on the longitude coordinates of the target map screenshot area and the map zoom level; and determining the tile row number based on the latitude coordinates of the target map screenshot area and the map zoom level; and generating the target tile set based on the tile column number and the tile row number.

[0090] Specifically, the tile size and row / column numbering rules corresponding to the map platform of the target map are determined in advance, such as whether it starts from 0 and whether the origin is the top-left pixel. The longitude coordinates in the top-left latitude and longitude coordinates of the target map screenshot area are then used as the basis for this determination. Based on the map zoom level Z, determine the tile column number corresponding to the latitude and longitude of the top left corner. :

[0091]

[0092] in, This is a JavaScript mathematical function used to round numbers down, that is, to return the largest integer less than or equal to a given number.

[0093] Based on the latitude coordinates of the upper left corner of the target map screenshot area. Based on the map zoom level Z, determine the tile row number corresponding to the latitude and longitude of the top left corner. :

[0094]

[0095] Based on the latitude and longitude coordinates in the lower right corner of the target map screenshot area... Based on the map zoom level Z, determine the tile column number corresponding to the latitude and longitude in the lower right corner. :

[0096]

[0097] Based on the latitude coordinates in the lower right corner of the target map screenshot area Based on the map zoom level Z, determine the tile row number corresponding to the latitude and longitude in the lower right corner. :

[0098]

[0099] Based on the above method, the row number and column number of the region tiles in the target map screenshot area can be determined. The region tile row number includes the row number of the top-left region tile. and the tile row number in the lower right corner area The area tile column number includes the top-left area tile column number. and the tile column number in the lower right corner area .

[0100] Traverse the tile row number range and tile column number range The target tile set is obtained. This collection contains all tiles that fully or partially cover the target map screenshot area, i.e., the tiles to be downloaded.

[0101] In one specific embodiment, assuming the tile row and column number corresponding to the latitude and longitude of the upper left corner is... The tile row and column numbers corresponding to the latitude and longitude in the lower right corner are: The tiles to be downloaded in the target tile set are (23456,45678), (23456,45679), (23456,45680), (23457,45678), (23457,45679) and (23458,45678).

[0102] The above technical solution determines the row and column numbers of regional tiles based on latitude and longitude coordinates and map zoom level, and generates a target tile set based on the row and column numbers of regional tiles. This achieves a precise mapping between geographical range and tile index, ensuring that no tiles are missed or redundant in the target area, thus avoiding misalignment problems in subsequent splicing and cropping from the source.

[0103] This embodiment's technical solution achieves accurate conversion from pixel coordinates to latitude and longitude based on map zoom level, thereby clarifying the geographical boundaries of the target screenshot area. It also generates a set of target tiles based on the same zoom level and latitude and longitude coordinates, ensuring the accuracy of geographic positioning and tile matching. This avoids missing or misaligned screenshot content and redundant resource consumption, improving the accuracy of determining the tiles to be downloaded, and thus improving the accuracy of subsequent tile image stitching.

[0104] Example 3

[0105] Figure 3 This is a flowchart of a map custom area screenshot method based on front-end interaction provided in Embodiment 3 of the present invention. This embodiment has been optimized and improved based on the above technical solutions.

[0106] Furthermore, the step "downloading the tile image of each tile according to its row and column numbers, and generating the target tile mosaic image based on the downloaded tile images" is refined to "obtaining the tile access address format corresponding to the map platform to which the target map belongs; generating the tile download address corresponding to each tile according to its row and column numbers and map zoom level, based on the tile access address format; obtaining the tile image corresponding to each tile through its respective tile download address; and stitching the tile images of each tile to obtain the target tile mosaic image." This improves the method for generating the target tile mosaic image.

[0107] It should be noted that for parts not described in detail in the embodiments of the present invention, please refer to the descriptions in other embodiments. For example... Figure 3 As shown, the method includes the following specific steps:

[0108] S310. When a map screenshot event of the target user on the front-end interface, which is rendered below the interactive layer, is detected, the map screenshot event is parsed to obtain the target map screenshot area and its corresponding area pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container.

[0109] S320. If the map container has a container offset, determine the offset of the map container and update the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area.

[0110] S330. Based on the actual pixel coordinates and the map zoom level, generate a target tile set; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers.

[0111] S340. Obtain the tile access address format corresponding to the map platform to which the target map belongs.

[0112] S350. Based on the tile row and column numbers and map zoom level of each tile to be downloaded, and according to the tile access address format, generate the tile download address corresponding to each tile to be downloaded.

[0113] S360: Obtain the tile image corresponding to each tile to be downloaded through the tile download address corresponding to each tile to be downloaded.

[0114] S370. Perform image stitching on the tile images of each tile to be downloaded to obtain the target tile stitched image.

[0115] S380. Based on the actual pixel coordinates of the target map screenshot area, crop the target tile mosaic image to obtain the target map screenshot image, and send the target map screenshot image back to the target user.

[0116] It's important to note that different map platforms have their own fixed tile access URL formats, including core parameters such as row and column numbers, map zoom levels, and server IDs. Therefore, it's possible to pre-obtain the tile access URL format corresponding to the target map's platform. For example, the tile access URL format for the target map's platform might be "https: / / webst0{1-4}.is.autonavi.com / appmaptile?style=6&x=col&y=row&z=z". Here, {1-4} represents a random server ID, col and row are the tile row and column numbers, and z is the map zoom level.

[0117] For any tile to be downloaded, by substituting its row and column numbers and map zoom level into the tile access address format, the corresponding tile download address can be obtained. This tile download address is used to download the tile image.

[0118] Obtain the tile image corresponding to each tile to be downloaded from its respective download address. Specifically, tile resources can be requested and downloaded asynchronously and in parallel. The downloaded tile images are then stitched together to obtain the target tile image.

[0119] It should be noted that when the number of tiles is too large or the splicing size is too large, the splicing efficiency will be low, requiring each tile to be drawn sequentially on the created canvas, thus affecting the generation efficiency of the target tile splicing image. Therefore, this embodiment also provides a method for generating the target tile splicing image when the number of tiles is too large or the splicing size is too large.

[0120] In one optional embodiment, the tile images of each tile to be downloaded are stitched together to obtain a target tile stitched image, including:

[0121] Step a1: Generate an image splicing canvas based on the tile row and column numbers of each tile to be downloaded.

[0122] Step a2: If the number of tiles to be downloaded is greater than the preset tile number threshold, or the canvas size of the image splicing canvas is greater than the preset canvas size threshold, then the image splicing canvas is split according to the preset fixed size to obtain at least one image splicing sub-canvas.

[0123] Step a3: Determine the image splicing sub-canvas to which each tile to be downloaded belongs based on its tile row and column numbers.

[0124] Step a4: For any image splicing sub-canvas, determine the drawing coordinates of each tile to be downloaded in the image splicing sub-canvas, and draw the tile image of each tile to be downloaded in the image splicing sub-canvas based on the drawing coordinates, thereby obtaining the splicing sub-image corresponding to the image splicing sub-canvas.

[0125] Step a5: Generate the target tile splicing image based on the splicing sub-images corresponding to each image splicing sub-canvas.

[0126] For example, based on the top-left row and column number of each tile to be downloaded. and the row and column numbers in the bottom right corner The number of horizontal columns can be determined: and number of vertical columns Therefore, the canvas width W of the image stitching canvas is: The canvas height H is .

[0127] Determine the number of tiles to be downloaded and the canvas size of the image stitching canvas. If the number of tiles to be downloaded is not greater than a preset tile number threshold, and the canvas size of the image stitching canvas is not greater than a preset canvas size threshold, then download the tiles according to their row and column numbers. Calculate the tile's drawing coordinates within the image stitching canvas, and then use the ctx.drawImage() function to draw the tile onto the canvas. Once all the tiles to be downloaded have been drawn, the target tile stitched image is obtained.

[0128] If the number of tiles to be downloaded exceeds a preset tile count threshold, or the canvas size of the image stitching canvas exceeds a preset canvas size threshold, then to further improve the efficiency of image stitching generation, the image stitching canvas is split according to a preset fixed size to obtain at least one image stitching sub-canvas. The tile count threshold, canvas size threshold, and fixed size can be preset by relevant technical personnel. For example, the tile count threshold can be set to 100 tiles, the canvas size threshold can be set to 4096×4096px, and the fixed size can be set to 2048×2048px. Correspondingly, the resulting image stitching sub-canvas will have a size of 2048×2048px.

[0129] The image stitching sub-canvas to which each tile belongs is determined based on its row and column numbers. For any given image stitching sub-canvas, the drawing coordinates of each tile belonging to that sub-canvas are determined within that sub-canvas. Specifically, the drawing coordinates within the sub-canvas can be determined based on the row and column numbers of each tile. Based on the drawing coordinates corresponding to each tile, the tile images of each tile are drawn in the image stitching sub-canvas, resulting in the corresponding stitched sub-image. The stitched sub-images of each image stitching sub-canvas are then stitched together according to their drawing positions and order to obtain the target tile stitched image.

[0130] It should be noted that the process of drawing the stitched sub-images can be a parallel process, that is, each stitched sub-image is drawn at the same time, which improves the efficiency of sub-image drawing.

[0131] The above technical solution significantly improves the image rendering efficiency when there are too many tiles or the canvas size is too large, and improves the generation efficiency of the target tile splicing image by splitting the image splicing canvas and drawing splicing sub-images in parallel on the split image splicing sub-canvas when the number of tiles to be downloaded is greater than a preset tile number threshold, or the canvas size of the image splicing canvas is greater than a preset canvas size threshold.

[0132] This embodiment's technical solution obtains the tile access address format corresponding to the target map platform, combines the tile row and column numbers with the zoom level to generate a precise tile download address, and then acquires the target tile image and completes the stitching. This achieves precise acquisition of tiles from different target map platforms, avoids redundant resource consumption and geographic positioning errors, ensures the integrity and continuity of the stitched image, and provides a reliable foundation for subsequent image cropping and other operations.

[0133] Example 4

[0134] Figure 4 This is a schematic diagram of the flowchart of a map custom area screenshot method based on front-end interaction provided in Embodiment 4 of the present invention. This embodiment provides a preferred example based on the above embodiments.

[0135] like Figure 4 As shown, the method includes the following steps:

[0136] S41. Listen for screenshot events of the target user on the target map, determine the screenshot area of ​​the target map and its corresponding pixel coordinates, as well as the map zoom level of the target map.

[0137] Specifically, when a map screenshot event is detected on the front-end interface where the target user takes a screenshot of the target map rendered below the interactive layer, the map screenshot event is parsed to obtain the target map screenshot area and its corresponding pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered inside the map container.

[0138] S42. Determine if the map container has a container offset. If it does, execute S43A. If it does not, execute S43B.

[0139] S43A. Determine the offset of the map container and update the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area.

[0140] S43B: Use the region pixel coordinates of the target map screenshot area as the actual pixel coordinates.

[0141] S44. Determine whether the coordinate transformation function API of the map platform to which the target map belongs can be successfully called; if yes, execute S45A; if no, execute S45B-S45C.

[0142] S45A: Call the coordinate transformation function API to convert the actual pixel coordinates of the target map screenshot area into latitude and longitude coordinates.

[0143] S45B. Determine the total pixel size of the Earth based on the map zoom level, and determine the relative pixel coordinates of the actual pixel coordinates relative to the map origin of the target map.

[0144] S45C. Determine the latitude and longitude coordinates of the target map screenshot area based on the relative pixel coordinates.

[0145] S46A. Based on the longitude coordinates of the target map screenshot area, determine the tile column number of the area according to the map zoom level.

[0146] S46B. Based on the latitude coordinates in the latitude and longitude coordinates of the target map screenshot area, determine the tile row number of the area based on the map zoom level.

[0147] S47. Generate a target tile set based on the region tile column number and region tile row number; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column number.

[0148] S48. Obtain the tile access address format corresponding to the map platform to which the target map belongs, and generate the tile download address corresponding to each tile to be downloaded based on the tile row and column number and map zoom level of each tile to be downloaded, according to the tile access address format.

[0149] S49. Obtain the tile image corresponding to each tile to be downloaded through the tile download address of each tile to be downloaded, and stitch the tile images of each tile to be downloaded to obtain the target tile stitched image.

[0150] Specifically, an image stitching canvas is generated based on the tile row and column numbers of each tile to be downloaded. If the number of tiles to be downloaded exceeds a preset tile number threshold, or the canvas size of the image stitching canvas exceeds a preset canvas size threshold, the image stitching canvas is split according to a preset fixed size to obtain at least one image stitching sub-canvas. The image stitching sub-canvas to which each tile to be downloaded belongs is determined based on its tile row and column numbers. For any image stitching sub-canvas, the drawing coordinates of each tile to be downloaded belonging to that image stitching sub-canvas are determined, and the tile images of each tile to be downloaded are drawn in the image stitching sub-canvas based on the drawing coordinates to obtain the stitching sub-image corresponding to that image stitching sub-canvas. The target tile stitching image is generated based on the stitching sub-images corresponding to each image stitching sub-canvas.

[0151] S410. Based on the actual pixel coordinates of the target map screenshot area, crop the target tile mosaic image to obtain the target map screenshot image, and send the target map screenshot image back to the target user.

[0152] Specifically, determine the pixel offset between the target map screenshot area and the target tile mosaic image; determine the cropping width and height based on the actual pixel coordinates of the target map screenshot area; and crop the target tile mosaic image based on the pixel offset and the cropping width and height to obtain the target map screenshot image.

[0153] Example 5

[0154] Figure 5 This is a schematic diagram of a map custom area screenshot device based on front-end interaction provided in Embodiment 5 of the present invention. The map custom area screenshot device based on front-end interaction provided in this embodiment of the present invention is applicable to situations where a custom area is captured from a target map displayed on a front-end map interface. This map custom area screenshot device based on front-end interaction can be implemented in hardware and / or software, such as... Figure 5 As shown, the device includes: an event parsing module 501, an actual pixel coordinate determination module 502, a tile set generation module 503, a tile image download module 504, and a target map image feedback module 505. Among them,

[0155] The event parsing module 501 is used to parse the map screenshot event when the target user takes a screenshot of the target map rendered below the interactive layer on the front-end interface, and obtain the target map screenshot area and its corresponding area pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container.

[0156] The actual pixel coordinate determination module 502 is used to determine the offset of the map container if the map container has a container offset, and update the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area.

[0157] The tile set generation module 503 is used to generate a target tile set based on the actual pixel coordinates and the map zoom level; the target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers;

[0158] The tile image download module 504 is used to download the tile image of each tile according to the tile row and column number of each tile to be downloaded, and generate a target tile splicing image based on the downloaded tile image;

[0159] The target map image feedback module 505 is used to crop the target tile stitched image according to the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, and to feed the target map screenshot image back to the target user.

[0160] This invention's technical solution determines the target map screenshot area and its corresponding actual pixel coordinates by listening to user-defined map screenshot events. Based on the actual pixel coordinates and the map zoom level, a target tile set is generated. Each tile to be downloaded is downloaded according to its row and column numbers. A target tile stitched image is generated from the downloaded tile images. The target tile stitched image is then cropped based on the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, which is then fed back to the target user. This technical solution achieves automated acquisition and stitching of custom area map tiles based on front-end interaction. It supports screenshots of areas of any size and location, solving the problems of limited screenshot range due to the viewport-only screenshot capability in existing technologies, as well as the inability to manually select large sizes and cross-viewport areas. Through pixel conversion and tile row and column number determination technologies, it achieves accurate matching between the screenshot area and map tiles, effectively avoiding manual stitching misalignment and blurring issues, and improving the efficiency, image accuracy, and image integrity of custom area screenshots.

[0161] Optionally, the tile set generation module 503 includes:

[0162] The latitude and longitude coordinate determination unit is used to perform latitude and longitude conversion on the actual pixel coordinates based on the map zoom level to obtain the latitude and longitude coordinates of the target map screenshot area;

[0163] The tile set generation unit is used to generate a target tile set based on the latitude and longitude coordinates of the target map screenshot area and the map zoom level.

[0164] Optional, latitude and longitude coordinate determination unit, specifically used for:

[0165] The total pixel size of the Earth is determined based on the map zoom level.

[0166] Determine the relative pixel coordinates of the actual pixel coordinates when the map origin of the target map is taken as the reference.

[0167] Based on the relative pixel coordinates, the latitude and longitude coordinates of the target map screenshot area are determined.

[0168] Optional, the tile set generation unit is specifically used for:

[0169] Based on the longitude coordinates of the target map screenshot area, and according to the map zoom level, determine the tile column number for the area; and,

[0170] Based on the latitude coordinates of the target map screenshot area, and according to the map zoom level, determine the area tile row number;

[0171] A target tile set is generated based on the tile column number and tile row number of the region.

[0172] Optionally, the tile image download module 504 includes:

[0173] The address format acquisition unit is used to acquire the tile access address format corresponding to the map platform to which the target map belongs;

[0174] The download address generation unit is used to generate a tile download address corresponding to each of the tiles to be downloaded based on the tile row and column numbers of each tile to be downloaded and the map zoom level, and based on the tile access address format.

[0175] The tile image acquisition unit is used to acquire the tile image corresponding to each of the tiles to be downloaded through the tile download address corresponding to each of the tiles to be downloaded.

[0176] The tile image stitching unit is used to stitch together the tile images of each of the tiles to be downloaded to obtain a target tile stitched image.

[0177] Optional, tile image stitching unit, specifically used for:

[0178] Based on the tile row and column numbers of each tile to be downloaded, an image stitching canvas is generated;

[0179] If the number of tiles to be downloaded is greater than a preset tile number threshold, or the canvas size of the image splicing canvas is greater than a preset canvas size threshold, then the image splicing canvas is split according to a preset fixed size to obtain at least one image splicing sub-canvas.

[0180] The image splicing sub-canvas to which each of the tiles to be downloaded belongs is determined based on the tile row and column number of each tile to be downloaded;

[0181] For any image splicing sub-canvas, determine the drawing coordinates of each tile to be downloaded in the image splicing sub-canvas, and draw the tile image of each tile to be downloaded in the image splicing sub-canvas based on the drawing coordinates to obtain the splicing sub-image corresponding to the image splicing sub-canvas.

[0182] The target tile mosaic image is generated based on the mosaic sub-images corresponding to each of the image mosaic sub-canvases.

[0183] Optional, the target map image feedback module 505 is specifically used for:

[0184] Determine the pixel offset between the target map screenshot area and the target tile mosaic image;

[0185] The cropping width and height are determined based on the actual pixel coordinates of the target map screenshot area;

[0186] The target tile mosaic image is cropped based on the pixel offset and the cropping width and height to obtain a target map screenshot image.

[0187] The map custom area screenshot device based on front-end interaction provided in the embodiments of the present invention can execute the map custom area screenshot method based on front-end interaction provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the execution method.

[0188] Example 6

[0189] Figure 6 A schematic diagram of an electronic device 60 that can be used to implement embodiments of the present invention is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices (e.g., helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the invention described and / or claimed herein.

[0190] like Figure 6 As shown, the electronic device 60 includes at least one processor 61 and a memory, such as a read-only memory (ROM) 62 and a random access memory (RAM) 63, communicatively connected to the at least one processor 61. The memory stores computer programs executable by the at least one processor. The processor 61 can perform various appropriate actions and processes based on the computer program stored in the ROM 62 or loaded from storage unit 68 into the RAM 63. The RAM 63 can also store various programs and data required for the operation of the electronic device 60. The processor 61, ROM 62, and RAM 63 are interconnected via a bus 64. An input / output (I / O) interface 65 is also connected to the bus 64.

[0191] Multiple components in electronic device 60 are connected to I / O interface 65, including: input unit 66, such as keyboard, mouse, etc.; output unit 67, such as various types of monitors, speakers, etc.; storage unit 68, such as disk, optical disk, etc.; and communication unit 69, such as network card, modem, wireless transceiver, etc. Communication unit 69 allows electronic device 60 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0192] Processor 61 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 61 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, digital signal processors (DSPs), and any suitable processor, controller, microcontroller, etc. Processor 61 performs the various methods and processes described above, such as the map custom area screenshot method based on front-end interaction.

[0193] In some embodiments, the front-end interaction-based map custom area screenshot method can be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 68. In some embodiments, part or all of the computer program can be loaded and / or installed on electronic device 60 via ROM 62 and / or communication unit 69. When the computer program is loaded into RAM 63 and executed by processor 61, one or more steps of the front-end interaction-based map custom area screenshot method described above can be performed. Alternatively, in other embodiments, processor 61 can be configured to perform the front-end interaction-based map custom area screenshot method by any other suitable means (e.g., by means of firmware).

[0194] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0195] Computer programs used to implement the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be performed. The computer programs may be executed entirely on a machine, partially on a machine, or as a standalone software package, partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0196] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0197] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0198] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or middleware components (e.g., application servers), or frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0199] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.

[0200] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.

[0201] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A method for taking screenshots of custom map regions based on front-end interaction, characterized in that, include: When a map screenshot event is detected on the front-end interface of a target user taking a screenshot of the target map rendered below the interactive layer, the map screenshot event is parsed to obtain the target map screenshot area and its corresponding area pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container; If the map container has a container offset, then the offset of the map container is determined, and the region pixel coordinates are updated according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area; Based on the actual pixel coordinates and the map zoom level, a target tile set is generated; The target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers; The tile images of each tile to be downloaded are downloaded according to the tile row and column numbers of each tile to be downloaded, and a target tile splicing image is generated based on the downloaded tile images; The target tile mosaic image is cropped based on the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, and the target map screenshot image is then fed back to the target user.

2. The method according to claim 1, characterized in that, The step of generating a target tile set based on the actual pixel coordinates and the map zoom level includes: Based on the map zoom level, the actual pixel coordinates are converted to latitude and longitude to obtain the latitude and longitude coordinates of the target map screenshot area; Based on the latitude and longitude coordinates of the target map screenshot area and the map zoom level, a target tile set is generated.

3. The method according to claim 2, characterized in that, The step of converting the actual pixel coordinates to latitude and longitude based on the map zoom level to obtain the latitude and longitude coordinates of the target map screenshot area includes: The total pixel size of the Earth is determined based on the map zoom level. Determine the relative pixel coordinates of the actual pixel coordinates when the map origin of the target map is taken as the reference. Based on the relative pixel coordinates, the latitude and longitude coordinates of the target map screenshot area are determined.

4. The method according to claim 2, characterized in that, The step of generating a target tile set based on the latitude and longitude coordinates of the target map screenshot area and the map zoom level includes: Based on the longitude coordinates of the target map screenshot area, and according to the map zoom level, determine the tile column number for the area; and, Based on the latitude coordinates of the target map screenshot area, and according to the map zoom level, determine the area tile row number; A target tile set is generated based on the tile column number and tile row number of the region.

5. The method according to claim 1, characterized in that, The step of downloading tile images according to the tile row and column numbers of each tile to be downloaded, and generating a target tile mosaic image based on the downloaded tile images, includes: Obtain the tile access address format corresponding to the map platform to which the target map belongs; Based on the tile row and column numbers of each tile to be downloaded and the map zoom level, and based on the tile access address format, generate a tile download address corresponding to each tile to be downloaded. Obtain the tile image corresponding to each tile to be downloaded by using the tile download address corresponding to each tile to be downloaded; The tile images of each tile to be downloaded are stitched together to obtain the target tile stitched image.

6. The method according to claim 5, characterized in that, The step of stitching together the tile images of each of the tiles to be downloaded to obtain a target tile stitched image includes: Based on the tile row and column numbers of each tile to be downloaded, an image stitching canvas is generated; If the number of tiles to be downloaded is greater than a preset tile number threshold, or the canvas size of the image splicing canvas is greater than a preset canvas size threshold, then the image splicing canvas is split according to a preset fixed size to obtain at least one image splicing sub-canvas. The image splicing sub-canvas to which each of the tiles to be downloaded belongs is determined based on the tile row and column number of each tile to be downloaded; For any image splicing sub-canvas, determine the drawing coordinates of each tile to be downloaded in the image splicing sub-canvas, and draw the tile image of each tile to be downloaded in the image splicing sub-canvas based on the drawing coordinates to obtain the splicing sub-image corresponding to the image splicing sub-canvas. The target tile mosaic image is generated based on the mosaic sub-images corresponding to each of the image mosaic sub-canvases.

7. The method according to claim 1, characterized in that, The step of cropping the target tile mosaic image based on the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image includes: Determine the pixel offset between the target map screenshot area and the target tile mosaic image; The cropping width and height are determined based on the actual pixel coordinates of the target map screenshot area; The target tile mosaic image is cropped based on the pixel offset and the cropping width and height to obtain a target map screenshot image.

8. A map custom area screenshot device based on front-end interaction, characterized in that, include: The event parsing module is used to parse the map screenshot event when the target user takes a screenshot of the target map rendered below the interactive layer on the front-end interface, to obtain the target map screenshot area and its corresponding pixel coordinates, as well as the map zoom level of the target map; the interactive layer is superimposed on the map container; the target map is loaded and rendered in the map container; The actual pixel coordinate determination module is used to determine the offset of the map container if the map container has a container offset, and update the region pixel coordinates according to the offset to obtain the actual pixel coordinates corresponding to the target map screenshot area. The tile set generation module is used to generate a target tile set based on the actual pixel coordinates and the map zoom level. The target tile set includes at least one tile to be downloaded and its corresponding tile row and column numbers; The tile image download module is used to download the tile image of each tile according to the tile row and column number of each tile to be downloaded, and generate a target tile splicing image based on the downloaded tile image; The target map image feedback module is used to crop the target tile stitched image according to the actual pixel coordinates of the target map screenshot area to obtain the target map screenshot image, and to feed the target map screenshot image back to the target user.

9. An electronic device, characterized in that, The electronic device includes: At least one processor; and A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the map custom area screenshot method based on front-end interaction as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that cause a processor to execute the map custom area screenshot method based on front-end interaction as described in any one of claims 1-7.

Images