CN112102437B - Canvas-based radar map generation method and device, storage medium and terminal - Google Patents
Canvas-based radar map generation method and device, storage medium and terminal Download PDFInfo
- Publication number
- CN112102437B CN112102437B CN202010774057.2A CN202010774057A CN112102437B CN 112102437 B CN112102437 B CN 112102437B CN 202010774057 A CN202010774057 A CN 202010774057A CN 112102437 B CN112102437 B CN 112102437B
- Authority
- CN
- China
- Prior art keywords
- canvas
- radar
- point
- value
- color
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/40—Filling a planar surface by adding surface attributes, e.g. colour or texture
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2207/00—Indexing scheme for image analysis or image enhancement
- G06T2207/10—Image acquisition modality
- G06T2207/10032—Satellite or aerial image; Remote sensing
- G06T2207/10044—Radar image
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Instructional Devices (AREA)
Abstract
The invention discloses a Canvas-based radar map generation method, a Canvas-based radar map generation device, a Canvas-based radar map storage medium and a Canvas-based radar map terminal, wherein the method comprises the following steps: drawing a Canvas layer on the Canvas to obtain a corresponding drawing result and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing the radar map and/or a second Canvas layer used for drawing a coordinate system; and displaying the drawing result on a display screen of the display device. According to the radar chart generation method provided by the embodiment of the disclosure, due to the introduction of the Canvas with Canvas elements, the radar chart can be drawn on the Canvas layer of the Canvas, and the coordinate system can also be drawn, so that due to the introduction of the Canvas for drawing, the rendering can be directly performed on a front-end browser, and the rendering speed is increased by at least one time compared with that of other current rendering methods; in addition, due to the introduction of the Canvas with the Canvas element, the display screen of the display device can be self-adapted in the drawing process, and data does not need to be requested again, so that the drawing process is simplified.
Description
Technical Field
The invention relates to the technical field of radar image processing, in particular to a Canvas-based radar map generation method and device, a storage medium and a terminal.
Background
At present, a radar map is drawn by a rear-end Java to obtain a drawn picture. And then transferring the drawn picture to the front end, and rendering the picture at the browser end. But not only the transmission process of transmitting the picture is slow, but also the process of rendering the picture is slow.
When the graph is drawn by the Java language, the fixed size of the picture needs to be acquired for drawing the picture, and the front end utilizes Highcharts to draw a coordinate axis, so that the self-adaptability and the controllability are poor, wherein the Highcharts is a diagram library written by pure JavaScript. And the JS is used for clicking a certain point position to display point position data, so that resources are wasted due to the fact that the server is requested again.
At present, the drawing method of radar maps is based on the large data volume of radar, the middle execution step of drawing and transmitting pictures at the rear end to perform picture rendering and displaying is long, and the waiting time of a user is too long; in addition, the display has diversified resolutions, poor self-adaptation and low expansibility, thereby influencing the experience effect of the user.
Disclosure of Invention
The embodiment of the application provides a Canvas-based radar map generation method and device, a storage medium and a terminal. The following presents a simplified summary in order to provide a basic understanding of some aspects of the disclosed embodiments. This summary is not an extensive overview and is intended to neither identify key/critical elements nor delineate the scope of such embodiments. Its sole purpose is to present some concepts in a simplified form as a prelude to the more detailed description that is presented later.
In a first aspect, an embodiment of the present application provides a Canvas-based radar map generation method, where the method includes:
acquiring a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, wherein the Canvas is the Canvas with Canvas elements;
drawing a Canvas layer on the Canvas to obtain a corresponding drawing result, and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing a radar map and/or a second Canvas layer used for drawing a coordinate system;
and displaying the drawing result on a display screen of a display device, wherein the drawing result comprises the generated radar chart and the generated coordinate system.
In a second aspect, an embodiment of the present application provides a Canvas-based radar map generation apparatus, where the apparatus includes:
the acquisition module is used for acquiring a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, wherein the Canvas is a Canvas with Canvas elements;
the drawing module is used for drawing a Canvas layer on the Canvas to obtain a corresponding drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing a radar map and/or a second Canvas layer used for drawing a coordinate system;
the output module outputs the drawing result drawn by the drawing module;
and the display module is used for displaying the drawing result output by the output module on a display screen of display equipment, and the drawing result comprises the generated radar map and the generated coordinate system.
In a third aspect, embodiments of the present application provide a computer storage medium storing a plurality of instructions adapted to be loaded by a processor and to perform the above-mentioned method steps.
In a fourth aspect, an embodiment of the present application provides a terminal, which may include: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the above-mentioned method steps.
The technical scheme provided by the embodiment of the application can have the following beneficial effects:
in the embodiment of the application, a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas are obtained, wherein the Canvas is the Canvas with Canvas elements; drawing a Canvas layer on the Canvas to obtain a corresponding drawing result and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing the radar map and/or a second Canvas layer used for drawing a coordinate system; and displaying a drawing result on a display screen of the display device, wherein the drawing result comprises the generated radar chart and the generated coordinate system. According to the radar map generation method, the Canvas with Canvas elements is introduced, the radar map can be drawn on the Canvas layer of the Canvas, and the coordinate system can also be drawn, so that the Canvas is introduced for drawing, the rendering can be directly performed on a front-end browser, and the rendering speed is at least doubled compared with that of other current rendering methods; in addition, due to the introduction of the Canvas with the Canvas element, the display screen of the display device can be self-adapted in the drawing process, and data does not need to be requested again, so that the drawing process is simplified.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention, as claimed.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and together with the description, serve to explain the principles of the invention.
Fig. 1 is a schematic flowchart of a Canvas-based radar map generation method according to an embodiment of the present application;
fig. 2 is a schematic structural diagram of a Canvas-based radar map generation apparatus according to an embodiment of the present application;
fig. 3 is a schematic structural diagram of a terminal according to an embodiment of the present application.
Detailed Description
The following description and the drawings sufficiently illustrate specific embodiments of the invention to enable those skilled in the art to practice them.
It should be understood that the described embodiments are only some embodiments of the invention, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
When the following description refers to the accompanying drawings, like 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 invention. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the invention, as detailed in the appended claims.
In the description of the present invention, it is to be understood that the terms "first," "second," and the like are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. The specific meanings of the above terms in the present invention can be understood in specific cases to those skilled in the art. In addition, in the description of the present invention, "a plurality" means two or more unless otherwise specified. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.
So far, the drawing method of radar maps is based on the large data volume of radar, the middle execution step of drawing and transmitting pictures at the rear end to perform picture rendering and displaying is long, and the waiting time of a user is too long; in addition, the display has diversified resolutions, poor self-adaptation and low expansibility, thereby influencing the experience effect of the user. Therefore, the present application provides a radar map generation method, apparatus, storage medium, and terminal based on Canvas to solve the above related technical problems. According to the technical scheme, a Canvas layer is drawn on a Canvas to obtain a corresponding drawing result, and the drawing result is output, wherein the Canvas layer comprises a first Canvas layer used for drawing a radar map and/or a second Canvas layer used for drawing a coordinate system; and displaying the drawing result on a display screen of the display device. Due to the fact that the Canvas with Canvas elements is introduced, the radar chart can be drawn on the Canvas layer of the Canvas, and the coordinate system can also be drawn, so that due to the fact that the Canvas elements are introduced for drawing, the rendering can be directly carried out on a front-end browser, and the rendering speed is at least doubled compared with that of other current rendering methods; in addition, due to the introduction of the Canvas with the Canvas element, the display screen of the display device can be self-adapted in the drawing process, and data does not need to be requested again, so that the drawing process is simplified. The following detailed description will be made using exemplary embodiments.
The Canvas-based radar map generation method provided by the embodiment of the present application will be described in detail below with reference to fig. 1. The Canvas-based radar map generation method can be realized by relying on a computer program and can run on a Canvas-based radar map generation device. The computer program may be integrated into the application or may run as a separate tool-like application. The Canvas-based radar map generation apparatus in the embodiment of the present application may be a user terminal, including but not limited to: personal computers, tablet computers, handheld devices, in-vehicle devices, wearable devices, computing devices or other processing devices connected to a wireless modem, and the like. The user terminals may be called different names in different networks, for example: user equipment, access terminal, subscriber unit, subscriber station, mobile station, remote terminal, mobile device, user terminal, wireless communication device, user agent or user equipment, cellular telephone, cordless telephone, Personal Digital Assistant (PDA), terminal equipment in a 5G network or future evolution network, and the like.
Referring to fig. 1, a schematic flow chart of a Canvas-based radar map generation method is provided in an embodiment of the present application. As shown in fig. 1, the Canvas-based radar map generation method according to the embodiment of the present application may include the following steps:
s101, acquiring a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, wherein the Canvas is the Canvas with Canvas elements.
In this step, a Canvas is a hypertext markup language element that can draw an image using script (usually JavaScript). For example, a Canvas may be used to draw charts, make picture compositions, or make simple animations.
In one possible implementation, before acquiring the radar data set used for plotting the radar map, the method further includes the steps of:
creating a canvas according to the area association information of the area to be drawn, and determining the size of the canvas; wherein the Canvas is a Canvas with a Canvas element.
In this step, the area association information includes at least one of:
the information of the area shape of the area to be drawn, the size information of each edge of the area to be drawn, and the information of the connection node between each edge.
The above lists only common area related information, and area related information with other contents may also be introduced according to the needs of different application scenarios, which is not described herein again.
In one possible implementation, before creating the canvas according to the area association information of the area to be drawn, the method further includes the following steps:
reading the area associated information;
wherein the area association information comprises at least one of:
the information of the area shape of the area to be drawn, the size information of each edge of the area to be drawn, and the information of the connection node between each edge.
The above lists only common area related information, and area related information with other contents may also be introduced according to the needs of different application scenarios, which is not described herein again.
And S102, drawing a Canvas layer on the Canvas to obtain a corresponding drawing result, and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing the radar map and/or a second Canvas layer used for drawing a coordinate system.
In this step, drawing a Canvas layer on the Canvas to obtain a corresponding drawing result includes the following steps:
drawing a radar map on a first Canvas map layer on a Canvas to generate a corresponding radar map; and/or the presence of a gas in the gas,
and drawing a coordinate system on a second Canvas layer on the Canvas to generate a corresponding coordinate system.
In a possible implementation manner, drawing a radar map on a first Canvas map layer on a Canvas, and generating a corresponding radar map includes the following steps:
selecting any point on the canvas, and acquiring the radar value of the point;
at any point on the selected canvas, the radar value of the point is obtained in the following two ways:
the first way to obtain the radar value of any point: the historical radar data set comprises historical radar data of each point, specifically: any historical time point coordinate of each point is represented by X1, and a historical height coordinate corresponding to any historical time point of each point is represented by Y1; therefore, the radar value of any point in the historical radar data set can be obtained according to any historical radar data of the point.
The second way to obtain the radar value of any point: after determining a certain time as a starting time point, determining the length of an acquisition time period, which is denoted by X2, and determining an acquisition height range, which is denoted by Y2, corresponding to the acquisition time period, so that a real-time radar value of any point can be acquired.
Acquiring the corresponding position coordinate of each point on the canvas; in this step, the position coordinates of each point on the canvas are composed of an X-axis coordinate representing time and a Y-axis coordinate representing the height of the observation point. It should be noted that, in the method provided by the embodiment of the present disclosure, the time X coordinate and the height Y coordinate are used together to determine the position of each point on the canvas, that is: for positioning.
As can be seen from the above description, in the case of acquiring the radar value of any point in the first manner, the position of each point on the canvas is determined by the historical time point coordinate X1 of any point and the historical height coordinate Y1 corresponding to the historical time point. In the case of acquiring the radar value of any point in the second manner, the position of each point on the canvas is determined by the acquisition time period coordinate X2 of any point and the acquisition height coordinate Y2 corresponding to the acquisition time.
Each point on the canvas corresponds to one radar value, the radar values of each point are stored, and a radar data set comprising the radar values of each point can be automatically generated.
Calculating a color value corresponding to each point according to a color value calculation model, wherein the color value calculation model is used for calculating the color value corresponding to each point; it should be noted that, in this step, the color value calculation model determines, according to a ratio of the radar value of any point on the canvas to the maximum radar value, a position of the point on the preconfigured color ribbon, determines, according to the position, a color interval of the point on the ribbon, and assigns a unique color value to the point, where the color value is matched with the ratio of the radar value of the point to the maximum radar value, and specifically, determines the position of the point on the ribbon according to the ratio of the radar value of the point to the maximum radar value.
The process of calculating the color value of each point is specifically as follows: in a certain color range, one and only color interval is allocated for a certain color, and a only color value is given to the point in the color interval, wherein the range of the color interval is determined by the maximum value and the minimum value which are allocated in advance. Specifically, any point on the canvas falls within the color band, i.e.: the colors RGB (255, 0, 0) red to RGB (0, 0, 255) blue. Blue is located in the lower portion of the color bar and red is located in the upper portion of the color bar. On a color band from blue to red, the gradual trend of the colors is as follows: from blue to green, then from green to yellow, then from yellow to orange, then from orange to red; the above describes only a gradual trend of one color, wherein rich colors are included, and the respective colors are not exhaustive here.
Acquiring the position coordinate of any point on the canvas, the radar value of the point and the proportion of the radar value of the point to the maximum radar value; for example, if the radar value of the point is 500 and the maximum radar value is 1000, the ratio of the radar value of the point to the maximum radar value is 1: 2;
determining the position of the point on a preset color interval according to the proportion of the radar value of the point to the maximum radar value; for example, since the radar value of the point is 500 and the maximum radar value is 1000, the ratio of the radar value of the point to the maximum radar value is 1: 2; thus, it can be determined that the color corresponding to the point is in the middle of the preconfigured color ribbon, i.e.: if the point is in the green interval corresponding to the color band, the color corresponding to the point is green;
and in the case of determining that the color of the point is green, assigning a unique color value to the point according to the maximum value 255 of the color and the minimum value 0 of the color, wherein the value is a specific numerical value between 0 and 255.
The above is only an example of calculating the color value of a certain point, and the calculation process of the color value of any other point on the canvas is not described herein again. Any point color value can be determined according to the similar method.
In the Canvas-based radar map generation method provided by the embodiment of the disclosure, red represents that the concentration of the pollutant is high, and blue represents that the concentration of the pollutant is low. After the color values of different colors are calculated, radar data with different color values are displayed in a radar observation graph, different pollution levels of pollutants are given to colors represented by various color values, and therefore in the radar observation graph, the pollution condition of a preset area can be visually seen through the colors capable of representing the different pollution levels.
And adding the color value corresponding to each point to the corresponding point according to the calculated color value corresponding to each point until each point is added with the corresponding color value, and generating the corresponding radar map.
By the method, the radar map can be drawn on the first Canvas layer on the Canvas, and the corresponding radar map is generated. Due to the fact that Canvas is introduced for drawing, the rendering can be directly carried out on a front-end browser, and the rendering speed is at least doubled compared with that of other current rendering methods. For example, data statistics indicate that: by the radar map generation method provided by the embodiment of the disclosure, the drawn radar map is directly rendered in a front-end browser, and the rendering speed can reach 10000 pieces horizontally and 4000 pieces vertically and can reach 5 s. And the original method for drawing the radar map by Java is transmitted to a front-end browser and the picture is analyzed for rendering, wherein the process may need more than 10 s. Comparing the rendering speeds of the two methods, the method provided by the embodiment of the disclosure has the rendering speed at least doubled compared with the rendering speed of other current rendering methods.
In one possible approach, before calculating the color value corresponding to each point according to the color value calculation model, the method further includes the following steps:
acquiring each radar value in the radar data, each point corresponding to each radar value, the maximum radar value in the radar data and the proportion of the radar value of each point in the maximum radar value;
establishing a mapping relation among each radar value, each point corresponding to each radar value and the proportion of the radar value of each point in the maximum radar value, and identifying the mapping relation; thus, according to the proportion of the radar value of each point to the maximum radar value, the color interval of the point on the pre-configured color ribbon from blue to red can be accurately determined.
In a possible implementation manner, drawing a coordinate system on a second Canvas layer on a Canvas, and generating a corresponding coordinate system includes the following steps:
extracting edge position data corresponding to the edge grid points of the canvas from the position data set;
drawing according to the edge position data and generating a corresponding coordinate system; in this way, accurate positioning of the edges of the canvas can be achieved through the coordinate system.
And S103, displaying a drawing result on a display screen of the display device, wherein the drawing result comprises the generated radar map and the generated coordinate system.
A specific example of drawing a radar map by using the Canvas-based radar map generation method provided by the embodiment of the present disclosure is provided as follows, and a specific drawing process is as follows:
step a: the color value of each point is calculated.
The process of calculating the color value of each point is specifically as follows: in a certain color range, one and only color interval is allocated for a certain color, and a only color value is given to the point in the color interval, wherein the range of the color interval is determined by the maximum value and the minimum value which are allocated in advance. Specifically, any point on the canvas falls within the color band, i.e.: the colors RGB (255, 0, 0) red to RGB (0, 0, 255) blue. Blue is located in the lower portion of the color bar and red is located in the upper portion of the color bar. On a color band from blue to red, the gradual trend of the colors is as follows: from blue to green, then from green to yellow, then from yellow to orange, then from orange to red; the above describes only a gradual trend of one color, wherein rich colors are included, and the respective colors are not exhaustive here.
Acquiring the position coordinate of any point on the canvas, the radar value of the point and the proportion of the radar value of the point to the maximum radar value; for example, if the radar value of the point is 500 and the maximum radar value is 1000, the ratio of the radar value of the point to the maximum radar value is 1: 2;
determining the position of the point on a preset color interval according to the proportion of the radar value of the point to the maximum radar value; for example, since the radar value of the point is 500 and the maximum radar value is 1000, the ratio of the radar value of the point to the maximum radar value is 1: 2; thus, it can be determined that the color corresponding to the point is in the middle of the preconfigured color ribbon, i.e.: if the point is in the green interval corresponding to the color band, the color corresponding to the point is green;
and in the case of determining that the color of the point is green, assigning a unique color value to the point according to the maximum value 255 of the color and the minimum value 0 of the color, wherein the value is a specific numerical value between 0 and 255.
The above is only an example of calculating the color value of a certain point, and the calculation process of the color value of any other point on the canvas is not described herein again. Any point color value can be determined according to the similar method.
After the color of each point and the color value of each point are determined, the color of each point is populated onto the corresponding point on the canvas.
Step b: and drawing according to all the acquired radar data, and automatically generating a radar chart which can visually represent the concentration of the pollutants through various colors. In practical application, in a certain observation diagram, it can be visually seen that: the concentration of the contaminant is high for a predetermined period of time in a region, for example, between 21:00 on 11/07/2020 and 03:00 on 12/07/2020, indicating that the concentration of the contaminant is high during this period of time. Conversely, the concentration of the contaminant between 03:00 at 12/07/13/2020 is green, indicating that the contaminant concentration decreases over this time period; in this way, after the radar map is automatically generated, the automatically generated radar map is presented on the display screen of the display device.
Step c: extracting edge position data corresponding to the edge grid points of the canvas from the position data set, drawing according to the edge position data and generating a corresponding coordinate system; in this way, after the coordinate system is generated, the automatically generated coordinate system is presented on the display screen of the display device.
In the embodiment of the application, a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas are obtained, wherein the Canvas is the Canvas with Canvas elements; drawing a Canvas layer on the Canvas to obtain a corresponding drawing result and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing the radar map and/or a second Canvas layer used for drawing a coordinate system; and displaying a drawing result on a display screen of the display device, wherein the drawing result comprises the generated radar chart and the generated coordinate system. According to the radar map generation method, the Canvas with Canvas elements is introduced, the radar map can be drawn on the Canvas layer of the Canvas, and the coordinate system can also be drawn, so that the Canvas is introduced for drawing, the rendering can be directly performed on a front-end browser, and the rendering speed is at least doubled compared with that of other current rendering methods; in addition, due to the introduction of the Canvas with the Canvas element, the display screen of the display device can be self-adapted in the drawing process, and data does not need to be requested again, so that the drawing process is simplified.
The following are embodiments of the apparatus of the present invention that may be used to perform embodiments of the method of the present invention. For details which are not disclosed in the embodiments of the apparatus of the present invention, reference is made to the embodiments of the method of the present invention.
Referring to fig. 2, a schematic structural diagram of a Canvas-based radar map generating apparatus according to an exemplary embodiment of the present invention is shown. The Canvas-based radar map generation apparatus may be implemented by software, hardware, or a combination of both as all or a part of a terminal. The Canvas-based radar map generation device comprises an acquisition module 10, a drawing module 20, an output module 30 and a presentation module 40.
Specifically, the acquiring module 10 is configured to acquire a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, where the Canvas is a Canvas with a Canvas element;
the drawing module 20 is configured to draw a Canvas layer on the Canvas to obtain a corresponding drawing result, where the Canvas layer includes a first Canvas layer for drawing the radar map and/or a second Canvas layer for drawing the coordinate system;
an output module 30 for outputting the drawing result drawn by the drawing module 20;
and the display module 40 is used for displaying the drawing result output by the output module 30 on a display screen of the display device, wherein the drawing result comprises the generated radar map and the generated coordinate system.
Optionally, the rendering module 20 is configured to:
drawing a radar map on a first Canvas map layer on a Canvas to generate a corresponding radar map; and/or the presence of a gas in the gas,
and drawing a coordinate system on a second Canvas layer on the Canvas to generate a corresponding coordinate system.
Optionally, the drawing module 20 is specifically configured to:
selecting any point on the canvas, and acquiring the radar value of the point;
acquiring the corresponding position coordinate of each point on the canvas;
calculating a color value corresponding to each point according to a color value calculation model, wherein the color value calculation model is used for calculating the color value corresponding to each point;
and adding the color value corresponding to each point to the corresponding point according to the calculated color value corresponding to each point until each point is added with the corresponding color value, and generating the corresponding radar map.
Optionally, the apparatus further comprises:
the acquisition module is further configured to:
before the drawing module 20 calculates the color value corresponding to each point according to the color value calculation model, obtaining each radar value in the radar data, each point corresponding to each radar value, the maximum radar value in the radar data, and the proportion of the radar value of each point in the maximum radar value;
a mapping relationship establishing module (not shown in fig. 2) for establishing a mapping relationship among each radar value acquired by the acquiring module, each point corresponding to each radar value, and a ratio of the radar value of each point to the maximum radar value;
and an identification module (not shown in fig. 2) for identifying the mapping relationship established by the mapping relationship establishing module.
Optionally, the drawing module 20 is further specifically configured to:
extracting edge position data corresponding to the edge grid points of the canvas from the position data set;
and drawing and generating a corresponding coordinate system according to the edge position data.
Optionally, the apparatus further comprises:
a canvas creation module (not shown in fig. 2) for creating a canvas according to the area association information of the area to be drawn before the acquisition module 10 acquires the radar data set for drawing the radar map.
A canvas sizing module (not shown in FIG. 2) for determining a size of the canvas created by the canvas creation module.
Optionally, the apparatus further comprises:
a reading module (not shown in fig. 2) configured to read the region association information before the canvas creation module creates the canvas according to the region association information of the region to be drawn;
the area association information read by the reading module comprises at least one of the following items:
the information of the area shape of the area to be drawn, the size information of each edge of the area to be drawn, and the information of the connection node between each edge.
It should be noted that, when the radar map generation apparatus based on Canvas provided in the foregoing embodiment executes the radar map generation method based on Canvas, only the division of the functional modules is described as an example, and in practical applications, the function distribution may be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules, so as to complete all or part of the functions described above. In addition, the radar map generation device based on Canvas provided by the above embodiment and the radar map generation method based on Canvas have the same concept, and the implementation process is detailed in the embodiment of the radar map generation method based on Canvas, which is not described herein again.
In the embodiment of the application, an acquisition module acquires a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, wherein the Canvas is the Canvas with Canvas elements; the method comprises the steps that a drawing module draws a Canvas layer on a Canvas to obtain a corresponding drawing result, an output module outputs the drawing result, and the Canvas layer comprises a first Canvas layer used for drawing a radar map and/or a second Canvas layer used for drawing a coordinate system; the display module displays a drawing result on a display screen of the display device, wherein the drawing result comprises the generated radar map and the generated coordinate system. The radar map generating device provided by the embodiment of the application introduces the Canvas with Canvas elements, and not only can draw the radar map but also can draw a coordinate system on the Canvas layer of the Canvas, so that the Canvas is introduced for drawing, the rendering can be directly performed on a front-end browser, and the rendering speed is increased by at least one time compared with other current rendering methods; in addition, due to the introduction of the Canvas with the Canvas element, the display screen of the display device can be self-adapted in the drawing process, and data does not need to be requested again, so that the drawing process is simplified.
The present invention also provides a computer readable medium, on which program instructions are stored, and when the program instructions are executed by a processor, the Canvas-based radar map generation method provided by the above-mentioned method embodiments is implemented.
The present invention also provides a computer program product containing instructions that, when executed on a computer, cause the computer to perform the Canvas-based radar map generation method according to the above-described method embodiments.
Please refer to fig. 3, which provides a schematic structural diagram of a terminal according to an embodiment of the present application. As shown in fig. 3, terminal 1000 can include: at least one processor 1001, at least one network interface 1004, a user interface 1003, memory 1005, at least one communication bus 1002.
Wherein a communication bus 1002 is used to enable connective communication between these components.
The user interface 1003 may include a Display screen (Display) and a Camera (Camera), and the optional user interface 1003 may also include a standard wired interface and a wireless interface.
The network interface 1004 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface), among others.
The Memory 1005 may include a Random Access Memory (RAM) or a Read-Only Memory (Read-Only Memory). Optionally, the memory 1005 includes a non-transitory computer-readable medium. The memory 1005 may be used to store an instruction, a program, code, a set of codes, or a set of instructions. The memory 1005 may include a stored program area and a stored data area, wherein the stored program area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playing function, an image playing function, etc.), instructions for implementing the various method embodiments described above, and the like; the storage data area may store data and the like referred to in the above respective method embodiments. The memory 1005 may optionally be at least one memory device located remotely from the processor 1001. As shown in FIG. 3, a memory 1005, which is one type of computer storage medium, may include an operating system, a network communication module, a user interface module, and a Canvas-based radar map generation application.
In the terminal 1000 shown in fig. 3, the user interface 1003 is mainly used as an interface for providing input for a user, and acquiring data input by the user; and the processor 1001 may be configured to invoke the Canvas-based radar map generation application stored in the memory 1005, and specifically perform the following operations:
acquiring a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, wherein the Canvas is the Canvas with Canvas elements;
drawing a Canvas layer on the Canvas to obtain a corresponding drawing result and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing the radar map and/or a second Canvas layer used for drawing a coordinate system;
and displaying a drawing result on a display screen of the display device, wherein the drawing result comprises the generated radar chart and the generated coordinate system.
In one embodiment, when the processor 1001 performs drawing of the Canvas layer on the Canvas to obtain the corresponding drawing result, the following operations are performed:
drawing a radar map on a first Canvas map layer on a Canvas to generate a corresponding radar map; and/or the presence of a gas in the gas,
and drawing a coordinate system on a second Canvas layer on the Canvas to generate a corresponding coordinate system.
In an embodiment, when the processor 1001 draws a radar map on a first Canvas layer executed on a Canvas and generates a corresponding radar map, the following operations are specifically executed:
selecting any point on the canvas, and acquiring the radar value of the point;
acquiring the corresponding position coordinate of each point on the canvas;
calculating a color value corresponding to each point according to a color value calculation model, wherein the color value calculation model is used for calculating the color value corresponding to each point;
and adding the color value corresponding to each point to the corresponding point according to the calculated color value corresponding to each point until each point is added with the corresponding color value, and generating the corresponding radar map.
In one embodiment, before performing the operation of calculating the color value corresponding to each point according to the color value calculation model, the processor 1001 further performs the following operations:
acquiring each radar value in the radar data, each point corresponding to each radar value, the maximum radar value in the radar data and the proportion of the radar value of each point in the maximum radar value;
and establishing a mapping relation among each radar value, each point corresponding to each radar value and the proportion of the radar value of each point in the maximum radar value, and identifying the mapping relation.
In an embodiment, when the processor 1001 draws the coordinate system on the second Canvas layer on the Canvas and generates the corresponding coordinate system, the following operations are specifically performed:
extracting edge position data corresponding to the edge grid points of the canvas from the position data set;
and drawing and generating a corresponding coordinate system according to the edge position data.
In one embodiment, processor 1001, prior to performing acquiring the radar data set used to plot the radar map, further performs the following operations:
and creating a canvas according to the area association information of the area to be drawn, and determining the size of the canvas.
In one embodiment, the processor 1001 further performs the following operations before performing the creation of the canvas according to the area association information of the area to be drawn:
reading the area associated information;
wherein the area association information comprises at least one of:
the information of the area shape of the area to be drawn, the size information of each edge of the area to be drawn, and the information of the connection node between each edge.
In the embodiment of the application, a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas are obtained, wherein the Canvas is the Canvas with Canvas elements; drawing a Canvas layer on the Canvas to obtain a corresponding drawing result and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing the radar map and/or a second Canvas layer used for drawing a coordinate system; and displaying a drawing result on a display screen of the display device, wherein the drawing result comprises the generated radar chart and the generated coordinate system. According to the radar map generation method, the Canvas with Canvas elements is introduced, the radar map can be drawn on the Canvas layer of the Canvas, and the coordinate system can also be drawn, so that the Canvas is introduced for drawing, the rendering can be directly performed on a front-end browser, and the rendering speed is at least doubled compared with that of other current rendering methods; in addition, due to the introduction of the Canvas with the Canvas element, the display screen of the display device can be self-adapted in the drawing process, and data does not need to be requested again, so that the drawing process is simplified. It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a read-only memory or a random access memory.
The above disclosure is only for the purpose of illustrating the preferred embodiments of the present application and is not to be construed as limiting the scope of the present application, so that the present application is not limited thereto, and all equivalent variations and modifications can be made to the present application.
Claims (8)
1. A Canvas-based radar map generation method, the method comprising:
acquiring a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, wherein the Canvas is the Canvas with Canvas elements;
drawing a Canvas layer on the Canvas to obtain a corresponding drawing result, and outputting the drawing result, wherein the Canvas layer comprises a first Canvas layer used for drawing a radar map and a second Canvas layer used for drawing a coordinate system;
the drawing a Canvas layer on the Canvas to obtain a corresponding drawing result comprises the following steps:
drawing the radar graph on the first Canvas layer on the Canvas to generate a corresponding radar graph;
the drawing the radar graph on the first Canvas layer on the Canvas, and the generating the corresponding radar graph comprises:
selecting any point on the canvas, and acquiring the radar value of the point;
acquiring the corresponding position coordinate of each point on the canvas;
calculating a color value corresponding to each point according to a color value calculation model, wherein the color value calculation model is used for calculating the color value corresponding to each point; the color value calculation model determines the position of any point on a color ribbon configured in advance according to the proportion of the radar value of the point to the maximum radar value on the canvas, determines a color interval of the point on the color ribbon according to the position, and gives a unique color value to the point, wherein the color value is matched with the proportion of the radar value of the point to the maximum radar value, and specifically, the position of the point on the color ribbon is determined according to the proportion of the radar value of the point to the maximum radar value;
adding the color value corresponding to each point to the corresponding point according to the calculated color value corresponding to each point until each point is added with the corresponding color value, and generating a corresponding radar map;
and
drawing the coordinate system on the second Canvas layer on the Canvas, and generating a corresponding coordinate system, wherein the coordinate system comprises an X-axis coordinate representing time and a Y-axis coordinate representing the height of an observation point;
and displaying the drawing result on a display screen of a display device, wherein the drawing result comprises the generated radar chart and the generated coordinate system.
2. The method of claim 1, wherein prior to said computing color values for each point according to a color value computation model, the method further comprises:
acquiring each radar value in the radar data, each point corresponding to each radar value, a maximum radar value in the radar data and a proportion of the radar value of each point to the maximum radar value;
and establishing a mapping relation among each radar value, each point corresponding to each radar value and the proportion of the radar value of each point in the maximum radar value, and identifying the mapping relation.
3. The method of claim 1, wherein the drawing the coordinate system on the second Canvas layer on the Canvas, and wherein generating the corresponding coordinate system comprises:
extracting edge position data corresponding to the edge mesh points of the canvas from the position data set;
and drawing and generating a corresponding coordinate system according to the edge position data.
4. The method of claim 1, wherein prior to said obtaining a set of radar data for mapping a radar map, the method further comprises:
and creating the canvas according to the area association information of the area to be drawn, and determining the size of the canvas.
5. The method according to claim 4, wherein before the creating the canvas according to the area association information of the area to be drawn, the method further comprises:
reading the area associated information;
wherein the area association information comprises at least one of:
the method comprises the following steps of obtaining area shape information of an area to be drawn, size information of each side of the area to be drawn and connection node information among the sides.
6. A Canvas-based radar map generating apparatus, comprising:
the acquisition module is used for acquiring a radar data set used for drawing a radar map and a position data set of each grid point of a Canvas, wherein the Canvas is a Canvas with Canvas elements;
the Canvas layer comprises a first Canvas layer used for drawing the radar map and a second Canvas layer used for drawing a coordinate system;
the drawing module is specifically configured to:
drawing the radar graph on the first Canvas layer on the Canvas to generate a corresponding radar graph;
the drawing module is specifically configured to:
selecting any point on the canvas, and acquiring the radar value of the point;
acquiring the corresponding position coordinate of each point on the canvas;
calculating a color value corresponding to each point according to a color value calculation model, wherein the color value calculation model is used for calculating the color value corresponding to each point; the color value calculation model determines the position of any point on a color ribbon configured in advance according to the proportion of the radar value of the point to the maximum radar value on the canvas, determines a color interval of the point on the color ribbon according to the position, and gives a unique color value to the point, wherein the color value is matched with the proportion of the radar value of the point to the maximum radar value, and specifically, the position of the point on the color ribbon is determined according to the proportion of the radar value of the point to the maximum radar value;
adding the color value corresponding to each point to the corresponding point according to the calculated color value corresponding to each point until each point is added with the corresponding color value, and generating a corresponding radar map;
and
drawing the coordinate system on the second Canvas layer on the Canvas, and generating a corresponding coordinate system, wherein the coordinate system comprises an X-axis coordinate representing time and a Y-axis coordinate representing the height of an observation point;
the output module outputs the drawing result drawn by the drawing module;
and the display module is used for displaying the drawing result output by the output module on a display screen of display equipment, and the drawing result comprises the generated radar map and the generated coordinate system.
7. A computer storage medium, characterized in that it stores a plurality of instructions adapted to be loaded by a processor and to carry out the method steps according to any one of claims 1 to 5.
8. A terminal, comprising: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the method steps of any of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010774057.2A CN112102437B (en) | 2020-08-04 | 2020-08-04 | Canvas-based radar map generation method and device, storage medium and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010774057.2A CN112102437B (en) | 2020-08-04 | 2020-08-04 | Canvas-based radar map generation method and device, storage medium and terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112102437A CN112102437A (en) | 2020-12-18 |
| CN112102437B true CN112102437B (en) | 2021-09-03 |
Family
ID=73750342
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010774057.2A Active CN112102437B (en) | 2020-08-04 | 2020-08-04 | Canvas-based radar map generation method and device, storage medium and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112102437B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112837277A (en) * | 2021-01-22 | 2021-05-25 | 安徽省交通控股集团有限公司 | Rendering method, storage medium and electronic device of rolling pass process based on geographic data |
| CN113112573B (en) * | 2021-04-14 | 2024-05-14 | 多点(深圳)数字科技有限公司 | Picture generation method and device based on markup language and electronic equipment |
| CN113658293B (en) * | 2021-07-29 | 2023-07-21 | 北京奇艺世纪科技有限公司 | Picture drawing method and device, electronic equipment and storage medium |
| CN114397624B (en) * | 2022-03-22 | 2022-07-15 | 北京蓝天航空科技股份有限公司 | Data configuration-based compatible radar self-inspection picture generation method and device |
| CN114491351B (en) * | 2022-04-18 | 2022-08-23 | 北京航空航天大学杭州创新研究院 | Lattice point data visualization method and system adaptable to WebGIS platform |
| CN114648603B (en) * | 2022-05-19 | 2022-08-05 | 杭州比智科技有限公司 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
| CN115965752B (en) * | 2022-12-19 | 2023-09-01 | 中科三清科技有限公司 | Method and device for generating environment data distribution map, storage medium and electronic equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2013149276A (en) * | 2013-04-17 | 2013-08-01 | Dna:Kk | Html file causing browser accommodating to canvas element-usable object in html to perform process for displaying designated image by converting color thereof by designated characteristic, method for file conversion, and file conversion program |
| CN108376176A (en) * | 2018-03-14 | 2018-08-07 | 深圳日彤大数据有限公司 | It can towed big data visualization analysis tools system |
| CN108776952A (en) * | 2018-05-24 | 2018-11-09 | 天津大学 | Sea chart coordinate conversion method for hydrological meteorological monitoring |
| CN111123408A (en) * | 2019-11-26 | 2020-05-08 | 深圳震有科技股份有限公司 | Method, system and storage medium for predicting precipitation distribution based on GIS |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10453233B2 (en) * | 2016-12-22 | 2019-10-22 | American Express Travel Related Services Company, Inc. | Systems and methods for a digital map and canvas layer |
| CN107655578A (en) * | 2017-09-01 | 2018-02-02 | 郑州云海信息技术有限公司 | A kind of temperature record methods of exhibiting, device and terminal |
| CN108652625B (en) * | 2018-02-05 | 2021-07-16 | 苏州朗润医疗系统有限公司 | Image identification method and system for guaranteeing magnetic resonance scanning safety |
| CN109613540A (en) * | 2018-12-25 | 2019-04-12 | 江苏省气象信息中心(江苏省气象档案馆) | A kind of Doppler radar three-dimensional visualization method based on WebGL |
| CN109783102B (en) * | 2019-01-18 | 2022-04-12 | 北京城市网邻信息技术有限公司 | Method, device, equipment and storage medium for generating Canvas in applet |
-
2020
- 2020-08-04 CN CN202010774057.2A patent/CN112102437B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2013149276A (en) * | 2013-04-17 | 2013-08-01 | Dna:Kk | Html file causing browser accommodating to canvas element-usable object in html to perform process for displaying designated image by converting color thereof by designated characteristic, method for file conversion, and file conversion program |
| CN108376176A (en) * | 2018-03-14 | 2018-08-07 | 深圳日彤大数据有限公司 | It can towed big data visualization analysis tools system |
| CN108776952A (en) * | 2018-05-24 | 2018-11-09 | 天津大学 | Sea chart coordinate conversion method for hydrological meteorological monitoring |
| CN111123408A (en) * | 2019-11-26 | 2020-05-08 | 深圳震有科技股份有限公司 | Method, system and storage medium for predicting precipitation distribution based on GIS |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112102437A (en) | 2020-12-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112102437B (en) | Canvas-based radar map generation method and device, storage medium and terminal | |
| CN106021421B (en) | method and device for accelerating webpage rendering | |
| CN111259037B (en) | Data query method and device based on rule configuration, storage medium and terminal | |
| CN112188275B (en) | Bullet screen generation method, bullet screen generation device, bullet screen generation equipment and storage medium | |
| CN110750664B (en) | Picture display method and device | |
| CN111240669B (en) | Interface generation method and device, electronic equipment and computer storage medium | |
| CN111796826B (en) | Bullet screen drawing method, device, equipment and storage medium | |
| CN110874172B (en) | Method, device, medium and electronic equipment for amplifying APP interface | |
| CN115439609B (en) | Three-dimensional model rendering method, system, equipment and medium based on map service | |
| EP4343706A1 (en) | Data processing method and apparatus, and electronic device and storage medium | |
| CN111427576B (en) | Method, device, storage medium and terminal for configuring application program interface | |
| CN111796825B (en) | Bullet screen drawing method, bullet screen drawing device, bullet screen drawing equipment and storage medium | |
| CN111476858B (en) | WebGL-based 2d engine rendering method, device and equipment | |
| US20230290095A1 (en) | User-interface-framework based processing method, apparatus, device, and medium | |
| JP5563545B2 (en) | Information processing apparatus and method | |
| US20240126568A1 (en) | Method, apparatus, device, computer readable storage medium and product for pattern rendering | |
| CN115328429A (en) | Display method, display device, electronic apparatus, and storage medium | |
| CN115471592A (en) | Dynamic image processing method and system | |
| CN114022601A (en) | Volume element rendering method, device and equipment | |
| CN115330925A (en) | Image rendering method and device, electronic equipment and storage medium | |
| CN111068314B (en) | NGUI resource rendering processing method and device based on Unity | |
| CN114712853A (en) | Game map loading and displaying method, device, equipment and storage medium | |
| CN114363597A (en) | Character projection method, device, robot and storage medium | |
| CN113506356A (en) | Drawing method and device of area map, readable medium and electronic equipment | |
| CN111200705B (en) | Image processing method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| EE01 | Entry into force of recordation of patent licensing contract | ||
| EE01 | Entry into force of recordation of patent licensing contract |
Application publication date: 20201218 Assignee: Beijing Zhongke Sanqing Environmental Technology Co.,Ltd. Assignor: 3CLEAR TECHNOLOGY Co.,Ltd. Contract record no.: X2022980012305 Denomination of invention: A method, device, storage medium and terminal for generating radar map based on Canvas Granted publication date: 20210903 License type: Common License Record date: 20220815 |