Map generation method and map generation device

Abstract

The present disclosure relates to a map generation method and a map generation device, the method comprising: loading a server base class, calling the API of the server to process the geographic information of the target area to determine the actual height and width of the target area, and the actual coordinates of the feature points in the target area; determining the height and width of the container; determining the height and width of the canvas according to the actual height and width and the height and width of the container; determining the proportional coefficient between the actual distance and the pixels in the canvas; determining the pixel coordinates of the feature points in the canvas according to the proportional coefficient and the actual coordinates; generating a map of the target area in the canvas according to the pixel coordinates. According to the present disclosure, the base class related methods provided by the API can be used to determine the actual height, actual width, actual coordinates and other information of the target area. Then, according to the above results, the canvas width, canvas height, and the pixel coordinates of the actual coordinates in the canvas can be further determined, and finally a map of the target area can be drawn according to the pixel coordinates.

Description

Technical Field

[0001] The present disclosure relates to the field of display technology, and in particular to a map generating method, a map generating device, a terminal and a computer-readable storage medium. Background Art

[0002] Currently, the maps that users see on the client are generally generated by the server first and then displayed on the client. To generate a map by the server, the server needs to first obtain the information of the corresponding area of ​​the map, and then generate the map of the area based on the obtained information.

[0003] However, the information that the server can obtain is limited. It is difficult to ensure that when a user needs to view a map of a certain area, the server has already obtained the information of the area in advance and generated a map of the area. This results in that the user cannot flexibly view the map of a certain area. Summary of the invention

[0004] The present disclosure provides a map generation method, a map generation device, a terminal and a computer-readable storage medium to solve the deficiencies in the related art.

[0005] According to a first aspect of an embodiment of the present disclosure, a map generation method is proposed, comprising: loading a server base class, calling an API of the server, processing geographic information of a target area through the API to determine an actual height and an actual width of the target area, and determining actual coordinates of feature points in the target area; determining a container height and a container width of a container for display; determining a canvas height and a canvas width according to the actual height, the actual width, the container height and the container width; determining a proportional coefficient between the actual distance and pixels in the canvas; determining pixel coordinates of the feature points in the canvas according to the proportional coefficient and the actual coordinates; and generating a map of the target area in the canvas according to the pixel coordinates.

[0006] In one embodiment, determining the canvas height and canvas width according to the actual height, the actual width, the container height and the container width includes: when the actual width is greater than the actual height, determining that the canvas width is equal to the container width, and determining the canvas height according to the product of the ratio of the actual height to the actual width and the canvas width; and / or when the actual height is greater than the actual width, determining that the canvas height is equal to the container height, and determining the canvas width according to the product of the ratio of the actual width to the actual height and the canvas height.

[0007] In one embodiment, determining the proportionality coefficient between the actual distance and the pixels in the canvas includes: determining the proportionality coefficient according to the actual width and the canvas width; and / or determining the proportionality coefficient according to the actual height and the canvas height.

[0008] In one embodiment, the feature point includes at least one of the following: vertices of the target area contour, vertices of a circumscribed quadrilateral of the target area contour, and vertices of a coverage contour in the target area.

[0009] In one embodiment, the feature points at least include vertices of the target area outline and vertices of a circumscribed quadrilateral of the target area outline, and determining the actual coordinates of the feature points in the target area includes: determining a basic vertex as an origin among the vertices of the circumscribed quadrilateral; calculating a first distance in a width direction and a second distance in a height direction from other feature points of the feature points except the basic vertex to the basic vertex;

[0010] The actual coordinates of the other feature points are determined according to the first distance and the second distance.

[0011] In one embodiment, the method for calculating the first distance and the distance, and determining the actual height and the actual width includes base class related methods provided by the API.

[0012] In one embodiment, the base class related methods provided by the API include:

[0013] AMap.GeometryUtil.distance.

[0014] In one embodiment, generating a map of the target area in the canvas according to the pixel coordinates includes: saving the pixel coordinates as an array; calling a polygon drawing method of fabric.js to process the array to generate a polygon corresponding to the pixel coordinates in the canvas.

[0015] In one embodiment, the method further includes: initializing objects in the canvas, the objects including the map and / or elements in the map; binding events to the objects, the events including operations and effects corresponding to the operations.

[0016] In one embodiment, the method further includes: binding height information to the object.

[0017] In one embodiment, the method further includes: when the canvas width is greater than the container width, determining a first scaling ratio according to the container width and the canvas width, and reducing the canvas according to the first scaling ratio; when the canvas height is greater than the container height, determining a second scaling ratio according to the container height and the canvas height, and reducing the canvas according to the second scaling ratio.

[0018] In one embodiment, reducing the canvas according to the first zoom ratio includes: reducing the canvas according to the first zoom ratio and a first preset zoom ratio; and / or reducing the canvas according to the second zoom ratio includes: reducing the canvas according to the second zoom ratio and a second preset zoom ratio.

[0019] In one embodiment, the method further includes: determining a container center position of the container and a canvas center position of the canvas; determining an offset from the container center position to the canvas center position; and moving the reduced canvas according to the offset.

[0020] In one embodiment, the method further includes: receiving a route generation request; obtaining maps of other areas outside the target area from the server; and generating the route based on maps of the other areas and the map of the target area when the route requested to be generated passes through the target area.

[0021] According to a second aspect of an embodiment of the present disclosure, a map generating device is proposed, comprising a processor, wherein the processor is configured to execute: loading a server base class, calling an API of the server, processing geographic information of a target area through the API to determine an actual height and an actual width of the target area, and determining actual coordinates of feature points in the target area; determining a container height and a container width of a container for display; determining a canvas height and a canvas width according to the actual height, the actual width, the container height and the container width; determining a proportional coefficient between the actual distance and pixels in the canvas; determining pixel coordinates of the feature points in the canvas according to the proportional coefficient and the actual coordinates; and generating a map of the target area in the canvas according to the pixel coordinates.

[0022] In one embodiment, the processor is configured to perform: when the actual width is greater than the actual height, determining that the canvas width is equal to the container width, and determining the canvas height according to the product of the ratio of the actual height to the actual width and the canvas width; and / or when the actual height is greater than the actual width, determining that the canvas height is equal to the container height, and determining the canvas width according to the product of the ratio of the actual width to the actual height and the canvas height.

[0023] In one embodiment, the processor is configured to perform: determining the scale factor according to the actual width and the canvas width; and / or determining the scale factor according to the actual height and the canvas height.

[0024] In one embodiment, the feature point includes at least one of the following: vertices of the target area contour, vertices of a circumscribed quadrilateral of the target area contour, and vertices of a coverage contour in the target area.

[0025] In one embodiment, the feature points include at least the vertices of the target area outline and the vertices of the circumscribed quadrilateral of the target area outline, and the processor is configured to execute: determining a base vertex as the origin among the vertices of the circumscribed quadrilateral; calculating a first distance in the width direction and a second distance in the height direction from other feature points among the feature points except the base vertex to the base vertex; and determining the actual coordinates of the other feature points based on the first distance and the second distance.

[0026] In one embodiment, the method for calculating the first distance and the distance, and determining the actual height and the actual width includes base class related methods provided by the API.

[0027] In one embodiment, the base class related methods provided by the API include:

[0028] AMap.GeometryUtil.distance.

[0029] In one embodiment, the processor is further configured to execute: initializing objects in the canvas, the objects including the map and / or elements in the map; binding events to the objects, the events including operations and effects corresponding to the operations.

[0030] In one embodiment, the processor is further configured to execute: binding height information for the object.

[0031] In one embodiment, the processor is further configured to execute: when the canvas width is greater than the container width, determining a first scaling ratio according to the container width and the canvas width, and reducing the canvas according to the first scaling ratio; when the canvas height is greater than the container height, determining a second scaling ratio according to the container height and the canvas height, and reducing the canvas according to the second scaling ratio.

[0032] In one embodiment, the processor is configured to perform: reducing the canvas according to the first zoom ratio and a first preset zoom ratio; and / or reducing the canvas according to the second zoom ratio includes: reducing the canvas according to the second zoom ratio and a second preset zoom ratio.

[0033] In one embodiment, the processor is further configured to execute: determining a container center position of the container and a canvas center position of the canvas; determining an offset from the container center position to the canvas center position; and moving the reduced canvas according to the offset.

[0034] In one embodiment, the processor is further configured to execute: receiving a route generation request; obtaining maps of other areas outside the target area from the server; and generating the route based on maps of the other areas and the map of the target area when the route requested to be generated passes through the target area.

[0035] According to a third aspect of an embodiment of the present disclosure, a terminal is proposed, comprising: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to implement the above method.

[0036] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the steps in the above method are implemented.

[0037] According to the embodiments of the present disclosure, by loading the server base class and calling the server API, the base class related methods provided by the API can be used to determine the actual height, actual width, actual coordinates and other information of the target area. Then, based on the above results, the canvas width, canvas height, and the pixel coordinates of the actual coordinates in the canvas can be further determined, and finally a map of the target area can be drawn based on the pixel coordinates.

[0038] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0040] Figure 1 It is a schematic flow chart of a map generation method according to an embodiment of the present disclosure.

[0041] Figure 2 is a schematic diagram showing a target area according to an embodiment of the present disclosure.

[0042] Figure 3A It is a schematic flow chart of another map generation method according to an embodiment of the present disclosure.

[0043] FIG. 3B to FIG. 3F It is a schematic diagram showing the relationship between a canvas and a container according to an embodiment of the present disclosure.

[0044] Figure 4 It is a schematic flow chart of another map generating method according to an embodiment of the present disclosure.

[0045] Figure 5 It is a schematic flow chart of another map generating method according to an embodiment of the present disclosure.

[0046] Figure 6 It is a schematic flow chart of another map generating method according to an embodiment of the present disclosure.

[0047] Figure 7 It is a schematic flow chart of another map generating method according to an embodiment of the present disclosure.

[0048] Figure 8 is a schematic diagram of a canvas and a container before adjustment according to an embodiment of the present disclosure.

[0049] Fig. 9 is a schematic diagram of an adjusted canvas and container according to an embodiment of the present disclosure.

[0050] Fig.10 is a schematic diagram of a further reduced canvas according to an embodiment of the present disclosure.

[0051] Fig.11 It is a schematic flow chart of another map generating method according to an embodiment of the present disclosure.

[0052] Fig.12 is a schematic diagram of a moved canvas according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0053] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0054] Figure 1This is a schematic flow chart of a map generation method according to an embodiment of the present disclosure. The method described in this embodiment can be applied to a terminal, including but not limited to a mobile phone, a tablet computer, a personal computer, a wearable device, etc. For example, it can be applied to a browser of the terminal or to other applications in the terminal. The technical solution of the present disclosure is mainly described below in the case of being applied to a browser.

[0055] like Figure 1 As shown, the map generation method may include the following steps:

[0056] In step S101, the server base class is loaded, and the API (Application Programming Interface) of the server is called to process the geographic information of the target area to determine the actual height and actual width of the target area, and determine the actual coordinates of the feature points in the target area.

[0057] In one embodiment, the target area may be determined according to an instruction input by a user. For example, an association between the target area and the identifier may be established and maintained in advance, and the target area corresponding to the identifier may be determined according to the identifier input by the user.

[0058] Among them, the target area has geographic information, for example, the outline of the target area is a polygon, the feature points may include polygon vertices, vertices of the circumscribed quadrilateral of the polygon, and outline vertices of covering objects (such as buildings) in the area, and the geographic information may include the latitude and longitude of the feature points.

[0059] Figure 2 is a schematic diagram showing a target area according to an embodiment of the present disclosure.

[0060] like Figure 2 As shown, the outline of the target area is a polygon composed of S1 to S7, which has 7 vertices. The outline vertices of the covering inside the device are P1 to P4, a total of 4 vertices. The circumscribed quadrilateral of the polygon is ABCD, a total of 4 vertices.

[0061] against Figure 2 The target area shown, the geographic information may include the longitude and latitude of S1 to S7, the longitude and latitude of P1 to P4, and the longitude and latitude of A, B, C, D.

[0062] Get Figure 2 The latitude and longitude of the feature points shown, the returned information can be in json format:

[0063]

[0064]

[0065]

[0066] Among them, mapData.bound.points represents the longitude and latitude of the vertices of the circumscribed quadrilateral. For example, the longitude and latitude of the last vertex overlaps with the longitude and latitude of the first vertex in the above code, forming a closed circumscribed quadrilateral.

[0067] mapData.data.points represents the latitude and longitude of the contour vertices of the target area. The above code only shows the latitude and longitude of two vertices. The latitude and longitude of other vertices are omitted in the above code to simplify the description, but the corresponding Figure 2 The embodiment shown has the longitude and latitude of 8 vertices, and the longitude and latitude of the last vertex coincide with the longitude and latitude of the first vertex, thus forming a closed polygon;

[0068] mapData.overlays.geom.points represents the latitude and longitude of the covered contour vertices. The above code only shows the latitude and longitude of three vertices. The latitude and longitude of other vertices are omitted in the above code to simplify the description, but the corresponding values ​​in actual applications are Figure 2 The illustrated embodiment has the longitudes and latitudes of five vertices, and the longitude and latitude of the last vertex coincide with the longitude and latitude of the first vertex, thus forming a closed quadrilateral.

[0069] It should be noted that loading the server base class and calling the server API can be executed in advance. For example, the browser can have loaded the server base class and called the server API before determining the target area. Loading the server base class and calling the server API only needs to be executed once and does not have to be executed every time a map is generated. Other operations need to be executed every time a map is generated.

[0070] In one embodiment, the server may be a server capable of displaying and / or drawing maps, and the base class may be a basic class that serves a service having the function of displaying and / or drawing maps. For example, the server is an open source server of Amap, and the base class may be an AMap class. The API called may be a JSAPI, and the API may provide a function library AMap.GeometryUtil for calculating spatial information. The functions in the function library may be used to calculate the spatial relationship (e.g., distance, angle), length, area, etc. between points, lines, and surfaces. This embodiment may apply the base class related methods provided by the API, such as the method AMap.GeometryUtil.distance in AMap.GeometryUtil.

[0071] It should be noted that the above-called base class and the method provided by the API are only examples. In actual applications, the called base class is not limited to the above-mentioned AMap, as long as the relevant methods of the base class can calculate the actual distance. Even if the called base class is AMap, the base class-related methods provided by the API are not limited to the above-mentioned AMap.GeometryUtil.distance. Only methods that can calculate actual records are required.

[0072] Through the called API, for example, based on the base class related methods provided by the API, the geographic information of the target area can be processed, for example, calculations can be performed based on the above longitude and latitude to determine the actual height and actual width of the target area.

[0073] For example, the actual height and actual width of the target area can be determined by the above method AMap.GeometryUtil.distance, and the method AMap.GeometryUtil.distance can calculate the actual ground distance between two locations.

[0074] For example, the actual width mapWidth is Figure 2 The distance between A and D shown, the actual height mapHeight is Figure 2 As shown, the distance between A and B can be calculated by substituting the longitude and latitude of A and D into AMap.GeometryUtil.distance to calculate mapWidth, and substituting the longitude and latitude of A and B into AMap.GeometryUtil.distance to calculate mapHeight.

[0075] mapWidth = AMap.GeometryUtil.distance(A,D), for example, 924.95 meters;

[0076] mapHeight = AMap.GeometryUtil.distance(A,B), for example, 838.12 meters.

[0077] In addition, the actual coordinates of the feature points in the target area can also be determined by the method AMap.GeometryUtil.distance, and the specific method is described in the subsequent embodiments.

[0078] In step S102, a container height and a container width of a container for display are determined;

[0079] In step S103, the canvas height and canvas width are determined according to the actual height, the actual width, the container height and the container width;

[0080] In one embodiment, when a map is generated through a browser, the map needs to be generated in a container, and for the browser, the container height (the height of the container visible area) and the container width (the width of the container visible area) of the container are determined.

[0081] The map is displayed in a canvas, which can be in a container. Assuming that the DOM (Document Object Model) element where the canvas is located is a container, then the container width containerWidth = container.offsetWidth, for example, 1430 pixels, and the container height containerHeight =

[0082] container.offsetHeight, for example, is 700 pixels.

[0083] Furthermore, the canvas height canvasHeight and canvas width canvasWidth can be determined according to the container height, container width, and the actual height and actual width determined in the above steps, wherein the calculated canvas height and canvas width can be in units of pixel numbers, that is, the number of pixels corresponding to the height direction of the canvas and the number of pixels corresponding to the width direction of the canvas. The specific method for determining the canvas height and canvas width will be described in detail in the subsequent embodiments.

[0084] In step S104, a ratio coefficient between the actual distance and the pixels in the canvas is determined;

[0085] In step S105, the pixel coordinates of the feature point in the canvas are determined according to the scale factor and the actual coordinates;

[0086] In step S106, a map of the target area is generated in the canvas according to the pixel coordinates.

[0087] In one embodiment, since the map is generated in the canvas displayed by the browser, and the browser specifically displays images through pixels, in order to display the feature points in the target area in the canvas, the actual coordinates of the feature points need to be converted into pixel coordinates in the browser.

[0088] First, the ratio coefficient between the actual distance and the pixels in the canvas can be determined. The ratio coefficient can represent the relationship between the pixels in the canvas and the actual distance, for example, the number of pixels in the canvas corresponding to one meter in the actual distance. For example, if the height and width of the pixel are equal, the ratio coefficient factor can be calculated based on the canvas width and the actual width, for example, factor = canvasWidth / mapWidth, or can be calculated based on the canvas height and the actual height, for example, factor = canvasHeight / mapHeight.

[0089] Then, the pixel coordinates of the feature point in the canvas can be determined according to the scale factor and the actual coordinates. For example, the actual width can be multiplied by the scale factor to determine the value of the pixel coordinate in the width direction, and the actual height can be multiplied by the scale factor to determine the value of the pixel coordinate in the height direction.

[0090] That is, the pixel coordinates are (pointX, pointY), where:

[0091] pointX = positionX * factor;

[0092] pointY=positionY*factor.

[0093] Thus, the pixel coordinates corresponding to the feature points in the canvas are determined. After determining the pixel coordinates corresponding to each feature point in the canvas, a map of the target area can be generated in the canvas according to the pixel coordinates. For example, the points corresponding to the pixel coordinates are connected to obtain the outline of the target area.

[0094] According to the embodiments of the present disclosure, by loading the server base class and calling the server API, the base class related methods provided by the API can be used to determine the actual height, actual width, actual coordinates and other information of the target area. Then, based on the above results, the canvas width, canvas height, and the pixel coordinates of the actual coordinates in the canvas can be further determined, and finally a map of the target area can be drawn based on the pixel coordinates.

[0095] In this process, there is no need to upload the geographic information of the target area to the server. The user can flexibly select the target area according to the needs, and a map of the target area can be generated locally, which is convenient for the user to view the map of any target area.

[0096] Figure 3A FIG. 1 is a schematic flow chart of another map generation method according to an embodiment of the present disclosure. Figure 3A As shown, determining the canvas height and canvas width according to the actual height, the actual width, the container height, and the container width includes:

[0097] In step S301, when the actual width is greater than the actual height, the canvas width is determined to be equal to the container width, and the canvas height is determined according to the product of the ratio of the actual height to the actual width and the canvas width; and / or when the actual height is greater than the actual width, the canvas height is determined to be equal to the container height, and the canvas width is determined according to the product of the ratio of the actual width to the actual height and the canvas height.

[0098] In one embodiment, the relationship between the actual width and the actual height may be determined first, and then the larger dimension may be determined between the actual width and the actual height, and the value of the dimension corresponding to the container may be determined as the value of the dimension corresponding to the canvas.

[0099] For example, when the actual width is greater than the actual height, it can be determined that the canvas width canvasWidth is equal to the container width containerWidth, for example, equal to 1430 pixels.

[0100] It should be noted that the shape of the canvas is , and the shape of the container is also , and at least one vertex in the canvas coincides with at least one vertex in the container. For example, the vertex Q of the canvas coincides with the vertex P of the container, and the two edges extending from the vertex Q also coincide with the two edges extending from the vertex P. The embodiments of the present disclosure are mainly described in the case where the upper left corner vertex of the canvas coincides with the upper left corner vertex of the container.

[0101] Since the target area needs to be displayed in the canvas, and the canvas needs to be displayed in the container, therefore, when the actual width is greater than the actual height, the width of the canvas can be determined to be equal to the container width, that is, the canvas can fill the container in the width dimension, and when the target area is displayed in the canvas, for example, the target area fills the canvas in the width dimension, then the target area can eventually fill the container in the width dimension, which is conducive to ensuring that the map finally generated in the container fills the container as much as possible, which is equivalent to the map filling the display area of ​​the browser as much as possible for easy viewing.

[0102] Furthermore, in this case, the canvas height canvasHeight may be determined according to the product of the ratio of the actual height to the actual width and the canvas width, where:

[0103] canvasHeight=(canvasWidth*mapHeight) / mapWidth, for example, 1295.76 pixels.

[0104] Accordingly, it can be ensured that when the actual width is adjusted according to a certain ratio (such as the ratio of the canvas width to the actual width), the actual height can also be adjusted according to the same ratio, ensuring that the aspect ratio of the adjusted target area is consistent with that before the adjustment.

[0105] For example, a canvas such as Figure 3B As shown, the horizontal direction is the width direction, and the vertical direction is the height direction. The container width and container height can be determined. Figure 2 In the embodiment shown, the actual width is greater than the actual height, so it can be determined that the canvas width is equal to the container width, and the canvas height is equal to:

[0106] canvasHeight=(canvasWidth*mapHeight) / mapWidth;

[0107] Based on this, we can get Figure 3C The canvas shown in the figure has a width that is equal to the width of the container, but a height that is different from the height of the container. For example, Figure 3C Based on Figure 2 The determined canvas height is greater than the container height, and then Figure 3D As shown, it can be generated in the canvas Figure 2 Map of the target area shown.

[0108] When the height of the canvas is greater than the height of the container, the map of the target area in the canvas will partially exceed the container, resulting in incomplete display. This situation can be adjusted, and how to adjust will be described in subsequent embodiments.

[0109] Similarly, when the actual height is greater than the actual width, the canvas width canvasHeight may be determined to be equal to the container width containerHeight.

[0110] Since the target area needs to be displayed in the canvas, and the canvas needs to be displayed in the container, therefore, when the actual height is greater than the actual width, the height of the canvas can be determined to be equal to the height of the container, that is, the canvas can fill the container in the height dimension, and when the target area is displayed in the canvas, for example, the target area fills the canvas in the height dimension, then the target area can eventually fill the container in the height dimension, which is conducive to ensuring that the map finally generated in the container fills the container as much as possible, which is equivalent to the map filling the display area of ​​the browser as much as possible for easy viewing.

[0111] Furthermore, in this case, the canvas width canvasWidth may be determined according to the product of the ratio of the actual width to the actual height and the canvas height, where:

[0112] canvasWidth=(canvasHeight*mapWidth) / mapHeight.

[0113] Accordingly, it can be ensured that when the actual height is adjusted according to a certain ratio (such as the ratio of the canvas height to the actual height), the actual width can also be adjusted according to the same ratio, ensuring that the aspect ratio of the adjusted target area is consistent with that before the adjustment.

[0114] For example, a canvas such as Figure 3B As shown in FIG. 1 , the horizontal direction is the width direction and the vertical direction is the height direction. The container width and container height can be determined. For example, based on the contour of the target area, Figure 3F As shown in S1' to S7', the actual width is greater than the actual height, so it can be determined that the canvas height is equal to the container height, and the canvas width is equal to:

[0115] canvasWidth=(canvasHeight*mapWidth) / mapHeight;

[0116] Based on this, we can get Figure 3E The canvas shown in the figure has a height that is equal to the height of the container, but a width that is different from the width of the container. For example, Figure 3C The canvas width determined in is smaller than the container width, and then Figure 3F As shown, a map of target areas S1 ′ to S7 ′ may be generated in the canvas.

[0117] In one embodiment, determining the ratio coefficient between the actual distance and the pixels in the canvas includes:

[0118] The proportionality factor is determined according to the actual width and the canvas width, or the proportionality factor is determined according to the actual height and the canvas height.

[0119] Since canvasHeight / mapHeight=canvasWidth / mapWidth is true both when the actual width is greater than the actual height and when the actual height is greater than the actual width, the proportional coefficient can be determined based on the actual width and the canvas width, or based on the actual height and the canvas height.

[0120] For example, the proportional factor factor = canvasWidth / mapWidth;

[0121] Or factor canvasHeight / mapHeight.

[0122] For example, the calculated result is 1.55, which means that the length of 1 meter in the target area occupies 1.55 pixels in the canvas.

[0123] In one embodiment, the feature point includes at least one of the following:

[0124] The vertices of the target area outline, the vertices of the circumscribed quadrilateral of the target area outline, and the vertices of the coverage outline in the target area.

[0125] Figure 4 FIG. 1 is a schematic flow chart of another map generation method according to an embodiment of the present disclosure. Figure 4 As shown, the feature points at least include vertices of the target area outline and vertices of a circumscribed quadrilateral of the target area outline, and determining the actual coordinates of the feature points in the target area includes:

[0126] In step S401, a basic vertex is determined as an origin among the vertices of the circumscribed quadrilateral;

[0127] In step S402, a first distance in a width direction and a second distance in a height direction from the feature points other than the base vertex in the feature points to the base vertex are calculated;

[0128] In step S403, the actual coordinates of the other feature points are determined according to the first distance and the second distance.

[0129] In one embodiment, a vertex of the circumscribed quadrilateral can be determined as the origin, and the vertex can be called the base vertex. Then, the first distance and the second distance in the width direction from other feature points to the base vertex can be determined, and the actual coordinates of the other feature points can be determined based on the first distance and the second distance.

[0130] Still Figure 2 As an example, the Figure 2 Taking the midpoint A as the origin as an example, the horizontal distance positionX and vertical distance positionY of each vertex in the polygon relative to point A can be calculated.

[0131] For example, for Figure 2 For the vertex S6 in the figure, a perpendicular line can be drawn from S6 to AD, and the intersection point is S6x. Then, the distance between point A and S6x can be calculated by AMap.GeometryUtil.distance, which is the horizontal distance from S6 to point A. Similarly, a perpendicular line can be drawn from S6 to AB, and the intersection point is S6y. Then, the distance between point A and S6y can be calculated by AMap.GeometryUtil.distance, which is the vertical distance from S6 to point A.

[0132] For each vertex in the polygon, the horizontal distance and vertical distance can be calculated in a similar way.

[0133] In one embodiment, the method for calculating the first distance and the distance, and determining the actual height and the actual width includes the base class related method provided by the API; the base class related method provided by the API includes AMap.GeometryUtil.distance. Based on the different loaded base classes, the calculation method may be different. For example, when the base class is AMap, the calculation method is as described above. If other base classes are loaded, the calculation method may also be adjusted accordingly.

[0134] Figure 5 FIG. 1 is a schematic flow chart of another map generation method according to an embodiment of the present disclosure. Figure 5 As shown, generating a map of the target area in the canvas according to the pixel coordinates includes:

[0135] In step S501, the pixel coordinates are saved as an array;

[0136] In step S502, a polygon drawing method of fabric.js is called to process the array to generate a polygon corresponding to the pixel coordinates in the canvas.

[0137] In one embodiment, the pixel coordinates can be saved as an array first, so as to call the method in fabric.js to process and generate the corresponding polygon in the canvas. For example, the main code for drawing a polygon is

[0138] const polygon=new fabric.Polygon(points);

[0139] canvas.add(polygon);

[0140] Among them, fabric.js is an open source canvas-based drawing library that provides a powerful and simple drawing API. Compared with directly using canvas for drawing, the code level is more concise. Specifically, it simplifies the operations of native Canvas, such as the object model that native Canvas lacks, SVG (Scalable Vector Graphics) parsing, combined graphics, and the generation of Canvas object's own drag and drop functions. Fabric.js has corresponding methods, so you can directly call the corresponding methods without editing the code that implements the method.

[0141] Figure 6 FIG. 1 is a schematic flow chart of another map generation method according to an embodiment of the present disclosure. Figure 6 As shown, the method also includes:

[0142] In step S601, objects in the canvas are initialized, the objects including the map and / or elements in the map;

[0143] In step S602, an event is bound to the object, where the event includes an operation and an effect corresponding to the operation.

[0144] In one embodiment, objects in the canvas may be initialized, specifically, a map generated in the canvas and elements in the map, such as the above-mentioned feature points, coverings, etc. For example, the above-mentioned initialization operation may be completed through the API of fabric. Fabric may be understood as a namespace, which contains many classes, such as Canvas, Image, Object, Polygon, Group, and related operations, such as:

[0145] const canvas = new fabric.Canvas(container); Initialize the container where the canvas is located;

[0146] canvas.setWidth(canvasWidth); Initialize canvas width;

[0147] canvas.setHeight(canvasHeight); initialize the canvas height.

[0148] Furthermore, events can be bound to objects, and the events include operations and effects corresponding to the operations, thereby improving the operability of the generated map.

[0149] For example, you can use the API of fabric.js to pass in the DOM element of the container and the canvas width and height calculated in the previous steps to initialize the canvas object. The operations in the binding event include but are not limited to single click, double click, wheel operation, move in, move out, etc.; the effects of the operation object include but are not limited to changing the color, display name, display position, etc.

[0150] For example, take the mouse operation as an example. The operation includes the click event mouse:down, the corresponding effect is handler1; the wheel operation mouse:wheel, the corresponding effect is handler2; the mouse moves into the canvas object mouse:over, the corresponding effect is handler3; the mouse moves out of the canvas object mouse:out, the corresponding effect is handler4; then the code can be as follows:

[0151] canvas.on('mouse:down',handler1);

[0152] canvas.on('mouse:wheel,handler2);

[0153] canvas.on('mouse:over,handler3);

[0154] canvas.on('mouse:out,handler4);

[0155] For example, the operations in the event bound to the overlay are move in and move out. The corresponding effect of move in is to change the color, and the corresponding effect of move out is to restore the color. Then, when the user subsequently moves the mouse into the overlay in the map, the color of the overlay changes, and when the user moves the mouse out of the overlay, the color of the overlay returns to its original state.

[0156] For example, if the operation in the event bound to the feature is single click, and the corresponding effect is displaying the position, then when the user subsequently clicks the feature point in the map, the position of the feature point (such as longitude and latitude or actual coordinates) can be displayed.

[0157] In one embodiment, the method further includes: binding height information to the object.

[0158] For objects in the map, height information can also be bound, where the height information can also be included in the above-mentioned geographic information. For example, if the object is a feature point in the map, the height of the feature point can be directly used as the height information of the feature point. For example, if the object is a covering in the map, the height information of the covering can be determined based on the average value of the heights of the vertices of the covering contour.

[0159] In addition, the height information in the geographic information may be continuous or discontinuous. If it is discontinuous, it may be included in the geographic information in the form of layers. For example, when the object is an overlay in a map, one or more layers may be added to the overlay, each layer having a different height.

[0160] By binding altitude information to objects, more dimensional information can be provided when users view the map, and objects in the map can be used for other purposes. For example, routes can be determined more accurately by considering altitude information.

[0161] Figure 7 FIG. 1 is a schematic flow chart of another map generation method according to an embodiment of the present disclosure. Figure 7 As shown, the method also includes:

[0162] In step S701, when the canvas width is greater than the container width, a first scaling ratio is determined according to the container width and the canvas width, and the canvas is reduced according to the first scaling ratio; when the canvas height is greater than the container height, a second scaling ratio is determined according to the container height and the canvas height, and the canvas is reduced according to the second scaling ratio.

[0163] Since the height and width of the container are fixed, and the height and / or width of the canvas are affected by the actual height and actual width and are uncertain, in some cases, the determined canvas width may be greater than the container width, or the determined canvas height may be greater than the container height.

[0164] For example, according to the embodiment shown in FIG3 , the canvas width and canvas height are determined, the aspect ratio of the container is 3:4, and the ratio of the actual height to the actual width is 1:1. Then, when the canvas width is equal to the container width, the canvas height is also equal to the container width, that is, the aspect ratio of the canvas is 4:4, and the canvas height will be greater than the container height, which causes the canvas to exceed the container in the height direction. The area within the container is the visible area, which causes the part of the canvas that exceeds the container to not be displayed.

[0165] According to this embodiment, when the canvas height is greater than the container height, a second zoom ratio zoom=(containerHeight / canvasHeight) can be determined according to the container height and the canvas height, and then the canvas is reduced according to the second zoom ratio to ensure that the canvas does not exceed the container in the height direction.

[0166] Similarly, when the canvas width is greater than the container width, a first zoom ratio zoom = (containerWidth / canvasWidth) can be determined according to the container width and the canvas width, and then the canvas is reduced according to the first zoom ratio to ensure that the canvas does not exceed the container in the width direction.

[0167] Figure 8 is a schematic diagram of a canvas and a container before adjustment according to an embodiment of the present disclosure. Fig. 9 is a schematic diagram of an adjusted canvas and container according to an embodiment of the present disclosure.

[0168] like Figure 8 As shown, the canvas width is equal to the container width, but the canvas height is greater than the container height. The canvas exceeds the container in the height direction. Then the second scaling ratio can be calculated, and then the canvas can be reduced by the second scaling ratio, so as to obtain Fig. 9 In the effect shown, the canvas height is equal to the container height, the canvas width is smaller than the container width, and the entire canvas is located within the container, ensuring that the map in the canvas can be fully displayed.

[0169] It should be noted that the reference point for the scaling operation can be selected as needed, for example Figure 8 and Fig. 9 In the , you can use the upper left vertex of the canvas as the reference point for scaling.

[0170] For example, you can use the API function canvas.zoomToPoint(zoomPoint,zoom) provided by Fabric.js to scale the canvas, where the parameter zoomPoint is the scaling reference point and zoom is the scaling ratio.

[0171] In one embodiment, reducing the canvas according to the first scaling ratio comprises:

[0172] Shrinking the canvas according to the first zoom ratio and a first preset zoom ratio; and / or

[0173] The reducing the canvas according to the second scaling ratio comprises:

[0174] The canvas is reduced according to the second zoom ratio and a second preset zoom ratio.

[0175] In one embodiment, if the canvas is only reduced according to the first zoom ratio or the second zoom ratio, the canvas may still fill the container in the height or width direction, which may cause some inconvenience in viewing and operating the map in the canvas.

[0176] Therefore, in Fig. 9 Based on the illustrated embodiment, a preset zoom ratio can be further set. For example, when the width of the canvas is greater than the width of the container, the canvas can be reduced according to the first zoom ratio and the first preset zoom ratio, that is, based on the first zoom ratio, the canvas is further reduced according to the first preset zoom ratio; for example, when the height of the canvas is greater than the height of the container, the canvas can be reduced according to the second zoom ratio and the second preset zoom ratio, that is, based on the second zoom ratio, the canvas is further reduced according to the second preset zoom ratio.

[0177] The first preset zoom ratio and the second preset zoom ratio may be the same or different, for example, they may be set to 90%, 80%, etc.

[0178] Fig.10 FIG. 1 is a schematic diagram of a further reduced canvas according to an embodiment of the present disclosure. Fig.10 As shown, the further reduced canvas does not fill the container in both height and width directions, which is beneficial to improving the viewing effect and operation convenience of the map.

[0179] Fig.11 FIG. 1 is a schematic flow chart of another map generation method according to an embodiment of the present disclosure. Fig.11 As shown, the method also includes:

[0180] In step S1101, the container center position of the container and the canvas center position of the canvas are determined;

[0181] In step S1102, the offset from the center position of the container to the center position of the canvas is determined;

[0182] In step S1103, the reduced canvas is moved according to the offset.

[0183] In one embodiment, since the canvas is scaled based on a certain reference point, the scaled canvas will deviate from the center of the container in most cases, affecting the viewing effect.

[0184] Therefore, the offset from the center of the container to the center of the canvas can be determined, and then the reduced canvas can be moved according to the offset so that the center of the canvas can coincide with the center of the container, thereby ensuring a good viewing effect.

[0185] Fig.12 FIG. 1 is a schematic diagram of a moved canvas according to an embodiment of the present disclosure. Fig.12 As shown, you can use the API function canvas.relativePan({x:moveX,y:moveY}) provided by Fabric.js to move the canvas, where moveX is the horizontal (width) offset and moveY is the vertical (height) offset. The calculation process is as follows:

[0186] moveX=containerWidth / 2–(canvasWidth*zoom) / 2;

[0187] moveY=containerHeight / 2–(canvasHeight*zoom) / 2.

[0188] The center of the moved canvas coincides with the center of the container, so that the canvas is located in the center of the container, ensuring a good viewing effect.

[0189] In one embodiment, the method further includes: receiving a route generation request; obtaining maps of other areas outside the target area from the server; and generating the route based on maps of the other areas and the map of the target area when the route requested to be generated passes through the target area.

[0190] In one embodiment, although the server may store a map of the target area, since the geographic information of the target area in the disclosed embodiment is generally entered by the user and is more in line with the actual needs of the user, the generated map of the target area is more in line with the actual needs than the map of the target area stored in the server. In addition, the server may also store maps of other areas other than the target area.

[0191] When a route generation request is received, maps of other areas can be obtained from the server, and then the route generated by the request can be estimated based on the starting point and end point in the route generation request. If the route generated by the request passes through the target area, including passing through the target area, the starting point is in the target area, the end point is in the target area, etc., the route can be generated based on the map of the target area generated in the embodiment of the present disclosure and the map of other areas obtained from the server.

[0192] Since the map of the target area generated according to the embodiment of the present disclosure is more in line with actual needs, the route generated according to the map of the target area generated according to the embodiment of the present disclosure and the maps of other areas obtained from the server is also more in line with actual needs.

[0193] For example, the geographic information of the target area in the present application is determined by the user's recent field investigation. Although the server may store a map of the target area, the timeliness of the geographic information therein is difficult to guarantee compared with the one recently determined by the user, and therefore the accuracy will be relatively low. In other words, the map of the target area generated by the embodiment of the present disclosure can better reflect the actual situation of the target area in the near future. Therefore, the route generated based on the map of the target area generated in the embodiment of the present disclosure and the map of other areas obtained from the server is more accurate.

[0194] Corresponding to the above-mentioned embodiments of the map generating method, the present disclosure also proposes embodiments of a map generating device.

[0195] An embodiment of the present disclosure also proposes a map generating device, comprising a processor, wherein the processor is configured to execute: loading a server base class, calling an API of the server to process geographic information of a target area to determine an actual height and an actual width of the target area, and determining actual coordinates of feature points in the target area; determining a container height and a container width of a container for display; determining a canvas height and a canvas width according to the actual height, the actual width, the container height and the container width; determining a proportional coefficient between the actual distance and pixels in the canvas; determining pixel coordinates of the feature points in the canvas according to the proportional coefficient and the actual coordinates; and generating a map of the target area in the canvas according to the pixel coordinates.

[0196] In one embodiment, the processor is configured to perform: when the actual width is greater than the actual height, determining that the canvas width is equal to the container width, and determining the canvas height according to the product of the ratio of the actual height to the actual width and the canvas width; and / or when the actual height is greater than the actual width, determining that the canvas height is equal to the container height, and determining the canvas width according to the product of the ratio of the actual width to the actual height and the canvas height.

[0197] In one embodiment, the processor is configured to perform: determining the scale factor according to the actual width and the canvas width, or determining the scale factor according to the actual height and the canvas height.

[0198] In one embodiment, the feature point includes at least one of the following: vertices of the target area contour, vertices of a circumscribed quadrilateral of the target area contour, and vertices of a coverage contour in the target area.

[0199] In one embodiment, the feature points include at least the vertices of the target area outline and the vertices of the circumscribed quadrilateral of the target area outline, and the processor is configured to execute: determining a base vertex as the origin among the vertices of the circumscribed quadrilateral; calculating a first distance in the width direction and a second distance in the height direction from other feature points among the feature points except the base vertex to the base vertex; and determining the actual coordinates of the other feature points based on the first distance and the second distance.

[0200] In one embodiment, the method for calculating the first distance and the distance, and determining the actual height and the actual width includes base class related methods provided by the API.

[0201] In one embodiment, the base class related methods provided by the API include:

[0202] AMap.GeometryUtil.distance.

[0203] In one embodiment, the processor is further configured to execute: initializing objects in the canvas, the objects including the map and / or elements in the map; binding events to the objects, the events including operations and effects corresponding to the operations.

[0204] In one embodiment, the method further includes: binding height information to the object.

[0205] In one embodiment, the processor is further configured to execute: when the canvas width is greater than the container width, determining a first scaling ratio according to the container width and the canvas width, and reducing the canvas according to the first scaling ratio; when the canvas height is greater than the container height, determining a second scaling ratio according to the container height and the canvas height, and reducing the canvas according to the second scaling ratio.

[0206] In one embodiment, the processor is configured to perform: reducing the canvas according to the first zoom ratio and a first preset zoom ratio; and / or reducing the canvas according to the second zoom ratio includes: reducing the canvas according to the second zoom ratio and a second preset zoom ratio.

[0207] In one embodiment, the processor is further configured to execute: determining a container center position of the container and a canvas center position of the canvas; determining an offset from the container center position to the canvas center position; and moving the reduced canvas according to the offset.

[0208] In one embodiment, the processor is further configured to execute: receiving a route generation request; obtaining maps of other areas outside the target area from the server; and generating the route based on maps of the other areas and the map of the target area when the route requested to be generated passes through the target area.

[0209] An embodiment of the present disclosure further proposes a terminal, comprising: a processor; and a memory for storing processor-executable instructions; wherein the processor is configured to implement the method described in any of the above embodiments.

[0210] The embodiments of the present disclosure further provide a computer-readable storage medium having a computer program stored thereon, which implements the steps of the method described in any of the above embodiments when the program is executed by a processor.

[0211] In the present disclosure, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance. The term "plurality" refers to two or more, unless otherwise clearly defined.

[0212] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the disclosure disclosed herein. The present disclosure is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0213] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A map generation method, characterized in that: include: Load the server base class, call the server API to process the geographic information of the target area to determine the actual height and actual width of the target area, and determine the actual coordinates of the feature points in the target area, without uploading the geographic information of the target area to the server; Determine the container height and container width of the container used for display; Determine a canvas height and a canvas width according to the actual height, the actual width, the container height, and the container width; Determine a ratio coefficient between the actual distance and the pixels in the canvas; Determining pixel coordinates of the feature point in the canvas according to the scale coefficient and the actual coordinates; A map of the target area is generated in the canvas according to the pixel coordinates.

2. The method according to claim 1, characterized in that: Determining the canvas height and canvas width according to the actual height, the actual width, the container height, and the container width includes: In the case where the actual width is greater than the actual height, determining that the canvas width is equal to the container width, and determining the canvas height according to the product of the ratio of the actual height to the actual width and the canvas width; And / or when the actual height is greater than the actual width, the canvas height is determined to be equal to the container height, and the canvas width is determined according to the product of the ratio of the actual width to the actual height and the canvas height.

3. The method according to claim 2, characterized in that Determining the ratio coefficient between the actual distance and the pixels in the canvas includes: The proportionality factor is determined according to the actual width and the canvas width, or the proportionality factor is determined according to the actual height and the canvas height.

4. The method according to claim 1, characterized in that The feature points include at least one of the following: The vertices of the target area outline, the vertices of the circumscribed quadrilateral of the target area outline, and the vertices of the coverage outline in the target area.

5. The method according to claim 4, characterized in that The feature points at least include vertices of the target area outline and vertices of a circumscribed quadrilateral of the target area outline, and determining actual coordinates of the feature points in the target area includes: Determine a base vertex among the vertices of the circumscribed quadrilateral as an origin; Calculate a first distance in the width direction and a second distance in the height direction from the other feature points among the feature points except the basic vertex to the basic vertex; The actual coordinates of the other feature points are determined according to the first distance and the second distance.

6. The method according to claim 5, characterized in that The method for calculating the first distance and the distance, and determining the actual height and the actual width includes base class related methods provided by the API.

7. The method according to claim 6, characterized in that The base class related methods provided by the API include AMap.GeometryUtil.distance.

8. The method according to claim 1, characterized in that Generating a map of the target area in the canvas according to the pixel coordinates comprises: Saving the pixel coordinates as an array; The polygon drawing method of fabric.js is called to process the array to generate a polygon corresponding to the pixel coordinates in the canvas.

9. The method according to claim 1, characterized in that: The method further comprises: Initialize objects in the canvas, wherein the objects include the map and / or elements in the map; An event is bound to the object, where the event includes an operation and an effect corresponding to the operation.

10. The method according to claim 9, characterized in that The method further comprises: Bind height information to the object.

11. The method according to any one of claims 1 to 10, characterized in that The method further comprises: When the canvas width is greater than the container width, determining a first scaling ratio according to the container width and the canvas width, and reducing the canvas according to the first scaling ratio; In a case where the height of the canvas is greater than the height of the container, a second scaling ratio is determined according to the height of the container and the height of the canvas, and the canvas is reduced according to the second scaling ratio.

12. The method according to claim 11, characterized in that The reducing the canvas according to the first scaling ratio comprises: Shrinking the canvas according to the first zoom ratio and a first preset zoom ratio; and / or The reducing the canvas according to the second scaling ratio comprises: The canvas is reduced according to the second zoom ratio and a second preset zoom ratio.

13. The method according to claim 11, characterized in that The method further comprises: Determine a container center position of the container and a canvas center position of the canvas; Determine the offset from the center position of the container to the center position of the canvas; The reduced canvas is moved according to the offset.

14. The method according to any one of claims 1 to 10, characterized in that The method further comprises: Receive a route generation request; Acquire maps of other areas outside the target area from the server; When the route requested to be generated passes through the target area, the route is generated according to the map of the other areas and the map of the target area.

15. A map generating device, characterized in that: comprising a processor configured to execute: Loading a server base class, calling an API of the server, and processing the geographic information of the target area through the base class related devices provided by the API to determine the actual height and actual width of the target area, and determine the actual coordinates of the feature points in the target area, without uploading the geographic information of the target area to the server; Determine the container height and container width of the container used for display; Determine a ratio coefficient between the actual distance and the pixels in the canvas; Determine the unit distance of the actual height and the actual width, and the ratio coefficient of the pixels in the canvas; Determining pixel coordinates of the feature point in the canvas according to the scale coefficient and the actual coordinates; A map of the target area is generated in the canvas according to the pixel coordinates.

16. The device according to claim 15, characterized in that The processor is configured to perform: In the case where the actual width is greater than the actual height, determining that the canvas width is equal to the container width, and determining the canvas height according to the product of the ratio of the actual height to the actual width and the canvas width; And / or when the actual height is greater than the actual width, the canvas height is determined to be equal to the container height, and the canvas width is determined according to the product of the ratio of the actual width to the actual height and the canvas height.

17. The device according to claim 15, characterized in that The processor is configured to determine the scale factor according to the actual width and the canvas width when the actual width is greater than the actual height; And / or when the actual height is greater than the actual width, the proportionality coefficient is determined according to the actual height and the canvas height.

18. The device according to claim 15, characterized in that The feature points include at least one of the following: The vertices of the target area outline, the vertices of the circumscribed quadrilateral of the target area outline, and the vertices of the coverage outline in the target area.

19. The device according to claim 18, characterized in that The feature points at least include vertices of the target area outline and vertices of a circumscribed quadrilateral of the target area outline, and the processor is configured to execute: Determine a base vertex among the vertices of the circumscribed quadrilateral as an origin; Calculate a first distance in the width direction and a second distance in the height direction from the other feature points among the feature points except the basic vertex to the basic vertex; The actual coordinates of the other feature points are determined according to the first distance and the second distance.

20. The device according to claim 15, characterized in that The processor is further configured to perform: Initialize objects in the canvas, wherein the objects include the map and / or elements in the map; An event is bound to the object, where the event includes an operation and an effect corresponding to the operation.

21. A terminal, characterized in that: include: processor; a memory for storing processor-executable instructions; The processor is configured to implement the method according to any one of claims 1 to 14.

22. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method according to any one of claims 1 to 14 are implemented.

Images