Method and device for drawing on map interface, storage medium and electronic equipment

Abstract

The invention provides a method and a device for drawing on a map interface, a storage medium and electronic equipment, and belongs to the technical field of maps, the method comprises the following steps: when drawing needs to be carried out on a target map interface, displaying a drawing option toolbar on the interface, and creating a canvas object; establishing a user-defined layer corresponding to the target map, and adding the canvas object to the user-defined layer; when a user triggers a function control in the toolbar, identifying a target pattern type, and calling a canvas drawing plug-in to enable an interface of a target map to enter a drawing state corresponding to the target pattern type; responding to a drawing operation of a user, and determining corresponding drawing data; and drawing a pattern corresponding to the drawing data in the canvas object. By means of the method, the pattern can be drawn on the canvas located on the map custom layer, the layer where the drawing content is located is independent of the original map layer, corresponding influences generated by different map operations can be avoided, the workload of platform development can be reduced, and the complexity of platform codes can be reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of electronic maps, and in particular to a method and device for drawing on a map interface, a storage medium and an electronic device. Background Art

[0002] With the development of digital technology, electronic maps have become a common tool in various business platforms. In the application scenarios of electronic maps, in addition to the application requirements of basic map functions such as positioning and navigation, many personalized requirements have gradually emerged.

[0003] Drawing on the map interface is one of the common personalized needs of map applications. For example, users need to draw graphics and add text on the map interface to explain the map route or other business content. At present, drawing on the map interface is mainly done by using the drawing function of the map software. When the user needs to draw, the drawing function of the map software is called to add the user's drawn content to the map layer to obtain a map interface carrying the user's drawn content.

[0004] The inventor has discovered through research that when drawing on a map interface based on the existing method, the content drawn by the user and various map overlays are in the same layer, and the addition and deletion operations of the user-drawn content and various map overlays may affect each other. During business development, a large amount of logic needs to be added to avoid operational impacts between the user-drawn content and the map overlays, which increases the workload of business development and the complexity of the platform logic code. Summary of the invention

[0005] In view of this, an embodiment of the present invention provides a method for drawing on a map interface to solve the problems of the existing way of drawing on a map, which requires adding a large amount of logic to avoid mutual influence between user-drawn content and map overlays, a large workload for business development, and high platform code complexity.

[0006] The embodiment of the present invention also provides a device for drawing on a map interface to ensure the actual implementation and application of the above method.

[0007] To achieve the above objectives, the embodiments of the present invention provide the following technical solutions:

[0008] A method for drawing on a map interface, comprising:

[0009] When the user needs to draw in the interface of the target map, a preset drawing option toolbar is displayed in the interface of the target map, and a canvas object is created; the drawing option toolbar includes function controls corresponding to multiple pattern types;

[0010] Creating a custom layer corresponding to the target map, and adding the canvas object to the custom layer;

[0011] When the user triggers a function control in the drawing option toolbar, the pattern type corresponding to the function control triggered by the user is used as the target pattern type, and a preset canvas drawing plug-in is called to make the interface of the target map enter the drawing state corresponding to the target pattern type;

[0012] In response to a drawing operation of the user, determining drawing data corresponding to the drawing operation;

[0013] A pattern corresponding to the drawing data is drawn in the canvas object.

[0014] In the above method, optionally, if the target pattern type is a rectangle, determining the drawing data corresponding to the drawing operation includes:

[0015] Determine the first drawing starting point coordinates and the first drawing end point coordinates corresponding to the drawing operation;

[0016] Determine the coordinates of the rectangle positioning point, the length of the rectangle, and the width of the rectangle based on the coordinates of the first drawing starting point and the coordinates of the first drawing end point;

[0017] The rectangle anchor point coordinates, the rectangle length and the rectangle width are used as the drawing data.

[0018] In the above method, optionally, if the target pattern type is a circle or an ellipse, determining the drawing data corresponding to the drawing operation includes:

[0019] Determine the second drawing starting point coordinates and the second drawing end point coordinates corresponding to the drawing operation;

[0020] Determine the center coordinates and radius data based on the second drawing starting point coordinates and the second drawing end point coordinates;

[0021] The center coordinates and the radius data are used as the drawing data.

[0022] In the above method, optionally, if the target pattern type is an arrow line segment, determining the drawing data corresponding to the drawing operation includes:

[0023] Determine the third drawing starting point coordinates and the third drawing end point coordinates corresponding to the drawing operation;

[0024] Based on the third drawing starting point coordinates and the third drawing ending point coordinates, determining the line segment starting point coordinates, the line segment ending point coordinates and the line segment length;

[0025] Based on the line segment length, determining an arrow parameter set; the arrow parameter set includes arrow thickness and arrow side line inclination angle;

[0026] The line segment start point coordinates, the line segment end point coordinates and the arrow parameter set are used as the drawing data.

[0027] In the above method, optionally, if the target pattern type is text, determining the drawing data corresponding to the drawing operation includes:

[0028] Determine a text box corresponding to the drawing operation;

[0029] The input text in the text box is acquired, and the input text is used as the drawing data.

[0030] In the above method, optionally, drawing a pattern corresponding to the drawing data in the canvas object includes:

[0031] Determine a target drawing method corresponding to the target pattern type among various drawing methods included in the canvas drawing plug-in;

[0032] Based on the drawing data, the target drawing method is called to perform pattern drawing in the canvas object, so as to draw a pattern corresponding to the drawing data in the canvas object.

[0033] The above method may optionally further include:

[0034] In response to an undo operation of the user, determining a historical drawing operation corresponding to the undo operation;

[0035] A target pattern corresponding to the historical drawing operation is determined in the canvas object, and the target pattern is deleted in the canvas object.

[0036] A device for drawing on a map interface, comprising:

[0037] A canvas creation unit, used for displaying a preset drawing option toolbar in the interface of the target map and creating a canvas object when a user needs to draw in the interface of the target map; the drawing option toolbar includes function controls corresponding to multiple pattern types;

[0038] A layer establishing unit, used for establishing a custom layer corresponding to the target map, and adding the canvas object to the custom layer;

[0039] A state switching unit, configured to, when the user triggers a function control in the drawing option toolbar, use the pattern type corresponding to the function control triggered by the user as the target pattern type, call a preset canvas drawing plug-in, and make the interface of the target map enter the drawing state corresponding to the target pattern type;

[0040] A drawing response unit, configured to determine drawing data corresponding to the drawing operation in response to the drawing operation of the user;

[0041] A pattern drawing unit is used to draw a pattern corresponding to the drawing data in the canvas object.

[0042] A storage medium includes stored instructions, wherein when the instructions are executed, the device where the storage medium is located is controlled to execute the method for drawing on a map interface as described above.

[0043] An electronic device includes a memory and one or more instructions, wherein the one or more instructions are stored in the memory and are configured to be executed by one or more processors to perform the above-mentioned method of drawing on a map interface.

[0044] A method for drawing in a map interface based on the above-mentioned embodiment of the present invention includes: when a user needs to draw in the interface of a target map, a preset drawing option toolbar is displayed in the interface of the target map, and a canvas object is created; the drawing option toolbar contains function controls corresponding to multiple pattern types; a custom layer corresponding to the target map is established, and the canvas object is added to the custom layer; when the user triggers the function control in the drawing option toolbar, the pattern type corresponding to the function control triggered by the user is used as the target pattern type, and a preset canvas drawing plug-in is called to make the interface of the target map enter the drawing state corresponding to the target pattern type; in response to the user's drawing operation, the drawing data corresponding to the drawing operation is determined; and the pattern corresponding to the drawing data is drawn in the canvas object. Applying the method provided by the embodiment of the present invention, in the process of drawing on the map interface, a canvas object can be created and added to the custom layer of the map, and a drawing operation is performed on the canvas object through the Canvas drawing plug-in to draw a pattern on the map interface. The pattern drawn by the user is carried by the canvas object and is located on the custom layer of the map, that is, the content drawn by the user and the various map overlays of the map are located in independent layers. The operations on the two will not affect each other, and there is no need to deploy corresponding logic code to eliminate the impact of operations. It can effectively simplify the logic code, reduce the workload of business development, and reduce the complexity of the platform logic code, which is conducive to improving the stability and reliability of the platform operation. Secondly, the custom layer of the map can be moved and scaled synchronously with the map, so the drawn content located in the custom layer can change synchronously with the user's zoom or drag operation on the map, which is conducive to improving the user's visual experience. In addition, the Canvas drawing plug-in integrates a large number of graphics drawing methods. Through the Canvas drawing plug-in, various complex graphics can be drawn in the map interface, which is conducive to meeting the user's personalized drawing needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0046] Figure 1 A method flow chart of a method for drawing on a map interface provided by an embodiment of the present invention;

[0047] Figure 2 A flowchart of another method for drawing on a map interface provided by an embodiment of the present invention;

[0048] Figure 3Another method flow chart of a method for drawing on a map interface provided by an embodiment of the present invention;

[0049] Figure 4 A schematic diagram of the structure of a device for drawing on a map interface provided by an embodiment of the present invention;

[0050] Figure 5 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0051] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0052] In this application, the terms "comprises", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element.

[0053] The embodiment of the present invention provides a method for drawing on a map interface. The method can be applied to a business platform based on an electronic map. The execution subject can be a processor at the front end of the platform. The method flow chart of the method can be shown as follows: Figure 1 As shown, including:

[0054] S101: When a user needs to draw in the interface of a target map, a preset drawing option toolbar is displayed in the interface of the target map, and a canvas object is created; the drawing option toolbar includes function controls corresponding to multiple pattern types;

[0055] In the method provided by the embodiment of the present invention, during the operation of the business platform using the electronic map, the platform can call the data interface of the map software, and display the required map interface in the front-end interface of the business platform. In the interface displaying the map, a corresponding drawing function control can be deployed, and the user can enter the drawing process by triggering the drawing function control while browsing the map interface.

[0056] When the user clicks on the drawing function control in the map interface, the processor regards that the user needs to draw in the current map (target map) interface. In the method provided by the embodiment of the present invention, a drawing option toolbar is pre-set according to the actual drawing function, and the drawing option toolbar integrates the function controls corresponding to each pattern type available for drawing on the platform to prompt the user to select the pattern type to be drawn. For example, the pattern types that can be drawn may include rectangles, circles or ellipses, arrow segments, text annotations, etc.

[0057] In the method provided by the embodiment of the present invention, when the user needs to draw in the interface of the target map, the preset drawing option toolbar can be initialized for rendering, and at the same time, a Canvas object, i.e., a canvas object, is created based on a preset JavaScript script.

[0058] S102: creating a custom layer corresponding to the target map, and adding the canvas object to the custom layer;

[0059] In the method provided by the embodiment of the present invention, a custom layer plug-in of the map software can be called to add a custom layer to the map instance of the target map, and the created canvas object is added to the created custom layer.

[0060] S103: when the user triggers a function control in the drawing option toolbar, the pattern type corresponding to the function control triggered by the user is used as the target pattern type, and a preset canvas drawing plug-in is called to make the interface of the target map enter the drawing state corresponding to the target pattern type;

[0061] In the method provided by the embodiment of the present invention, when the user clicks a certain function control in the drawing option toolbar, a click event of the function control is triggered. When the processor monitors the click event of a certain function control, the pattern type corresponding to the function control is used as the target pattern type. The preset canvas drawing plug-in is called to switch the front-end interface to the drawing state corresponding to the target pattern type, that is, the interface state of drawing the pattern of the target pattern type. The preset canvas drawing plug-in refers to the Canvas drawing plug-in, and an existing Canvas plug-in, such as the jcanvas.min.js plug-in, can be applied.

[0062] S104: In response to the drawing operation of the user, determining drawing data corresponding to the drawing operation;

[0063] In the method provided by the embodiment of the present invention, after the front-end interface enters the drawing state, the user can perform drawing operations in the front-end interface. In the drawing state corresponding to each pattern type, there is a triggering operation of the drawing event. For example, in the drawing state of drawing a rectangle, two consecutive click behaviors are set to trigger a rectangle drawing event, that is, the user performs a rectangle drawing operation.

[0064] In the method provided by the embodiment of the present invention, after the user performs a drawing operation, the processor can determine the relevant data required for drawing a pattern based on the drawing event triggered by the user's drawing operation, and use the data as the drawing data corresponding to the drawing operation. It can be understood that the specific data type of the drawing data is associated with the drawing requirements of the target pattern type.

[0065] S105: Drawing a pattern corresponding to the drawing data in the canvas object.

[0066] In the method provided by the embodiment of the present invention, the processor can draw a pattern in the canvas object based on the canvas drawing plug-in to add a pattern corresponding to the drawing data in the canvas object. It can be understood that the canvas object is located in the custom layer of the target map, which is equivalent to drawing the corresponding pattern in the custom layer. When the user completes the drawing process, the processor can associate the layer data of the custom layer with the target map instance and store the above data to the server. When the user accesses the interface of the target map again, the layer data of the custom layer can be rendered on the front-end interface, that is, when the user enters the interface of the target map again, the content drawn by the user can be restored.

[0067] Based on the method provided by the embodiment of the present invention, when a user needs to draw in a map interface, a preset drawing option toolbar can be displayed in the interface, and a canvas object can be created; a custom layer corresponding to the target map can be established, and the canvas object can be added to the custom layer; when the user triggers a function control in the drawing option toolbar, the pattern type corresponding to the function control triggered by the user is used as the target pattern type, and the preset canvas drawing plug-in is called to make the map interface enter the drawing state corresponding to the target pattern type; in response to the user's drawing operation, the drawing data corresponding to the drawing operation is determined; and the pattern corresponding to the drawing data is drawn in the canvas object. Applying the method provided by the embodiment of the present invention, in the process of drawing on the map interface, a canvas (Canvas) object can be created and added to the custom layer of the map, and a drawing operation can be performed on the canvas object through the Canvas drawing plug-in to draw a pattern on the map interface. The pattern drawn by the user is carried by the canvas object and is located on the custom layer of the map, that is, the content drawn by the user and the various map overlays of the map are located in independent layers. The operations on the two will not affect each other, and there is no need to deploy corresponding logic code to eliminate the impact of operations. It can effectively simplify the logic code, reduce the workload of business development, and reduce the complexity of the platform logic code, which is conducive to improving the stability and reliability of the platform operation. Secondly, the custom layer of the map can be moved and scaled synchronously with the map, so the drawn content located in the custom layer can change synchronously with the user's zoom or drag operation on the map, which is conducive to improving the user's visual experience. In addition, the Canvas drawing plug-in integrates a large number of graphics drawing methods. Through the Canvas drawing plug-in, various complex graphics can be drawn in the map interface, which is conducive to meeting the user's personalized drawing needs.

[0068] exist Figure 1 Based on the method shown in FIG. 1 , in the method provided in the embodiment of the present invention, if the target pattern type is a rectangle, such as Figure 2 As shown, the process of determining the drawing data corresponding to the drawing operation mentioned in step S104 includes:

[0069] S201: Determine the first drawing starting point coordinates and the first drawing end point coordinates corresponding to the drawing operation;

[0070] In the method provided by the embodiment of the present invention, when the target pattern type is a rectangle, that is, when the user needs to draw a rectangular pattern, after the front-end interface enters the drawing state of drawing a rectangle, the user can control the position and size of the rectangle to be drawn through a dragging behavior (i.e., a sliding operation, that is, after performing a click operation, moving in the interface in the click state, and performing a release operation after reaching the target position), and the position point of the click operation of the dragging behavior is the drawing starting point, and the position point of the release operation is the drawing end point. The processor can obtain the position coordinates of the starting click operation and the position coordinates of the release operation in the user's dragging behavior from the drawing event triggered by the user's drawing operation, and use the position coordinates of the click operation as the first drawing starting point coordinates, and use the position coordinates of the release operation as the first drawing end point coordinates.

[0071] S202: Determine the coordinates of a rectangle positioning point, a rectangle length, and a rectangle width based on the first drawing starting point coordinates and the first drawing end point coordinates;

[0072] In the method provided by the embodiment of the present invention, the processor can calculate the rectangle positioning point coordinates, the rectangle length and the rectangle width based on the first drawing starting point coordinates and the first drawing end point coordinates according to the rectangle drawing mechanism in the Canvas drawing plug-in. The rectangle positioning point coordinates refer to the coordinates used to locate the rectangle position, for example, they can be the coordinates of the center point of the rectangle, or the coordinates of the upper left corner vertex of the rectangle. Specifically, for example, the rectangle drawing mechanism is to use the user's drawing starting point as a rectangle vertex, the drawing end point as the rectangle vertex of the diagonal of the drawing starting point, and the upper left corner vertex of the rectangle as the positioning point. Then, the first drawing starting point coordinates and the first drawing end point coordinates are used as the two vertex coordinates at the diagonal position to calculate the coordinates of the other two vertices, so that the coordinates of the four vertices of the rectangle can be obtained, and the coordinates of the upper left corner vertex position among the four vertex coordinates are used as the rectangle positioning point coordinates, and the rectangle length and rectangle width are calculated according to the horizontal and vertical coordinate values ​​of the four vertices.

[0073] S203: Using the rectangle anchor point coordinates, the rectangle length and the rectangle width as the drawing data.

[0074] In the method provided by the embodiment of the present invention, the coordinates of the rectangle anchor point, the rectangle length and the rectangle width are used as drawing data corresponding to the current drawing operation.

[0075] exist Figure 1 On the basis of the method shown, in the method provided by the embodiment of the present invention, if the target pattern type is a circle or an ellipse, the process of determining the drawing data corresponding to the drawing operation mentioned in step S104 includes:

[0076] Determine the second drawing starting point coordinates and the second drawing end point coordinates corresponding to the drawing operation;

[0077] In the method provided by the embodiment of the present invention, when the target pattern type is a circle or an ellipse, that is, when the user needs to draw a circle or an ellipse pattern, after the front-end interface enters the drawing state of drawing a circle or an ellipse, the user can control the position and size of the circle / ellipse to be drawn by dragging, and the position point of the click operation of the dragging behavior is the drawing starting point, and the position point of the release operation is the drawing end point. The processor can obtain the position coordinates of the click operation and the release operation of the user's dragging behavior from the drawing event triggered by the user's drawing operation, and use the position coordinates of the click operation as the second drawing starting point coordinates, and use the position coordinates of the release operation in the dragging behavior as the second drawing end point coordinates.

[0078] Determine the center coordinates and radius data based on the second drawing starting point coordinates and the second drawing end point coordinates;

[0079] The center coordinates and the radius data are used as the drawing data.

[0080] In the method provided by the embodiment of the present invention, the processor can calculate the center coordinates and radius data based on the second drawing start point coordinates and the second drawing end point coordinates according to the drawing mechanism of the circle / ellipse in the Canvas drawing plug-in. If a circle needs to be drawn, the radius data is the radius of the circle. If an ellipse needs to be drawn, the radius data includes the major axis radius and the minor axis radius. For example, the drawing mechanism of a circle is to use the user's drawing start point and drawing end point as the two end points on the diameter of the circle. Then, the midpoint coordinates of the connecting line between the second drawing start point coordinates and the second drawing end point coordinates are calculated, and the length of the connecting line is calculated. The midpoint coordinates are used as the center coordinates, and half of the length of the connecting line is used as the radius data. The center coordinates and radius data are used as the drawing data corresponding to the current drawing operation.

[0081] exist Figure 1 On the basis of the method shown, in the method provided by the embodiment of the present invention, if the target pattern type is an arrow line segment, the process of determining the drawing data corresponding to the drawing operation mentioned in step S104 includes:

[0082] Determine the third drawing starting point coordinates and the third drawing end point coordinates corresponding to the drawing operation;

[0083] In the method provided by the embodiment of the present invention, when the target pattern type is an arrow line segment, that is, when the user needs to draw a pattern of an arrow line segment, after the front-end interface enters the drawing state of drawing the arrow line segment, the user can control the starting point and the end point of the arrow line segment by dragging. The processor can obtain the position coordinates of the click operation and the release operation in the user's dragging behavior from the drawing event triggered by the user's drawing operation, and use the position coordinates of the click operation as the third drawing starting point coordinates, and use the position coordinates of the release operation as the third drawing end point coordinates.

[0084] Based on the third drawing starting point coordinates and the third drawing ending point coordinates, determining the line segment starting point coordinates, the line segment ending point coordinates and the line segment length;

[0085] In the method provided by the embodiment of the present invention, the processor may use the third drawing starting point coordinates as the line segment starting point coordinates, use the third drawing end point coordinates as the line segment end point coordinates, and calculate the distance length between the third drawing starting point coordinates and the third drawing end point coordinates, and use the distance length as the line segment length.

[0086] Based on the line segment length, determining an arrow parameter set; the arrow parameter set includes arrow thickness and arrow side line inclination angle;

[0087] The line segment start point coordinates, the line segment end point coordinates and the arrow parameter set are used as the drawing data.

[0088] In the method provided by the embodiment of the present invention, the processor may determine the relevant parameters for defining the shape of the arrow based on the length of the line segment according to the drawing mechanism of the arrow line segment in the Canvas drawing plug-in, which may specifically include parameters such as the thickness of the arrow and the inclination angle of the side line of the arrow. Generally, the longer the line segment length, the larger the arrow size defined by the arrow parameter set. Specifically, the correspondence between the line segment length and various arrow parameters may be preset, and the arrow parameter corresponding to the current line segment length may be calculated based on the preset correspondence. The line segment starting point coordinates, the line segment end point coordinates and the arrow parameter set are used as the drawing data corresponding to the current drawing operation.

[0089] exist Figure 1 On the basis of the method shown, in the method provided by the embodiment of the present invention, if the target pattern type is text, the process of determining the drawing data corresponding to the drawing operation mentioned in step S104 includes:

[0090] Determine a text box corresponding to the drawing operation;

[0091] In the method provided by the embodiment of the present invention, when the target pattern type is text, that is, when the user needs to add a text annotation, after the front-end interface enters the drawing state of drawing text, the user can control the position where the text needs to be added and confirm the completion of the text input through two clicks. Specifically, when the user clicks for the first time, a DOM node of a text box is generated at the click position of the click operation, so that the user can enter text through the text box. When the user performs a click operation in the interface area outside the text box, it is considered that the user has completed the text input, that is, the user has performed a drawing operation, and the text box display can be canceled at this time.

[0092] In the method provided by the embodiment of the present invention, the processor can determine the text box in which the user inputs text from the drawing event triggered by the user's drawing operation.

[0093] The input text in the text box is acquired, and the input text is used as the drawing data.

[0094] In the method provided by the embodiment of the present invention, the processor can obtain the text content input in the text box, namely the so-called input text, and use the input text as drawing data to add the input text at a position in the canvas object corresponding to the position of the text box.

[0095] It should be noted that, in a specific implementation process, the pattern can be further drawn in combination with parameters such as the color and thickness of the drawing line segment, and the data used in the drawing process is not limited to the drawing data mentioned in the above embodiments of the present invention.

[0096] exist Figure 1 On the basis of the method shown, in the method provided by the embodiment of the present invention, the process of drawing the pattern corresponding to the drawing data in the canvas object mentioned in step S105 includes:

[0097] Determine a target drawing method corresponding to the target pattern type among various drawing methods included in the canvas drawing plug-in;

[0098] In the method provided by the embodiment of the present invention, the canvas drawing plug-in integrates drawing methods corresponding to each pattern type. The processor can find a drawing method that matches the target pattern type among the various drawing methods, and use the drawing method as the target drawing method. For example, the jcanvas.min.js plug-in includes a drawRect method for drawing a rectangle, a drawEllipse method for drawing a circle / ellipse, a drawText method for adding text, and the like. For example, if the target pattern type is a rectangle, then the drawRect method is used as the target drawing method.

[0099] Based on the drawing data, the target drawing method is called to perform pattern drawing in the canvas object, so as to draw a pattern corresponding to the drawing data in the canvas object.

[0100] In the method provided by the embodiment of the present invention, drawing data can be used as drawing parameters, the canvas object in the custom layer can be used as the drawing object, and the target drawing method in the canvas drawing plug-in can be called to draw a pattern, so as to draw a corresponding pattern in the canvas object.

[0101] exist Figure 1 Based on the method shown, Figure 3 As shown, the method provided in the embodiment of the present invention further includes:

[0102] S301: In response to an undo operation of the user, determining a historical drawing operation corresponding to the undo operation;

[0103] In the method provided by the embodiment of the present invention, a function control for undoing a drawing operation is also provided in the drawing option toolbar, and when the user needs to undo the last drawing operation, the function control can be triggered.

[0104] When the processor monitors a click event of the function control for canceling a drawing operation, it is considered that the user has performed an undo operation, and the last current drawing operation is used as a historical drawing operation corresponding to the current undo operation.

[0105] S302: determining a target pattern corresponding to the historical drawing operation in the canvas object;

[0106] In the method provided by the embodiment of the present invention, a pattern triggered by a historical drawing operation is found in a canvas object, and the pattern is used as a target pattern.

[0107] S303: Delete the target pattern in the canvas object.

[0108] In the method provided by the embodiment of the present invention, a deletion operation is performed on a target pattern in a canvas object to delete the pattern in the canvas object.

[0109] Based on the method provided by the embodiment of the present invention, the user can cancel the executed drawing operation, which can further improve the user experience and meet the user's drawing needs.

[0110] In order to better illustrate the method provided by the embodiment of the present invention, based on the methods provided by the above embodiments, the embodiment of the present invention provides another method for drawing on a map interface. The method provided by the embodiment of the present invention can be deployed on the front end of various business platforms that apply electronic maps. The drawing process provided by the embodiment of the present invention mainly includes:

[0111] When a user accesses the business platform, the map is initialized in the front-end interface through the map software interface;

[0112] When the user starts the drawing function, a Canvas (Web front-end H5 technology) layer is created through JavaScript scripts, and the Canvas layer is appended to the custom layer of the map. At this time, the custom layer on the map can be understood as a transparent drawing board. The establishment of custom layers and the addition of objects can be implemented based on the custom layer interface of the map software, such as the custom layer method interface of existing map software such as the AMap.CustomLayer method or the BMap.CustomOverlay method.

[0113] At the same time, the graphics option toolbar to be drawn (graffiti) (ie, the drawing option toolbar in the above embodiment) is initialized in the front-end interface to display the functional options for drawing patterns.

[0114] When the user selects a specific drawing function and performs a drawing operation on the map, the pattern corresponding to the user's drawing operation is drawn to the Canvas layer through the third-party plug-in jcanvas.min.js.

[0115] Next, the drawing process of various patterns is illustrated with examples.

[0116] Draw a rectangle: Get the coordinate point of the user's click operation (such as the coordinate point when the left mouse button is clicked) and the coordinate point of the user's release operation (such as the coordinate point when the left mouse button is released), and calculate the position, length and width of the rectangle to be drawn based on these two coordinate points. Finally, draw the pattern on the Canvas layer through the drawRect method of jcanvas.min.js.

[0117] Draw a circle / ellipse: Get the coordinate point of the user's click operation (such as the coordinate point when the left mouse button is clicked) and the coordinate point of the user's release operation (such as the coordinate point when the left mouse button is released), and calculate the radius and the center position of the circle based on these two coordinate points. Finally, draw the pattern on the Canvas layer through the drawEllipse method of jcanvas.min.js.

[0118] Draw an arrow: Get the trajectory of the user's sliding operation on the map, calculate the thickness, angle and other related parameters of the arrow based on it, and finally draw the pattern through the drawLine method of jcanvas.min.js.

[0119] Text annotation: When the user selects the text annotation function, in response to the user's click operation, a DOM node of Input (text box) is generated and appended to the page at the location where the user clicks. The user can enter content in the text box. When the user clicks the area outside the text box, the text box is hidden, and the content in the text box is obtained. The text is added to the Canvas layer through the drawText method of jcanvas.min.js.

[0120] In the method provided by the embodiment of the present invention, the user can also perform an undo operation. When the user performs the undo operation, the previous drawing operation is obtained, and the pattern drawn corresponding to the drawing operation is deleted.

[0121] From the user's perspective, after the user turns on the drawing function, the page will present a small drawing tool window, where the user can choose to draw rectangles, arrows and other graphics. Then you can directly click, drag boxes and other operations on the map to draw patterns, and the interface can display the patterns in real time. Finally, when you confirm that the drawing is complete, you can click the confirmation button to close the toolbar, and click Cancel if you need to clear it. The graphics can be displayed in real time while drawing, and the drawn content can change synchronously with the movement of the map position and the zoom of the map, which can achieve good visual effects.

[0122] The method provided by the embodiment of the present invention creates a custom layer of the map and uses the Canvas canvas as the content of the layer. A Canvas plug-in is used to flexibly draw various graphics on the Canvas canvas. These graphics can not only be displayed to the user in real time, but also be permanently saved in the database so that they can be rendered and displayed the next time the user enters the page.

[0123] Based on the method provided by the embodiment of the present invention, drawing graphics through the Canvas canvas is not only highly flexible, but also can use mature Canvas plug-ins to draw various complex graphics to meet the personalized needs of users. The content drawn by the user is located in the custom layer, which is not in the same layer as the map layer. The various interactive operations of each layer will not affect each other, which can simplify the logic code and help improve the stability and reliability of the system. The custom layer of the map can realize the synchronous translation and zooming functions with the map, which is conducive to a smooth and consistent experience when the user uses the map.

[0124] and Figure 1 Corresponding to the method for drawing on a map interface shown in FIG. 1 , an embodiment of the present invention further provides a device for drawing on a map interface, Figure 1 The specific implementation of the method shown in is shown in the structural diagram Figure 4 As shown, including:

[0125] A canvas creation unit 401 is used to display a preset drawing option toolbar in the interface of the target map and create a canvas object when a user needs to draw in the interface of the target map; the drawing option toolbar includes function controls corresponding to multiple pattern types;

[0126] A layer establishing unit 402, used to establish a custom layer corresponding to the target map, and add the canvas object to the custom layer;

[0127] The state switching unit 403 is used for, when the user triggers a function control in the drawing option toolbar, taking the pattern type corresponding to the function control triggered by the user as the target pattern type, calling a preset canvas drawing plug-in, and making the interface of the target map enter the drawing state corresponding to the target pattern type;

[0128] A drawing response unit 404, configured to determine drawing data corresponding to the drawing operation in response to the drawing operation of the user;

[0129] The pattern drawing unit 405 is used to draw the pattern corresponding to the drawing data in the canvas object.

[0130] By using the device provided by the embodiment of the present invention, in the process of drawing on the map interface, a canvas object can be created and added to the custom layer of the map, and a drawing operation is performed on the canvas object through the drawing plug-in of Canvas to draw a pattern on the map interface. The pattern drawn by the user is carried by the canvas object and is located on the custom layer of the map, that is, the content drawn by the user and the various map overlays of the map are located in independent layers, and the operations on the two will not affect each other, and there is no need to deploy corresponding logic codes to eliminate the influence of operations, which can effectively simplify the logic code, reduce the workload of business development, reduce the complexity of the platform logic code, and help improve the stability and reliability of the platform operation. Secondly, the custom layer of the map can be synchronized with the map to move and zoom, so the drawing content located in the custom layer can be changed synchronously with the user's zoom or drag operation on the map, which is conducive to improving the user's visual experience. In addition, the drawing plug-in of Canvas integrates a large number of graphics drawing methods. Through the drawing plug-in of Canvas, various complex graphics can be drawn in the map interface, which is conducive to meeting the personalized drawing needs of users.

[0131] exist Figure 4 Based on the device shown, the device provided by the embodiment of the present invention can be further expanded into multiple units. The function of each unit can be found in the description of each embodiment provided for the method of drawing on a map interface in the previous text, and no further examples will be given here.

[0132] An embodiment of the present invention further provides a storage medium, which includes stored instructions, wherein when the instructions are executed, the device where the storage medium is located is controlled to execute the method for drawing on a map interface as described above.

[0133] The embodiment of the present invention further provides an electronic device, the structural diagram of which is shown in FIG. Figure 5 As shown, it specifically includes a memory 501 and one or more instructions 502, wherein the one or more instructions 502 are stored in the memory 501 and are configured to be executed by one or more processors 503 to perform the following operations:

[0134] When the user needs to draw in the interface of the target map, a preset drawing option toolbar is displayed in the interface of the target map, and a canvas object is created; the drawing option toolbar includes function controls corresponding to multiple pattern types;

[0135] Creating a custom layer corresponding to the target map, and adding the canvas object to the custom layer;

[0136] When the user triggers a function control in the drawing option toolbar, the pattern type corresponding to the function control triggered by the user is used as the target pattern type, and a preset canvas drawing plug-in is called to make the interface of the target map enter the drawing state corresponding to the target pattern type;

[0137] In response to a drawing operation of the user, determining drawing data corresponding to the drawing operation;

[0138] A pattern corresponding to the drawing data is drawn in the canvas object.

[0139] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can refer to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system or system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can refer to the partial description of the method embodiment. The system and system embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without creative work.

[0140] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0141] The above description of the disclosed embodiments enables one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for drawing on a map interface, characterized in that: include: When the user needs to draw in the interface of the target map, a preset drawing option toolbar is displayed in the interface of the target map, and a canvas object is created; the drawing option toolbar includes function controls corresponding to multiple pattern types; Creating a custom layer corresponding to the target map, and adding the canvas object to the custom layer; When the user triggers a function control in the drawing option toolbar, the pattern type corresponding to the function control triggered by the user is used as the target pattern type, and a preset canvas drawing plug-in is called to make the interface of the target map enter the drawing state corresponding to the target pattern type; In response to a drawing operation of the user, determining drawing data corresponding to the drawing operation; A pattern corresponding to the drawing data is drawn in the canvas object.

2. The method for drawing on a map interface according to claim 1, characterized in that: If the target pattern type is a rectangle, determining the drawing data corresponding to the drawing operation includes: Determine the first drawing starting point coordinates and the first drawing end point coordinates corresponding to the drawing operation; Determine the coordinates of the rectangle positioning point, the length of the rectangle, and the width of the rectangle based on the coordinates of the first drawing starting point and the coordinates of the first drawing end point; The rectangle anchor point coordinates, the rectangle length and the rectangle width are used as the drawing data.

3. The method for drawing on a map interface according to claim 1, characterized in that: If the target pattern type is a circle or an ellipse, determining the drawing data corresponding to the drawing operation includes: Determine the second drawing starting point coordinates and the second drawing end point coordinates corresponding to the drawing operation; Determine the center coordinates and radius data based on the second drawing starting point coordinates and the second drawing end point coordinates; The center coordinates and the radius data are used as the drawing data.

4. The method for drawing on a map interface according to claim 1, characterized in that: If the target pattern type is an arrow line segment, determining the drawing data corresponding to the drawing operation includes: Determine the third drawing starting point coordinates and the third drawing end point coordinates corresponding to the drawing operation; Based on the third drawing starting point coordinates and the third drawing ending point coordinates, determining the line segment starting point coordinates, the line segment ending point coordinates and the line segment length; Based on the line segment length, determining an arrow parameter set; the arrow parameter set includes arrow thickness and arrow side line inclination angle; The line segment start point coordinates, the line segment end point coordinates and the arrow parameter set are used as the drawing data.

5. The method for drawing on a map interface according to claim 1, characterized in that: If the target pattern type is text, determining the drawing data corresponding to the drawing operation includes: Determine a text box corresponding to the drawing operation; The input text in the text box is acquired, and the input text is used as the drawing data.

6. The method for drawing on a map interface according to claim 1, characterized in that: Drawing a pattern corresponding to the drawing data in the canvas object includes: Determine a target drawing method corresponding to the target pattern type among various drawing methods included in the canvas drawing plug-in; Based on the drawing data, the target drawing method is called to perform pattern drawing in the canvas object, so as to draw a pattern corresponding to the drawing data in the canvas object.

7. The method for drawing on a map interface according to claim 1, characterized in that: Also includes: In response to an undo operation of the user, determining a historical drawing operation corresponding to the undo operation; A target pattern corresponding to the historical drawing operation is determined in the canvas object, and the target pattern is deleted in the canvas object.

8. A device for drawing on a map interface, characterized in that: include: A canvas creation unit, used for displaying a preset drawing option toolbar in the interface of the target map and creating a canvas object when a user needs to draw in the interface of the target map; the drawing option toolbar includes function controls corresponding to multiple pattern types; A layer establishing unit, used for establishing a custom layer corresponding to the target map, and adding the canvas object to the custom layer; A state switching unit, configured to, when the user triggers a function control in the drawing option toolbar, use the pattern type corresponding to the function control triggered by the user as the target pattern type, call a preset canvas drawing plug-in, and make the interface of the target map enter the drawing state corresponding to the target pattern type; A drawing response unit, configured to determine drawing data corresponding to the drawing operation in response to the drawing operation of the user; A pattern drawing unit is used to draw a pattern corresponding to the drawing data in the canvas object.

9. A storage medium, characterized in that: The storage medium includes stored instructions, wherein when the instructions are executed, the device where the storage medium is located is controlled to execute the method for drawing on a map interface according to any one of claims 1 to 7.

10. An electronic device, characterized in that: It comprises a memory and one or more instructions, wherein the one or more instructions are stored in the memory and are configured to be executed by one or more processors to perform the method for drawing on a map interface as claimed in any one of claims 1 to 7.

Images