Map icon processing method and device

Abstract

The invention discloses a map icon processing method and device, and relates to the technical field of computers. A specific embodiment of the method comprises the following steps: receiving an acquisition request for a map fusion icon in a window range transmitted by a front end; acquiring icon point data falling into the window range from the rear end, drawing the icon point data on a canvas to display a map fusion icon on the canvas to obtain a target canvas, and performing serialization processing on the target canvas; and returning the serialized target canvas to the front end for deserialization processing, so that the front end superposes the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen. According to the embodiment, through the architecture layer located between the front end and the rear end, the icon obtaining request is processed and fed back to the canvas drawn by the front end, the front end directly overlaps the canvas on the electronic map, and the problem that the waiting time is long due to the fact that the existing transmission data size is too large is solved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a map icon processing method and device. Background Art

[0002] With the continuous development of technology, it has become a trend to implement the mapping function in GIS (Geographic Information System or Geo-Information system) on the Web. However, due to the diversity of users and the characteristics of large amounts of data, there are many difficulties in mapping in WebGIS systems. As for multi-source pattern fusion technology, it is currently mainly done by uploading offline pictures or combining patterns from the same source. The method is relatively simple and cannot meet the user's flexible customization needs for icons. In addition, the amount of data transmitted is too large and it relies too much on front-end drawing, which affects the icon drawing speed. Summary of the invention

[0003] In view of this, an embodiment of the present invention provides a map icon processing method and device, which can at least solve the problems in the prior art of relying on users to make pictures offline, failing to generate multi-source patterns, transmitting too much data, and being too dependent on front-end drawing.

[0004] To achieve the above object, according to one aspect of an embodiment of the present invention, a map icon processing method is provided, comprising:

[0005] Receiving a request for obtaining a map fusion icon within a window range transmitted by a front end; wherein the window range is generated based on geographic coordinate information of a map visible area, and the map visible area is determined according to a current display area of ​​the electronic map on a display screen;

[0006] Acquire the icon point data falling within the window range from the back end, draw the icon point data onto the canvas to display the map fusion icon on the canvas, obtain the target canvas, and perform serialization processing on the target canvas;

[0007] The serialized target canvas is returned to the front end for deserialization processing, so that the front end overlays the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen.

[0008] Optionally, applied to an architecture layer, the architecture layer being located between the front end and the back end;

[0009] The step of acquiring the icon point data falling within the window range from the back end includes:

[0010] Obtaining the icon point data falling within the window range from the backend cache database;

[0011] In response to the result obtained from the backend cache database being non-existent, the icon point data falling within the window range is obtained from the backend database.

[0012] Optionally, the acquiring the icon point data falling within the window range from the backend database includes:

[0013] The window range is expanded based on a preset expansion value to obtain a new window range, and the icon point data falling within the new window range is acquired from a backend database.

[0014] Optionally, in the case of obtaining the icon point data from the backend database, drawing the icon point data onto the canvas includes:

[0015] Using a projection coordinate algorithm, converting the geographical coordinates of the icon point data into projection coordinates, and converting the projection coordinates into screen coordinates, so as to draw the icon point data converted into screen coordinates onto a canvas; and

[0016] The icon point data converted into screen coordinates is stored in a backend cache database.

[0017] Optionally, before drawing the icon point data onto the canvas, the method further comprises: encapsulating the architecture layer using a drawing engine to configure a canvas drawing function for the architecture layer; and

[0018] After the target canvas is serialized, the method further includes: packaging the serialized target canvas.

[0019] Optionally, before receiving the request for obtaining the map fusion icon within the window range transmitted by the front end, the method further includes:

[0020] In response to the user's selection operation on the front end for generating a map fusion icon, a display interaction interface is triggered; wherein the interactive interface displays materials in the material library, and the materials include one or more of the following: picture data, scalable vector graphics SVG data, and font icon data;

[0021] Based on the multi-source materials selected by the user from the material library at the front end, the multi-source materials are processed using a preset fusion method to generate a map fusion icon;

[0022] The geographic coordinate information set for the map fusion icon is received, and icon point data is generated based on the map fusion icon and the geographic coordinate information and stored in a backend database.

[0023] Optionally, the processing of the multi-source materials in a preset fusion mode to generate a map fusion icon includes:

[0024] Generate a combined pattern based on one or more of picture data, SVG data, and font icon data selected by a user from a material library;

[0025] Obtaining a document object model DOM of the combined pattern, obtaining an identifier of a wrapping tag in the DOM, searching for the wrapping tag according to the identifier, and obtaining a drawing path field of the SVG element in the wrapping tag;

[0026] Searching for SVG data from a material library according to the drawing path field, replacing the SVG element with the SVG data to obtain an updated DOM, and performing serialization processing on the updated DOM to obtain a serialized DOM;

[0027] Create an empty SVG element, and use the external link object technology to merge the serialized DOM and the empty SVG element to obtain a target SVG element that wraps the serialized DOM;

[0028] The target SVG element is drawn onto a canvas as a picture resource, and a program interface of the canvas is called to convert the drawn canvas into a canvas in a string format.

[0029] Optionally, in response to the user's selection operation on the front end for generating a map fusion icon, triggering the display of an interactive interface includes:

[0030] Receiving one or more of the image data, SVG data and font icon data uploaded by the user, obtaining the user's identifier to create a material library corresponding to the user's identifier;

[0031] In response to the user's selection operation on the front end for generating a map fusion icon, a material library corresponding to the user's identification is determined to trigger the display of an interactive interface.

[0032] Optionally, the creating a material library corresponding to the user's identifier includes:

[0033] Draw each image data onto the canvas, call the compression and cropping method in the canvas, perform compression and cropping processing on each image data, and obtain each processed image data;

[0034] Draw each SVG data onto the canvas, call the color value extraction method in the canvas, extract the color value of each pixel in each SVG data, determine the target color value with the largest number of occurrences, and replace the target color value with the variable value;

[0035] A material library corresponding to the user's identification is created based on one or more of the processed image data, the SVG data after replacing the variable value, and the font icon data.

[0036] Optionally, also include:

[0037] receiving a setting operation for the color of the font icon data; and

[0038] An operation for setting the size of the generated map fusion icon is received.

[0039] To achieve the above object, according to another aspect of an embodiment of the present invention, a map icon processing device is provided, comprising:

[0040] A receiving module, configured to receive a request for obtaining a map fusion icon within a window range transmitted by a front end; wherein the window range is generated based on geographic coordinate information of a map visible area, and the map visible area is determined according to a current display area of ​​the electronic map on a display screen;

[0041] A drawing module, used for obtaining the icon point data falling within the window range from the back end, drawing the icon point data onto the canvas to display the map fusion icon on the canvas, obtaining the target canvas, and performing serialization processing on the target canvas;

[0042] The feedback module is used to return the serialized target canvas to the front end for deserialization processing, so that the front end superimposes the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen.

[0043] Optionally, applied to an architecture layer, the architecture layer being located between the front end and the back end;

[0044] The drawing module is used for:

[0045] Obtaining the icon point data falling within the window range from the backend cache database;

[0046] In response to the result obtained from the backend cache database being non-existent, the icon point data falling within the window range is obtained from the backend database.

[0047] Optionally, the drawing module is used to:

[0048] The window range is expanded based on a preset expansion value to obtain a new window range, and the icon point data falling within the new window range is acquired from a backend database.

[0049] Optionally, in the case of obtaining the icon point data from the backend database, the drawing module is used to:

[0050] Using a projection coordinate algorithm, converting the geographical coordinates of the icon point data into projection coordinates, and converting the projection coordinates into screen coordinates, so as to draw the icon point data converted into screen coordinates onto a canvas; and

[0051] The icon point data converted into screen coordinates is stored in a backend cache database.

[0052] Optionally, the device further comprises a packaging module, which is used to: use a drawing engine to package the architecture layer to configure a drawing canvas function for the architecture layer; and

[0053] The drawing module is further used to: package the serialized target canvas.

[0054] Optionally, the device further includes a map fusion icon generation module, which is used to:

[0055] In response to the user's selection operation on the front end for generating a map fusion icon, a display interaction interface is triggered; wherein the interactive interface displays materials in the material library, and the materials include one or more of the following: picture data, scalable vector graphics SVG data, and font icon data;

[0056] Based on the multi-source materials selected by the user from the material library at the front end, the multi-source materials are processed using a preset fusion method to generate a map fusion icon;

[0057] The geographic coordinate information set for the map fusion icon is received, and icon point data is generated based on the map fusion icon and the geographic coordinate information and stored in a backend database.

[0058] Optionally, the map fusion icon generation module is used to:

[0059] Generate a combined pattern based on one or more of picture data, SVG data, and font icon data selected by a user from a material library;

[0060] Obtaining a document object model DOM of the combined pattern, obtaining an identifier of a wrapping tag in the DOM, searching for the wrapping tag according to the identifier, and obtaining a drawing path field of the SVG element in the wrapping tag;

[0061] Searching for SVG data from a material library according to the drawing path field, replacing the SVG element with the SVG data to obtain an updated DOM, and performing serialization processing on the updated DOM to obtain a serialized DOM;

[0062] Create an empty SVG element, and use the external link object technology to merge the serialized DOM and the empty SVG element to obtain a target SVG element that wraps the serialized DOM;

[0063] The target SVG element is drawn onto a canvas as a picture resource, and a program interface of the canvas is called to convert the drawn canvas into a canvas in a string format.

[0064] Optionally, it also includes a material module for:

[0065] Receiving one or more of the image data, SVG data and font icon data uploaded by the user, obtaining the user's identifier to create a material library corresponding to the user's identifier;

[0066] In response to the user's selection operation on the front end for generating a map fusion icon, a material library corresponding to the user's identification is determined to trigger the display of an interactive interface.

[0067] Optionally, the material module is used to:

[0068] Drawing each image data onto a canvas, calling a compression and cropping device in the canvas, performing compression and cropping processing on each image data, and obtaining each processed image data;

[0069] Draw each SVG data onto a canvas, call a color value extraction device in the canvas, extract the color value of each pixel in each SVG data, determine the target color value that appears the most times, and replace the target color value with the variable value;

[0070] A material library corresponding to the user's identification is created based on one or more of the processed image data, the SVG data after replacing the variable value, and the font icon data.

[0071] Optionally, also include:

[0072] receiving a setting operation for the color of the font icon data; and

[0073] An operation for setting the size of the generated map fusion icon is received.

[0074] To achieve the above objective, according to yet another aspect of an embodiment of the present invention, a map icon processing electronic device is provided.

[0075] The electronic device of the embodiment of the present invention includes: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement any of the map icon processing methods described above.

[0076] To achieve the above objective, according to another aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored, and when the program is executed by a processor, any of the above-mentioned map icon processing methods is implemented.

[0077] According to the scheme provided by the present invention, one embodiment of the above invention has the following advantages or beneficial effects: for the existing multi-source icon fusion problem, considering the multi-source of user-uploaded pictures, a material library is constructed, and then based on the multi-source materials selected by the user from the material library, a base64-format map fusion icon is adaptively generated, and its latitude and longitude geographic coordinates are configured to generate icon point data, which solves the inconvenience of the existing need for users to make icons offline, and realizes the purpose of flexible customization for the multi-source of pictures. For the display problem of a large number of POIs combined with fusion icons, a BFF is set up to process icon acquisition requests through the BFF layer, thereby solving the existing problem of over-reliance on front-end drawing. The BFF layer returns Node Canvas to the front end instead of POI data. The front end directly overlays the canvas on the electronic map without other excessive operations, solving the existing problem of long waiting time caused by excessive transmission of POI data, accelerating the display of the WebGIS system, and only considering the icon point data in the view window, which can greatly reduce the amount of requested data, building a database and a cache database, which can alleviate the service pressure of the back-end database, and storing the icon point data of the screen coordinates in the cache database to further reduce the processing workload and speed up the icon drawing speed.

[0078] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with specific implementation examples. BRIEF DESCRIPTION OF THE DRAWINGS

[0079] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0080] Figure 1 is a schematic diagram of the main flow of a map icon processing method according to an embodiment of the present invention;

[0081] Figure 2 is a flowchart of a specific map icon processing method according to an embodiment of the present invention;

[0082] Figure 3 is a flowchart of an optional map icon processing method according to an embodiment of the present invention;

[0083] Figure 4 It is a flowchart for processing combined patterns;

[0084] Figure 5 is a flowchart of another optional map icon processing method according to an embodiment of the present invention;

[0085] Figure 6 is a schematic diagram of main modules of a map icon processing device according to an embodiment of the present invention;

[0086] Figure 7is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0087] Figure 8 It is a schematic diagram of the structure of a computer system of a mobile device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0088] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0089] It should be pointed out that the collection, collection, updating, analysis, processing, use, transmission, storage and other aspects of the user personal information involved in the technical solution of this disclosure are in compliance with the provisions of relevant laws and regulations, are used for legitimate purposes, and do not violate public order and good morals. Take necessary measures for user personal information, such as de-identification or anonymization, to protect user privacy, prevent illegal access to user personal information data, and maintain user personal information security, network security and national security. Once these user personal information data are no longer needed, the risks should be minimized by restricting or even prohibiting data collection and / or deleting data.

[0090] WebGIS publishes and applies geographic spatial data through the Internet to achieve spatial data sharing and interoperability, such as online query and business processing of GIS information. WebGIS clients use Web browsers, such as IE and FireFox. WebGIS is a new technology that uses Internet technology to expand and improve GIS. Its core is to embed the HTTP (HyperText Transfer Protocol) standard application system in GIS to achieve spatial information management and publishing in the Internet environment.

[0091] Take the logistics side as an example. With the accumulation of data and experience over the years, the number of merchants and users has continued to increase. More and more merchants want to use online mapping systems to create maps with their own characteristics. For example, merchants want to customize their own locations as POIs (Point of Interest, or Point of Information). POIs are records of places on the map that users consider useful or interesting. They are usually defined by their geographic coordinates and some additional attributes (such as name and category), such as Hotel A at latitude 1.286546 and longitude 103.853721, or Building B at latitude 40.748817 and longitude -73.985428.

[0092] In the early days of mapping on the C / S side, each user provided the icons they wanted locally and then mapped. Since the performance of the C / S side was good, there were no related performance issues. However, if POI icons were to be customized online, it was necessary to consider the multi-source nature of the images uploaded by users. Currently, there are multiple sources such as icon fonts, SVG (Scalable Vector Graphics), png, and jepg. In addition, the flexibility required by the Web system must be considered, and the combination generation of different sources and different types of patterns must also be considered. After the multi-source icons are fused and generated, how to store them and how to combine a large number of POIs with fused patterns for rapid drawing and display are also issues that need to be addressed.

[0093] In addition, there are currently two problems with drawing a large number of POI points combined with fusion patterns on the map. 1) Due to the large amount of POI data, the corresponding number of icons is large, and thus the number of icon acquisition requests is also large, resulting in too many network requests, slow processing and long waiting time. 2) For a large number of POI points to be drawn on the front end at one time, it also takes a certain amount of time to wait. The current solution is to use aggregation or webgl technology for optimization, but the aggregation method sometimes cannot satisfy users. The introduction of the webgl framework will increase the development volume exponentially.

[0094] See also Figure 1 , which shows a main flow chart of a map icon processing method provided by an embodiment of the present invention, comprising the following steps:

[0095] S101: receiving a request for obtaining a map fusion icon within a window range transmitted by a front end; wherein the window range is generated based on geographic coordinate information of a map visible area, and the map visible area is determined according to a current display area of ​​the electronic map on a display screen;

[0096] S102: Acquire icon point data falling within the window range from the backend, draw the icon point data onto a canvas to display a map fusion icon on the canvas, obtain a target canvas, and perform serialization processing on the target canvas;

[0097] S103: returning the serialized target canvas to the front end for deserialization processing, so that the front end overlays the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen.

[0098] In the above implementation, for step S101, this solution sets BFF (Backends For Frontends, architecture layer) between the front end and the back end. BFF can control the screening, aggregation, filtering, temporary storage and other capabilities of some data by the front end. This solution processes the map fusion icon acquisition request through BFF, and finally returns the drawn canvas to the front end, solving the existing problem of over-reliance on front-end drawing.

[0099] In map software, it usually loads an existing electronic map, that is, the map information corresponding to the electronic map has been stored in the device corresponding to the display screen. During the process of loading the electronic map, it can obtain the area where the electronic map information is displayed on the display screen according to the information on the display screen, which is understood as the map visible area.

[0100] Considering the large amount of POI data, for the front-end display, the area that the user is concerned about is only within the visible area of ​​the map. Therefore, when requesting data, it is preferred to obtain the data within the window range by passing the window coordinates to reduce the amount of data requested each time. Here, the window range converts the geographic coordinate information of the visible area of ​​the map into a range, specifically a rectangular range. The visible area of ​​the map is determined according to the current display area of ​​the electronic map on the display screen. The window range is carried in the request, and BFF filters the data according to the window geographic coordinates.

[0101] For step S102, the icon point data in this scheme is stored in the back end, where the icon point data includes POI data and corresponding map fusion icons, such as X store, 121.212926, 31.418871, Shanghai xxx address, icon x, such as Y store, 121.449272, 31.327387, Shanghai yyy address, icon y, such as Z store, 121.436614, 31.206677, Shanghai zzz address, icon z, icons x, y, z are all user-defined settings, and each longitude and latitude geographic coordinates also need to be manually input by the user, or the user manually clicks on the corresponding position on the map to obtain it.

[0102] The backend is set up with two types of cache database and database, which solves the existing problem of storing multi-source icons and achieves the purpose of quickly combining a large number of POIs with fusion patterns. The database stores the above icon point data. At this time, the coordinates in the icon point data are the latitude and longitude geographic coordinates of the icon on the map. Cache databases such as Redis mainly store recently generated or recently accessed icon point data. Its coordinates are screen coordinates, which are different from latitude and longitude geographic coordinates.

[0103] BFF first uses Node to search the cache database for icon point data within the window range to reduce the service pressure of the back-end database and speed up the request processing. If the search result is yes, the icon point data with screen coordinates are directly drawn to the Canvas canvas. However, if the query result is no, it is necessary to search the back-end database for icon point data within the window range. At this time, the icon point data needs to use the projection coordinate algorithm to convert its geographic coordinates into projection coordinates, and then convert the projection coordinates into screen coordinates. To facilitate subsequent searches, the icon point data after the screen coordinates are converted can also be stored in a cache database such as Redis. Among them, Canvas API is a new tag added in HTML5, which is used to generate images in real time on web pages and can manipulate image content. It is basically a bitmap that can be operated with JavaScript.

[0104] Since zooming and moving the map in WebGIS will require data requests, in order to better respond to this, each time the icon point data is obtained from the back-end database, it is preferred to expand the window range outward to a certain extent according to the preset expansion value, so as to request the points within a certain range outside the window range, obtain the new window range, and then obtain the icon point data falling within the new window range from the back-end database. In this way, the integrity of the data within the window range can be guaranteed, and the edge data transition effect can be better handled when the map moves. Furthermore, considering the large amount of POI data, this solution preferably obtains the data within the new view range through rpc (full name Remote Procedure Call Protocol) full-duplex communication to speed up the processing of requests.

[0105] After obtaining the icon point data, this solution uses the Node side to draw these data on the Canvas. However, since the Node side does not support DOM operations, this solution uses the Cairo drawing engine to encapsulate the BFF layer to configure the BFF layer to draw the Canvas function and implement the Canvas canvas on the Node side. Then, the icon point data is drawn using Canvas on the Node side to display each map fusion icon on the Canvas. Since the coordinates of the icon point data are all screen coordinates at this time, the screen coordinates are actually drawn on the Canvas to ensure the correctness of the position so that the correct fusion icon is drawn to the correct position.

[0106] After drawing the map fusion icon onto the canvas, since the front-end and back-end communication cannot transmit format data such as DOM (Document Object Model), the Canvas needs to be serialized, the serialized Canvas needs to be wrapped, and then passed to the front-end.

[0107] For step S103, after the front end obtains the Canvas transmitted by the BFF layer, it deserializes it to obtain the real DOM. The map display icon is actually a layer of Canvas superimposed as an element container, so the front end also needs to superimpose the Canvas on the electronic map and cover the visible area to display the electronic map with the map fusion icon on the display screen.

[0108] The method provided in the above embodiment processes the icon acquisition request through the BFF layer, thereby solving the problem of excessive reliance on front-end drawing. The BFF layer returns a canvas to the front end instead of POI data. The front end directly overlays the canvas on the electronic map without the need for other excessive operations, thereby solving the problem of long waiting time caused by excessive transmission of POI data.

[0109] See also Figure 2 , which shows a main flow chart of a specific map icon processing method provided by an embodiment of the present invention, comprising the following steps:

[0110] S201: receiving a request for obtaining a map fusion icon within a window range transmitted by a front end; wherein the window range is generated based on geographic coordinate information of a map visible area, and the map visible area is determined according to a current display area of ​​the electronic map on a display screen;

[0111] S202: Acquire the icon point data falling within the window range from the backend cache database;

[0112] S203: In response to the result obtained from the backend cache database being non-existent, the window range is expanded based on a preset expansion value to obtain a new window range, and icon point data falling within the new window range is obtained from the backend database;

[0113] S204: using a projection coordinate algorithm, converting the geographic coordinates of the icon point data into projection coordinates, and converting the projection coordinates into screen coordinates;

[0114] S205: storing the icon point data converted into screen coordinates in a backend cache database;

[0115] S206: Encapsulating the architecture layer using a drawing engine to configure a drawing canvas function for the architecture layer;

[0116] S207: drawing the icon point data converted into screen coordinates onto a canvas to display a map fusion icon on the canvas, thereby obtaining a target canvas;

[0117] S208: performing serialization processing on the target canvas, and performing packaging processing on the serialized target canvas;

[0118] S209: returning the processed target canvas to the front end for deserialization processing, so that the front end overlays the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen.

[0119] The method provided in the above embodiment processes icon acquisition requests through the BFF layer, thereby solving the existing problem of over-reliance on front-end drawing. The BFF layer returns a canvas to the front end instead of POI data. The front end directly overlays the canvas on the electronic map without the need for other excessive operations, thereby solving the problem of long waiting time caused by excessive transmission of POI data. In addition, only considering the icon point data in the view window can greatly reduce the amount of requested data, and building a database and a cache database to alleviate the service pressure of the back-end database. The cache database stores icon point data of screen coordinates to further speed up the icon drawing speed.

[0120] See also Figure 3 , which shows a main flow chart of an optional map icon processing method provided by an embodiment of the present invention, comprising the following steps:

[0121] S301: In response to the user's selection operation on the front end for generating a map fusion icon, triggering the display of an interactive interface; wherein the interactive interface displays materials in the material library, and the materials include one or more of the following: picture data, scalable vector graphics SVG data, and font icon data;

[0122] S302: Based on the multi-source material selected by the user from the material library at the front end, the multi-source material is processed using a preset fusion method to generate a map fusion icon;

[0123] S303: Receive geographic coordinate information set for the map fusion icon, generate icon point data based on the map fusion icon and the geographic coordinate information, and store the data in a database.

[0124] In the above implementation, for step S301, the solution requires the user to upload multiple image data, SVG data, and font icon data to build a material library. Considering that the page HTML mainly embeds images into documents through the img tag, the image data here is usually referred to as img, and it can actually support multiple image formats, such as the most commonly used image formats on the Web are APNG, AVIF, GIF, JPEG, PNG, SVG, and WebP.

[0125] Furthermore, considering that different users may use different material libraries, such as the material libraries of logistics merchants and offline physical stores, this solution can pre-build different material libraries for different users and establish a corresponding relationship between user identification and material library. When the user logs in to build the icon later, he can quickly find the corresponding material library based on his identification.

[0126] The solution also provides a user interaction interface, on which the user can select image data, SVG data and / or font icon data according to his or her own preferences, such as selecting an image data img, an SVG data, one or more font icon data icon font, and selecting the color configured for the icon font, and setting the size of the map fusion icon to generate a combined pattern. At this time, since different material libraries are set in advance according to different users, and users customize colors and sizes, different users will eventually generate different icons, thus achieving the purpose of customized settings.

[0127] For step S302, the combined pattern is previewed on the page to convert the combined pattern into a DOM. The DOM is processed accordingly. To improve performance, SVG is introduced in many frameworks through SVG sprite, so the actual drawing path field path of the SVG element is not obtained, resulting in the inability to generate a fused image based on the SVG element.

[0128] To solve this problem, this solution obtains the ID of the use tag (i.e., the wrapping tag) from the DOM, searches for the use tag based on the ID, and finally obtains the actual drawing path field path of the SVG element from the use tag. Then, according to the path, the corresponding SVG data is obtained from the material library to replace the SVG element with the SVG data, obtain the updated DOM, and finally serialize the entire DOM using XML serialization technology.

[0129] After obtaining the XML serialized DOM, create a new empty SVG element in HTML, use the SVG element's external link object technology to merge the serialized DOM and the new SVG element to obtain an SVG element containing the serialized DOM, which can fully display the structure, color, and stacked elements of the external link object. In this way, the serialized DOM can be compatible with the SVG element, and the compatible element needs to be able to be used as an img resource.

[0130] Finally, the target SVG element of the serialized DOM is wrapped and input into the img element as an image resource, making the img element a container for the combined pattern. Finally, the image drawing capability of Canvas is used to draw the image, and the Canvas after the fusion icon is drawn is obtained. Then, the program interface of the Canvas canvas is called to convert the drawn content into a base64-encoded string for storage. Among them, Base64 is one of the most common encoding methods for transmitting 8-bit byte codes on the Internet. The overall process can be seen in Figure 4 shown.

[0131] As for step S303, the above steps only generate map fusion icons, specifically, Canvas in the form of strings, but the locations to which these icons are applied are not determined, and the user needs to manually input the longitude and latitude geographic coordinates, or read the longitude and latitude geographic coordinates of the location manually selected by the user on the map. Then, according to the set longitude and latitude geographic coordinates, the corresponding relationship between it and the map fusion icon is established to generate chart point data and store it in the backend database.

[0132] The method provided in the above embodiment adaptively generates a map fusion icon based on the multi-source materials selected by the user from the material library, and configures its latitude and longitude geographic coordinates to generate icon point data, thereby solving the inconvenience of requiring users to make icons offline, and achieving the purpose of flexible customization based on the multi-source of images.

[0133] See also Figure 5 , which shows a main flow chart of another optional map icon processing method provided by an embodiment of the present invention, comprising the following steps:

[0134] S501: receiving one or more of picture data, SVG data and font icon data uploaded by a user;

[0135] S502: drawing each image data onto a canvas, calling a compression and cropping method in the canvas, performing compression and cropping processing on each image data, and obtaining each processed image data;

[0136] S503: Draw each SVG data onto a canvas, call a color value extraction method in the canvas, extract the color value of each pixel in each SVG data, determine the target color value that appears the most times, and replace the target color value with a variable value;

[0137] S504: Obtain the user's identifier, and create a material library corresponding to the user's identifier based on one or more of the processed image data, the SVG data after replacing the variable value, and the font icon data.

[0138] In the above implementation, for steps S501 to S504, the solution requires the user to upload multiple image data, SVG data, and font icon data to build a material library. After obtaining the above three types of data, before building the material library, the image data and SVG data need to be processed specifically:

[0139] 1. Compress the image data. For icons, the size should not be too large, and the length and width should be consistent, and the color should be relatively full. Therefore, for the image data uploaded by the user, first draw it into Canvas, and then use the compression and cropping algorithm of Canvas to perform targeted compression and cropping operations on the data of each pixel in the image data, obtain the processed image data and transfer it to the backend database for storage.

[0140] The above compression and cropping processing currently mainly relies on manual operation, such as cropping the image data into a square and keeping the image intact. In addition to the image itself, the image data also includes the image size, image dimensions and image format. Therefore, the compression here can be based on a pre-set size, such as 12×12, 16×16, 24×24, 32×32, 48×48, etc., preferably 48px as the design size of a regular icon, and the image data is compressed in size, and the image data is compressed in size according to a pre-set size range, such as within 200kb. In addition, the composition direction of the image can be analyzed according to the image size of the image, and the display direction of the image can be adjusted based on the composition direction of the image and the display direction of the browser. Or the format of the image data can be adjusted, such as converting JPEG to AVIF format.

[0141] 2. Compress SVG data. SVG has the characteristics of no distortion, rich colors, and editability. It is flexible in the stage of how to match graphics and can maintain a certain degree of clarity. Therefore, this solution must consider SVG data. Considering that SVG data may be multi-color graphics, upload SVG data to Canvas for display. In Canvas, use the getImageData method and ImageData.data attribute to obtain the color value of each pixel in the SVG graphics, count the number of occurrences of each color value, and use the color value with the most occurrences as the target color value. Assuming that the color value with the most occurrences is red, replace the color value of the pixel corresponding to red in the SVG data with fill and stroke with the currentColor variable, and store the replaced SVG data in the back-end database; among them, fill is an attribute of the SVG element, which defines the color of the drawn element; currentColor is a variable, and the value of this variable is the color value of the current element.

[0142] 3. Icon font is a general term for font icons, and data preprocessing is not required for the time being. Icon font has a smaller file size than CSS Sprite images, and is easier to maintain than images, but icon fonts can usually only use a single color, and font file generation is more complicated than CSS Sprite.

[0143] Based on the compressed and cropped image data, the SVG data after replacing the variable values, and the font icon data, a material library corresponding to the user ID is constructed.

[0144] The method provided in the above embodiment takes into account the multi-source nature of images uploaded by users. Currently, there are multiple sources such as icon font, SVG, png, jepg, etc. to build a material library. Subsequent users can select multi-source materials online to generate fused icons, which solves the problem of single icon form and single data source.

[0145] See also Figure 6 , which shows a schematic diagram of main modules of a map icon processing device 600 provided by an embodiment of the present invention, including:

[0146] The receiving module 601 is used to receive a request for obtaining a map fusion icon within a window range transmitted by a front end; wherein the window range is generated based on geographic coordinate information of a map visible area, and the map visible area is determined according to a display area of ​​the electronic map currently on a display screen;

[0147] A drawing module 602 is used to obtain the icon point data falling within the window range from the back end, draw the icon point data onto the canvas to display the map fusion icon on the canvas, obtain the target canvas, and perform serialization processing on the target canvas;

[0148] The feedback module 603 is used to return the serialized target canvas to the front end for deserialization processing, so that the front end superimposes the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen.

[0149] In the implementation device of the present invention, it is applied to the architecture layer, and the architecture layer is located between the front end and the back end;

[0150] The drawing module 602 is used for:

[0151] Obtaining the icon point data falling within the window range from the backend cache database;

[0152] In response to the result obtained from the backend cache database being non-existent, the icon point data falling within the window range is obtained from the backend database.

[0153] In the implementation device of the present invention, the drawing module 602 is used to:

[0154] The window range is expanded based on a preset expansion value to obtain a new window range, and the icon point data falling within the new window range is acquired from a backend database.

[0155] In the implementation device of the present invention, when obtaining the icon point data from the backend database, the drawing module 602 is used to:

[0156] Using a projection coordinate algorithm, converting the geographical coordinates of the icon point data into projection coordinates, and converting the projection coordinates into screen coordinates, so as to draw the icon point data converted into screen coordinates onto a canvas; and

[0157] The icon point data converted into screen coordinates is stored in a backend cache database.

[0158] The implementation device of the present invention further includes a packaging module, which is used to: use a drawing engine to package the architecture layer to configure a drawing canvas function for the architecture layer; and

[0159] The drawing module 602 is further used to: perform packaging processing on the serialized target canvas.

[0160] The implementation device of the present invention also includes a map fusion icon generation module, which is used to:

[0161] In response to the user's selection operation on the front end for generating a map fusion icon, a display interaction interface is triggered; wherein the interactive interface displays materials in the material library, and the materials include one or more of the following: picture data, scalable vector graphics SVG data, and font icon data;

[0162] Based on the multi-source materials selected by the user from the material library at the front end, the multi-source materials are processed using a preset fusion method to generate a map fusion icon;

[0163] The geographic coordinate information set for the map fusion icon is received, and icon point data is generated based on the map fusion icon and the geographic coordinate information and stored in a backend database.

[0164] In the implementation device of the present invention, the map fusion icon generation module is used to:

[0165] Generate a combined pattern based on one or more of picture data, SVG data, and font icon data selected by a user from a material library;

[0166] Obtaining a document object model DOM of the combined pattern, obtaining an identifier of a wrapping tag in the DOM, searching for the wrapping tag according to the identifier, and obtaining a drawing path field of the SVG element in the wrapping tag;

[0167] Searching for SVG data from a material library according to the drawing path field, replacing the SVG element with the SVG data to obtain an updated DOM, and performing serialization processing on the updated DOM to obtain a serialized DOM;

[0168] Create an empty SVG element, and use the external link object technology to merge the serialized DOM and the empty SVG element to obtain a target SVG element that wraps the serialized DOM;

[0169] The target SVG element is drawn onto a canvas as a picture resource, and a program interface of the canvas is called to convert the drawn canvas into a canvas in a string format.

[0170] The implementation device of the present invention also includes a material module, which is used to:

[0171] Receiving one or more of the image data, SVG data and font icon data uploaded by the user, obtaining the user's identifier to create a material library corresponding to the user's identifier;

[0172] In response to the user's selection operation on the front end for generating a map fusion icon, a material library corresponding to the user's identification is determined to trigger the display of an interactive interface.

[0173] In the implementation device of the present invention, the material module is used to:

[0174] Draw each picture data on the canvas, call the compression and clipping device in the canvas, perform compression and clipping processing on each of the picture data to obtain each processed picture data;

[0175] Draw each SVG data on the canvas, call the color value extraction device in the canvas, extract the color value of each pixel point in each SVG data, determine the target color value with the most occurrences, and replace the target color value with a variable value;

[0176] Create a material library corresponding to the user's identifier based on one or more of the processed picture data, the SVG data after replacing the variable value, and the font icon data.

[0177] In the implementation device of the present invention, it further includes:

[0178] Receive a setting operation for the color of the font icon data; and

[0179] Receive a setting operation for the size of the generated map fusion icon.

[0180] In addition, the specific implementation content of the device in the embodiments of the present invention has been described in detail in the above method, so the repeated content will not be described here.

[0181] Figure 7 An exemplary system architecture 700 to which the embodiments of the present invention can be applied is shown, including terminal devices 701, 702, 703, a network 704, and a server 705 (merely examples).

[0182] The terminal devices 701, 702, 703 can be various electronic devices with a display screen and supporting web browsing, installed with various communication client applications. Users can use the terminal devices 701, 702, 703 to interact with the server 705 through the network 704 to receive or send messages, etc.

[0183] The network 704 is a medium for providing a communication link between the terminal devices 701, 702, 703 and the server 705. The network 704 can include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0184] The server 705 can be a server providing various services. It should be noted that the method provided by the embodiments of the present invention is generally executed by the server 705. Correspondingly, the device is generally set in the server 705.

[0185] It should be understood that Figure 7 the number of terminal devices, networks, and servers in

[0186] Reference below Figure 8 , which shows a schematic diagram of the structure of a computer system 800 of a terminal device suitable for implementing an embodiment of the present invention. Figure 8 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0187] like Figure 8 As shown, the computer system 800 includes a central processing unit (CPU) 801, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage part 808 into a random access memory (RAM) 803. In the RAM 803, various programs and data required for the operation of the system 800 are also stored. The CPU 801, the ROM 802, and the RAM 803 are connected to each other via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0188] The following components are connected to the I / O interface 805: an input section 806 including a keyboard, a mouse, etc.; an output section 807 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN card, a modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to the I / O interface 805 as needed. A removable medium 811, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 810 as needed, so that a computer program read therefrom is installed into the storage section 808 as needed.

[0189] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 809, and / or installed from the removable medium 811. When the computer program is executed by the central processing unit (CPU) 801, the above-mentioned functions defined in the system of the present invention are executed.

[0190] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0191] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0192] The modules involved in the embodiments of the present invention may be implemented by software or hardware. The modules described may also be set in a processor. For example, they may be described as follows: a processor includes a receiving module, a drawing module, and a feedback module. The names of these modules do not, in some cases, limit the modules themselves. For example, the feedback module may also be described as a "drawing display module".

[0193] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device executes any of the above map icon processing methods.

[0194] The computer program product of the present invention comprises a computer program, and when the computer program is executed by a processor, the map icon processing method in the embodiment of the present invention is implemented.

[0195] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A map icon processing method, It is characterized in that include: Receiving a request for obtaining a map fusion icon within a window range transmitted by a front end; wherein the window range is generated based on geographic coordinate information of a map visible area, and the map visible area is determined according to a current display area of ​​the electronic map on a display screen; Acquire the icon point data falling within the window range from the back end, draw the icon point data onto the canvas to display the map fusion icon on the canvas, obtain the target canvas, and perform serialization processing on the target canvas; The serialized target canvas is returned to the front end for deserialization processing, so that the front end overlays the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen.

2. The method according to claim 1, It is characterized in that Applied to the architecture layer, which is located between the front end and the back end; The step of acquiring the icon point data falling within the window range from the back end includes: Obtaining the icon point data falling within the window range from the backend cache database; In response to the result obtained from the backend cache database being non-existent, the icon point data falling within the window range is obtained from the backend database.

3. The method according to claim 2, It is characterized in that The step of acquiring the icon point data falling within the window range from the back-end database includes: The window range is expanded based on a preset expansion value to obtain a new window range, and the icon point data falling within the new window range is acquired from a backend database.

4. The method according to claim 2 or 3, It is characterized in that In the case of obtaining the icon point data from the backend database, drawing the icon point data onto the canvas comprises: Using a projection coordinate algorithm, converting the geographical coordinates of the icon point data into projection coordinates, and converting the projection coordinates into screen coordinates, so as to draw the icon point data converted into screen coordinates onto a canvas; and The icon point data converted into screen coordinates is stored in a backend cache database.

5. The method according to claim 2, It is characterized in that Before drawing the icon point data onto the canvas, the method further includes: encapsulating the architecture layer using a drawing engine to configure a canvas drawing function for the architecture layer; and After the target canvas is serialized, the method further includes: packaging the serialized target canvas.

6. The method according to claim 1, It is characterized in that Before receiving the request for obtaining the map fusion icon within the window range transmitted by the front end, the method further includes: In response to the user's selection operation on the front end for generating a map fusion icon, a display interaction interface is triggered; wherein the interactive interface displays materials in the material library, and the materials include one or more of the following: picture data, scalable vector graphics SVG data, and font icon data; Based on the multi-source materials selected by the user from the material library at the front end, the multi-source materials are processed using a preset fusion method to generate a map fusion icon; The geographic coordinate information set for the map fusion icon is received, and icon point data is generated based on the map fusion icon and the geographic coordinate information and stored in a backend database.

7. The method according to claim 6, It is characterized in that The using a preset fusion method to process the multi-source materials to generate a map fusion icon includes: Generate a combined pattern based on one or more of picture data, SVG data, and font icon data selected by a user from a material library; Obtaining a document object model DOM of the combined pattern, obtaining an identifier of a wrapping tag in the DOM, searching for the wrapping tag according to the identifier, and obtaining a drawing path field of the SVG element in the wrapping tag; Searching for SVG data from a material library according to the drawing path field, replacing the SVG element with the SVG data to obtain an updated DOM, and performing serialization processing on the updated DOM to obtain a serialized DOM; Create an empty SVG element, and use the external link object technology to merge the serialized DOM and the empty SVG element to obtain a target SVG element that wraps the serialized DOM; The target SVG element is drawn onto a canvas as a picture resource, and a program interface of the canvas is called to convert the drawn canvas into a canvas in a string format.

8. The method according to claim 6, It is characterized in that The triggering of displaying the interactive interface in response to the user's selection operation on the front end for generating the map fusion icon comprises: Receiving one or more of the image data, SVG data and font icon data uploaded by the user, obtaining the user's identifier to create a material library corresponding to the user's identifier; In response to the user's selection operation on the front end for generating a map fusion icon, a material library corresponding to the user's identification is determined to trigger the display of an interactive interface.

9. The method according to claim 8, It is characterized in that The step of creating a material library corresponding to the user's identification includes: Draw each image data onto the canvas, call the compression and cropping method in the canvas, perform compression and cropping processing on each image data, and obtain each processed image data; Draw each SVG data onto the canvas, call the color value extraction method in the canvas, extract the color value of each pixel in each SVG data, determine the target color value with the largest number of occurrences, and replace the target color value with the variable value; A material library corresponding to the user's identification is created based on one or more of the processed image data, the SVG data after replacing the variable value, and the font icon data.

10. The method according to claim 6, It is characterized in that Also includes: Receive the color setting operation of the font icon data; as well as An operation for setting the size of the generated map fusion icon is received.

11. A map icon processing device, It is characterized in that include: A receiving module, configured to receive a request for obtaining a map fusion icon within a window range transmitted by a front end; wherein the window range is generated based on geographic coordinate information of a map visible area, and the map visible area is determined according to a current display area of ​​the electronic map on a display screen; A drawing module, used for obtaining the icon point data falling within the window range from the back end, drawing the icon point data onto the canvas to display the map fusion icon on the canvas, obtaining the target canvas, and performing serialization processing on the target canvas; The feedback module is used to return the serialized target canvas to the front end for deserialization processing, so that the front end superimposes the target canvas on the electronic map to display the electronic map with the map fusion icon on the display screen.

12. An electronic device, It is characterized in that include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 10.

13. A computer readable medium having a computer program stored thereon, It is characterized in that When the program is executed by a processor, the method according to any one of claims 1 to 10 is implemented.

Images