A method and system for introducing a heat map in Cesium

Abstract

The present invention discloses a method and system for introducing a heat map in Cesium, which relates to Cesium heat map rendering technology. This solution is proposed to solve the problem of excessive dotting and easy jamming in the prior art. Heat map rendering is performed through the following steps: each heat map point data is mapped to a circle; a linear dimension is selected to represent the strength of the data, the color is gradually changed with the linear dimension and the circle is filled, and the circle is superimposed to perform color mapping with an intensity spectrum, and the image source data is exported; the image source data material attributes are added to the entity object passed to Cesium to complete the heat map rendering; a heat map rendering effect is generated on the three-dimensional earth. The advantages are: using virtual DOM nodes to improve rendering efficiency and rendering effects, allocating running memory in the most reasonable way, and being suitable for scene rendering of city-level data. Using the internal image material attribute interface of ceiusm, rendering efficiency and performance problems are solved to avoid jamming. Off-screen rendering function is also implemented.

Description

Technical Field

[0001] The present invention relates to Cesium technology, and in particular to a method and system for introducing a thermal map into Cesium. Background Art

[0002] Cesium is a web 3D Earth software platform.

[0003] The internet is developing at an ever-increasing pace, and the number of internet users is rapidly increasing. The demand for digital smart cities is also growing, leading to a higher level of value for government websites. This requires not only a good 3D globe display of urban scenes but also visual analysis charts. Among existing chart-based visualizations, heat maps are a relatively intuitive method. However, web development lacks a heat map function independently developed based on Cesium 3D Earth. Simulation can only be achieved through dot-based simulation and local image projection. Excessive dot placement can affect web page rendering performance, often leading to lags. Fixed images also fail to provide real-time heat map data. Summary of the Invention

[0004] The purpose of the present invention is to provide a method and system for introducing a thermal map into Cesium to solve the problems existing in the above-mentioned prior art.

[0005] The present invention provides a system for introducing a heat map into Cesium, which performs heat map rendering by the following steps:

[0006] S1. Map each heat map point data into a circle. Specifically, obtain the array of heat map point data, then calculate the maximum and minimum values of longitude and latitude to draw a rectangle, and draw the corresponding number of circle virtual DOM nodes in the rectangle. Use JavaScript native canvas 2D to draw the corresponding number of circle virtual DOM nodes in the rectangle. At the same time, a linear gradient canvas object is generated by default based on the input value of the gradient gradient color, and the corresponding pixel value is obtained and assigned to the canvas object. After completing the color mapping and gradient, the independent point object of the heat map is successfully constructed.

[0007] S2. Select a linear dimension to represent data strength, gradient the color along this linear dimension, fill the circle, overlay the circle with the intensity spectrum for color mapping, and export the image source data.

[0008] S3. Add image source data material attributes to the entity object passed to Cesium to complete the heat map rendering;

[0009] S4. Generate a heat map rendering effect on the three-dimensional earth.

[0010] Before mapping in step S1, the thermal map point data of the instance is initialized, including: the size radius, maximum transparency, minimum transparency, minimum heat value, maximum heat value, fuzzy range and gradient color of the thermal map point.

[0011] Heat map rendering based on JavaScript native canvas and WebGL shader.

[0012] When mapping, first convert the wgs84 coordinate system of the heat map points to the Mercator projection.

[0013] The image of each heat map point is pre-drawn and saved in a Canvas canvas that is not in the virtual DOM node. It is drawn to the required heat map canvas when re-rendering.

[0014] The linear dimension is transparency.

[0015] If the heat map background is enabled, the generated heat map will be converted into base64-encoded image data, and a rectangle will be drawn on the main canvas of the page according to the boundary value. The interface provided by the native canvas will display the first drawn shape on top of the second drawn shape, and the intersection will be filled with the first drawn shape, finally forming a heat map with the background color superimposed.

[0016] The step S2 specifically includes: generating a linear gradient canvas object by default according to the input value of the gradient color and obtaining the corresponding pixel value and assigning it to the canvas object, completing color mapping and gradient, and then exporting the image source data.

[0017] The step S3 is specifically as follows: after the drawing is successful, the canvas is converted into a source data URL, and then the layer image material interface ImageMaterialProperty of Cesium is used to pass the heat map canvas as a parameter.

[0018] The present invention provides a method for introducing a thermal map into Cesium, and utilizes the system to introduce the thermal map into Cesium.

[0019] The method and system for introducing a heat map into Cesium described in the present invention have the following advantages:

[0020] 1) Using virtual DOM nodes improves web page performance and memory usage compared to existing technologies that directly operate multiple canvas DOM objects. Subsequent node updates and deletions can be performed manually without the need for manual operations, greatly improving rendering efficiency and rendering effects. It allocates running memory in the most reasonable way, making it suitable for scene rendering of city-level data.

[0021] 2) Using the ceiusm internal image material property interface, compared to the existing technique of directly adding several points to the page to simulate heat maps, effectively solves rendering efficiency and performance issues, thus avoiding lag. Dynamically adding a background color source image to the existing graphic by passing parameters, compared to the traditional method of using inline styles on the canvas element to change the background color, effectively reduces the page redraw process and improves the background color rendering effect.

[0022] 3) Implemented off-screen rendering, eliminating the need to repeatedly create gradients, set global alpha, draw, and fill colors when updating coordinates. This reduces page performance and memory usage, and improves rendering speed in scenes with particularly large amounts of data. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 Schematic diagram of the thermal map rendering process of the system of the present invention.

[0024] Figure 2 The present invention is a schematic diagram of a three-dimensional earth scene for generating a population heat map near Qingdao City using the system of the present invention.

[0025] Figure 3 The present invention is a schematic diagram of a three-dimensional earth scene for generating a population heat map near Hangzhou City using the system of the present invention. DETAILED DESCRIPTION

[0026] The method of introducing a thermal map into Cesium described in the present invention is implemented by the following system.

[0027] The system for introducing heat maps in Cesium described in the present invention is divided into a data storage warehouse, a heat map renderer, and a tool function according to the functional structure. Each module is developed in accordance with high cohesion and low coupling. In the data storage warehouse, externally exposed prototype chain methods such as adding data, setting data, deleting data, and obtaining data interface APIs are provided, which can be used for unified management and control of local scopes. In the heat map renderer, the externally exposed prototype chain methods include local data update, global update, update configuration items, converting canvas to base64 parameter values, obtaining point data, etc., and are also responsible for color mapping and pixel coloring functions. The tool function is responsible for the attribute fusion between internal objects, and is used for parameter passing and default value merging and attribute merging. Based on JavaScript native canvas and WebGL shader technology, it relies on Cesium.js in terms of reference packages.

[0028] The working process is as follows:

[0029] First, instantiate the heat map and pass in all the point information, such as Figure 1 shown.

[0030] The WGS84 coordinate system is then converted to Mercator to determine the boundary values. The coordinate system used for the heat map point information is the international coordinate system, so it is necessary to first perform an internal coordinate system conversion to a Mercator projection for boundary value determination to facilitate the boundary value positioning of the heat map rectangle later. JavaScript native canvas 2D is used inside the rectangle to draw the corresponding number of dot virtual DOM nodes in the array. At the same time, a linear gradient canvas object is generated by default based on the incoming gradient color value and the corresponding pixel value is obtained and assigned to the canvas object. The color mapping and gradient are completed to successfully construct an independent point object of the heat map. In order to optimize the canvas rendering performance problem, we used the OffscreenCanvas method to move the canvas out of the screen to decouple the DOM and canvas API interfaces. This has improved the canvas rendering speed. Performance optimization is particularly important when the amount of city-level data is particularly large.

[0031] Build the heat map internally: The renderer is initialized within the heat map core code, and then a virtual DOM node is created to obtain the pixel values of the radial gradient and the color mapping pixel values.

[0032] Draw the radial gradient of each heat map point: In the heat map method, each data point is presented as a circle filled with radial gradient color, and this gradient circle shows the radiation effect of the data from strong to weak. The so-called radial gradient is the gradual change from the center of the circle as the radius increases. To create a radial gradient color through the internal method of the heat map, it is necessary to define two circles. The color is gradient in the area between the two circles. Therefore, the centers of both circles are set at the coordinate points of the data, and the radius of the first circle is 0, and the radius of the second circle is the same as the radius of the circle to be drawn. Then define the rules for the color gradient between the two circles. The effect to be achieved is that the value of the color in a certain dimension gradually decreases from the center as the radius increases. On the other hand, the value of the dimension is positively correlated with the size of the heat map point data, otherwise the graphics drawn for all data points will be exactly the same. Therefore, transparency is chosen as the dimension of change because a global transparency can be set, which is positively correlated with the size of the heat map point data. In this way, rgba(r,g,b,1) and rgba(r,g,b,0) can be uniformly used as the color of the center point and radius edge to draw a gradient circle and obtain the corresponding pixel value.

[0033] Draw the color mapping of the heat map points: Now that we have a gradient circle for the heat map, we need to apply a gradient color to it. A discrete mapping function will be created internally to set the color value, and then the corresponding color mapping pixel value will be obtained through a method. Finally, the canvas is filled with the corresponding pixel values of the gradient circle and the color mapping pixel values, and the range of the rectangle is set to the boundary value of the dimension, finally obtaining the complete heat map node. If the heat map background is enabled, the generated heat map will be converted into base64-encoded image data through canvas.toDataURL("image / png"), and a rectangle will be drawn on the main canvas of the page according to the boundary value. The interface context.globalCompositeOperation="destination-over" provided by the native canvas will display the first-drawn shape on top of the second-drawn shape. The intersecting part will be covered by the fill of the first-drawn shape, finally forming a heat map with the background color superimposed. The fill includes color, gradient, and texture.

[0034] Add off-screen rendering: Considering that the coordinate values of data points will change as the map moves on the map, the corresponding circular images are actually unchanged. Therefore, in order to avoid repeatedly creating gradient colors, setting global transparency, drawing and filling colors when updating coordinates, the image of each data point can be pre-drawn, saved through a Canvas that is not in the virtual DOM, and drawn to the canvas when re-rendering, thereby saving the performance consumption and memory usage of the page. Since the browser is single-threaded, the calculation and rendering of the canvas are in one thread. Therefore, in order to avoid repeatedly creating gradient colors, setting global transparency, drawing and filling colors when updating coordinates, which may cause the web page to freeze, the above-mentioned off-screen rendering process has improved the rendering speed in scenarios with particularly large amounts of data.

[0035] The thermal map layer is converted into material properties through the Cesium image material attribute interface, and then the material is mapped by creating a geometric entity, so that the Cesium 3D earth and GIS layer can be combined. Finally, after the combination is completed, the rendered thermal map layer can be seen on the map.

[0036] The implementation effect of the system of the present invention is as follows: Figure 2 、 Figure 3 As shown: After the operation of the present invention, a three-dimensional earth scene of the population heat map near Qingdao and Hangzhou is realized.

[0037] Those skilled in the art can make various other corresponding changes and deformations based on the technical solutions and concepts described above, and all of these changes and deformations should fall within the scope of protection of the claims of the present invention.

Claims

1. A system for introducing heat maps in Cesium, characterized in that Perform heatmap rendering by following these steps: S1. Map each heat map point data into a circle. Specifically, obtain the array of heat map point data, then calculate the maximum and minimum values of longitude and latitude to draw a rectangle, and draw the corresponding number of circle virtual DOM nodes in the rectangle. Use JavaScript native canvas 2D to draw the corresponding number of circle virtual DOM nodes in the rectangle. At the same time, a linear gradient canvas object is generated by default based on the input value of the gradient gradient color, and the corresponding pixel value is obtained and assigned to the canvas object. After completing the color mapping and gradient, the independent point object of the heat map is successfully constructed. S2. Select a linear dimension to represent data strength, gradient the color along this linear dimension, fill the circle, overlay the circle with the intensity spectrum for color mapping, and export the image source data. S3. Add image source data material attributes to the entity object passed to Cesium to complete the heat map rendering; S4. generating a heat map rendering effect on the three-dimensional earth; If the heat map background is enabled, the generated heat map will be converted into base64-encoded image data, and a rectangle will be drawn on the main canvas according to the boundary value. The interface provided by the native canvas will display the first drawn shape on top of the second drawn shape, and the intersection will be filled with the first drawn shape, finally forming a heat map with the background color superimposed. The step S2 specifically comprises: generating a linear gradient canvas object by default according to the input value of the gradient color and obtaining the corresponding pixel value and assigning it to the canvas object, completing the color mapping and gradient, and then exporting the image source data; The step S3 is specifically as follows: after the drawing is successful, the canvas is converted into a source data URL, and then the layer image material interface ImageMaterialProperty of Cesium is used to pass the heat map canvas as a parameter.

2. A system for introducing a thermal map into Cesium according to claim 1, characterized in that: Before mapping in step S1, the thermal map point data of the instance is initialized, including: the size radius, maximum transparency, minimum transparency, minimum heat value, maximum heat value, fuzzy range and gradient color of the thermal map point.

3. A system for introducing a thermal map into Cesium according to claim 1, characterized in that: Heat map rendering based on JavaScript native canvas and WebGL shader.

4. A system for introducing a thermal map into Cesium according to claim 1, characterized in that: When mapping, first convert the wgs84 coordinate system of the heat map points to the Mercator projection.

5. A system for introducing a thermal map into Cesium according to claim 1, characterized in that: The image of each heat map point is pre-drawn and saved in a Canvas canvas that is not in the virtual DOM node. It is drawn to the required heat map canvas when re-rendering.

6. A system for introducing a thermal map into Cesium according to claim 1, characterized in that: The linear dimension is transparency.

7. A method for introducing a heat map in Cesium, characterized in that: The thermal map is introduced into Cesium using the system as described in any one of claims 1-6.

Images