A color gradient 3D geographic polygon rendering method and its application

Abstract

The present invention discloses a color gradient three-dimensional geographic polygon rendering method and application, which relates to the field of three-dimensional geographic rendering, prepares polygon coordinate data, and the polygon coordinate data is stored in the geometry object in the feature; loads polygon data and renders, realizes the drawing of the area with the help of Canvas canvas technology, and converts the geographic longitude and latitude coordinates into browser screen coordinates with the help of geographic information open source library Leaflet, OpenLayers, Mapbox‑gl or Cesium; with the help of webGL's efficient rendering performance, with the help of big data visualization front-end library deck.gl, the basic class MapboxLayer is extended on it, and a three-dimensional map is rendered on the browser. Compared with the traditional plane form display, the three-dimensional rendering method of the present invention can render the plane map into a three-dimensional polygon with color gradient, thereby improving the display effect.

Description

Technical Field

[0001] The present invention relates to the field of three-dimensional geographic rendering, and in particular to a color gradient three-dimensional geographic polygon rendering method and application. Background Art

[0002] Data visualization is one of the hot topics in the current IT field. As more and more data is stored in computer databases, data visualization technology has emerged to help people better understand data. Since the human brain receives image information much faster than abstract data, this technology has been widely welcomed and loved since its birth.

[0003] Data screens are products that display large amounts of data in a visual way. They are often used in conferences and exhibitions, business monitoring, risk warning, geographic information analysis, and other business scenarios. Administrative division maps, as an important scenario of geographic information, are commonly found in various large screen systems. Currently, administrative division maps on large screen systems are usually flat maps, such as the attached Figure 1 If it can be expressed as a three-dimensional image, the effect will be more vivid and grand. Electronic maps are commonly seen on large screens. Maps are composed of three elements: points, lines and surfaces. Buildings, as a surface element, occupy a large proportion in electronic maps.

[0004] Traditional technologies are mostly displayed in a flat form, lacking three-dimensional polygons that can be rendered into color gradients, and the rendering effect is poor. Summary of the invention

[0005] The purpose of the present invention is to provide a color gradient three-dimensional geographic polygon rendering method and application to solve the technical problem of poor traditional plane display effect proposed in the above background technology.

[0006] To achieve the above object, the present invention provides the following technical solutions:

[0007] A color gradient 3D geographic polygon rendering method comprises the following steps:

[0008] S1. Prepare the coordinate data of the polygon, which is stored in the geometry object in the feature;

[0009] S2. Load polygon data and render it, use Canvas technology to draw the area, and use the open source geographic information library Leaflet, OpenLayers, Mapbox-gl or Cesium to convert geographic longitude and latitude coordinates into browser screen coordinates;

[0010] S3, with the help of webGL's efficient rendering performance and the big data visualization front-end library deck.gl, the basic class MapboxLayer is extended on it to render a three-dimensional map on the browser;

[0011] S3.1. The process of extending MapboxLayer is as follows: start by extending MapboxLayer, design the constructor, import administrative district boundary data, pass in the extensions field extender, rewrite the status update function, rewrite the getSubLayerProps function, and end by extending the MapboxLayer class;

[0012] S3.2, the method of combining ExtendPolygonLayer class with deck.gl and mapbox.gl is as follows: use React front-end library, introduce MapGL component from react-map-gl library as parent component, react-map-gl library is a wrapper of mapbox.gl, which can be regarded as mapbox.gl, introduce DeckGL component from deck.gl as subcomponent of MapGL, and finally pass ExtendPolygonLayer class as sublayer to DeckGL component;

[0013] S3.3. The extender design process involved in the ExtendPolygonLayer class constructor is as follows: start of extender design, injection of fixed-point shader declaration, injection of fragment shader declaration, rewriting of color drawing function, and end of extender design.

[0014] Preferably, the extender is a class inherited from LayerExtension introduced from the deck.gl library, the class method of which is getShaders, and the shader is redefined as required, the code of the custom shader is written into the inject attribute of the objectA object in the form of key-value, and four attribute values ​​are set for the inject object, namely "vs:#decl", "vs:#main-end", "fs:#decl" and "fs:DECKGL_FILTER_COLOR", the "vs:#decl" attribute value is used to declare the vertices of the polygon and declare a vec2 type variable vp; the "vs:#main-end" attribute value sets the deck.gl library PolygonL The vertexPositions attribute value of the ayer class is assigned to the vp variable; the value of "fs:#decl" is a code string, which declares a vec2 variable to receive the vp variable passed in by the vertex shader, declares a float type u_time variable to receive the timestamp variable, and defines a function Effect that receives speed, UV coordinates, and timestamp. The function of this function is to return a vec3 type color value based on the values ​​of the three parameters after several steps of trigonometric function changes; the function of the "fs:DECKGL_FILTER_COLOR" attribute value is to reset the color value. The processing method is to keep the RGB value of the color value unchanged and only modify the transparency value, which is multiplied by a coefficient pow(vp.y,2.0).

[0015] An application of a color gradient three-dimensional geographic polygon rendering method, the rendering method is applied to a large screen to achieve three-dimensional administrative divisions, which is more vivid than traditional large screens. The administrative districts on the large screen have a special hover effect. When the mouse moves to a certain administrative district, the height of the administrative district increases appropriately. When the mouse is removed, the original height is restored.

[0016] The invention discloses an application of a color gradient three-dimensional geographic polygon rendering method, wherein the rendering method is applied to a building to realize a three-dimensional building.

[0017] Compared with the prior art, the present invention has the following beneficial effects:

[0018] 1. Compared with the traditional plane display, the three-dimensional rendering method of the present invention can render the plane map into a three-dimensional polygon with different colors, thereby improving the display effect;

[0019] 2. The present invention is applied to large-screen displays, and can make local areas protrude according to the mouse pointing, which is more vivid than traditional large-screen displays;

[0020] 3. The present invention is applied to buildings and can display three-dimensional building models, making the display more intuitive. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 To invent a flow chart for importing polygon coordinate data;

[0022] Figure 2 It is a three-dimensional rendering flow chart of the present invention;

[0023] Figure 3 Design flow chart for the expander of the present invention;

[0024] Figure 4 It is the overall flow chart of the present invention;

[0025] Figure 5-7 It is a traditional two-dimensional plan;

[0026] Figure 8-9 It is a three-dimensional rendering of the administrative district; DETAILED DESCRIPTION

[0027] Example

[0028] like Figure 1-4 As shown, a color gradient three-dimensional geographic polygon rendering method includes the following steps: preparing polygon coordinate data, loading polygon data, and rendering three-dimensional graphics;

[0029] Prepare polygon coordinate data: Here we take the geoJSon data of administrative divisions as an example. Administrative divisions are composed of multiple polygons. The coordinate data of polygons is stored in the geometry object in the feature. A single administrative division may contain multiple polygons. The format is as follows:

[0030]

[0031]

[0032] Load polygon data and render: Rendering means displaying it in mainstream web browsers, such as Chrome, FireFox, and Internet Explorer. Since all mainstream browsers on the market support Canvas tags, the drawing of administrative districts can be achieved with the help of Canvas technology. Because the coordinates in the administrative division data are geographic longitude and latitude, it is necessary to convert the geographic longitude and latitude coordinates into browser screen coordinates. This can be easily achieved with the help of the geographic information open source library Leaflet, OpenLayers, Mapbox-gl, or Cesium. Taking Mapbox-gl as an example, the implementation flowchart is as follows: Figure 1As shown, loading polygon coordinate data includes the following steps: map initialization, layer initialization, adding layers to the map, and map completion. During the layer initialization process, GEOJSON data is imported to form a traditional two-dimensional plane map.

[0033] The three-dimensional administrative district rendering is achieved as follows: Since the mainstream browsers on the market, such as Chrome, have already supported webGL, with the help of webGL's efficient rendering performance, it is possible to render the three-dimensional administrative district on the web browser; in order to reduce the workload and avoid starting from scratch, an open source big data visualization front-end library deck.gl is used here to extend the basic class MapboxLayer to achieve the rendering of the three-dimensional administrative district; Figure 2 As shown, the implementation process is as follows: start by extending the MapboxLayer class, design the constructor, import administrative district boundary data, pass in the extensions field extender, rewrite the status update function, rewrite the getSubLayerProps function, and end by extending the MapboxLayer class;

[0034] The detailed steps to extend the MapboxLayer class are as follows: The Deck.gl library has multiple classes such as GeoJsonLayer and PolygonLayer, which can draw polygons, but cannot draw complex three-dimensional polygons such as color gradients. However, there is an entry point. By extending the PolygonLayer class and redefining the logic of shaders, more complex functions can be implemented. Here, an ExtendPolygonLayer class is defined, which inherits from the deck.gl library PolygonLayer class. The ExtendPolygonLayer class contains three functions: the constructor constructor(), the state update function updateState(), and the function getSubLayerProps() to get the sublayer property value. In addition to receiving external parameters, the most important part of the constructor is to assign the extensions property, whose value is an extender object; the purpose of the state update function is to assign the external timestamp u_time value to each sublayer model of the current class. The purpose of the function to get the sublayer property value is to return the timestamp property of the current layer. At this point, a new polygon class is born, which can receive vertex coordinate data and combine with deck.gl and mapbox.gl to finally render complex three-dimensional color gradient polygons.

[0035] The method of combining the ExtendPolygonLayer class with deck.gl and mapbox.gl is explained in detail as follows: Since both deck.gl and mapbox.gl are rendered with the help of webgl, there is a possibility of fusion. Here, the most popular React front-end library practice is adopted. The MapGL component is introduced from the react-map-gl library as the parent component. The react-map-gl library is an encapsulation of mapbox.gl and can be regarded as mapbox.gl. The DeckGL component is introduced from deck.gl as a child component of MapGL. Finally, the ExtendPolygonLayer class is passed into the DeckGL component as a sublayer, so that the three can be combined.

[0036] The process of implementing the extender involved in the ExtendPolygonLayer class constructor is as follows Figure 3 As shown: including the start of extender design, injection of fixed-point shader declaration, injection of vertex shader, assignment of varying variables, injection of fragment shader declaration, rewriting of color drawing function, and the end of extender design.

[0037] The extender is a class that inherits from LayerExtension introduced from the deck.gl library. The most important method of this class is getShaders, which is used to redefine the shader as required. The core part of the getShaders method is to return an object, denoted as objectA, which has a very important attribute inject. The return value objectA object will eventually be called when the deck.gl library renders. Therefore, the code of the custom shader is written into the inject attribute of the objectA object in the form of key-value. The inject attribute of objectA is also an object. Four attribute values ​​are set for the inject object according to the requirements, namely "vs:#decl", "vs:#main-end", "fs:#decl" and "fs:DECKGL_FILTER_COLOR", which means injecting code into the vertex shader declaration, injecting code into the end of the vertex shader main function, injecting declaration code into the fragment shader and injecting color redefinition code into the fragment shader. The values ​​of the four attributes of the Inject object are all a code string. The attribute value of "vs:#decl" is used to declare the vertices of the polygon and declare a vec2 type variable vp; the attribute value of "vs:#main-end" assigns the value of the attribute vertexPositions of the PolygonLayer class of the deck.gl library to the vp variable; the attribute value of "fs:#decl" is the most important one. Its value is a code string, declaring a vec2 variable to receive the vp variable passed in by the vertex shader, declaring a float type u_time variable to receive the timestamp variable, and defining a function Effect that receives speed, UV coordinates, and timestamp. The function of this function is to return a vec3 type color value after several steps of trigonometric function changes based on the values ​​of the three parameters; the attribute value of "fs:DECKGL_FILTER_COLOR" is used to reset the color value. The processing method is to keep the rgb value of the color value unchanged and only modify the transparency value. The transparency value is multiplied by a coefficient pow(vp.y,2.0). The administrative district map after three-dimensional rendering is more intuitive and has a better display effect.

[0038] Example 2

[0039] On the basis of Example 1, the rendering method is used in large-screen display according to the method, which can realize three-dimensional administrative divisions and special hover effects of administrative districts on the large screen. When the mouse moves to a certain administrative district, the height of the administrative district increases appropriately, and when the mouse is removed, the original height is restored.

[0040] Example 3

[0041] Based on the first embodiment, the rendering method is applied to the building to display the three-dimensional building.

Claims

1. A method for rendering three-dimensional geographic polygons with color gradient, characterized in that: The steps include: S1. Prepare the coordinate data of the polygon, which is stored in the geometry object in the feature; S2. Load polygon data and render it, use Canvas technology to draw the area, and use the open source geographic information library Leaflet, OpenLayers, Mapbox-gl or Cesium to convert geographic longitude and latitude coordinates into browser screen coordinates; S3, with the help of webGL's efficient rendering performance and the big data visualization front-end library deck.gl, the basic class MapboxLayer is extended on it to render a three-dimensional map on the browser; S3.

1. The process of extending MapboxLayer is as follows: start by extending MapboxLayer, design the constructor, import administrative district boundary data, pass in the extensions field extender, rewrite the status update function, rewrite the getSubLayerProps function, and end by extending the MapboxLayer class; S3.2, the method of combining ExtendPolygonLayer class with deck.gl and mapbox.gl is as follows: use React front-end library, introduce MapGL component from react-map-gl library as parent component, react-map-gl library is a wrapper of mapbox.gl, which can be regarded as mapbox.gl, introduce DeckGL component from deck.gl as subcomponent of MapGL, and finally pass ExtendPolygonLayer class as sublayer to DeckGL component; S3.

3. The extender design process involved in the ExtendPolygonLayer class constructor is as follows: start of extender design, injection of fixed-point shader declaration, injection of fragment shader declaration, rewriting of color drawing function, and end of extender design.

2. The method for rendering a three-dimensional geographic polygon with color gradient according to claim 1, characterized in that: The extender is a class inherited from LayerExtension introduced from the deck.gl library. The class method is getShaders. The shader is redefined as required. The code of the custom shader is written into the inject attribute of the objectA object in the form of key-value. Four attribute values ​​are set for the inject object, namely "vs:#decl", "vs:#main-end", "fs:#decl" and "fs:DECKGL_FILTER_COLOR". The "vs:#decl" attribute value is used to declare the vertices of the polygon and declare a vec2 type variable vp; the "vs:#main-end" attribute value sets the deck.gl library Polygon The vertexPositions attribute value of the Layer class is assigned to the vp variable; the value of "fs:#decl" is a code string, which declares a vec2 variable to receive the vp variable passed in by the vertex shader, declares a float type u_time variable to receive the timestamp variable, and defines a function Effect that receives speed, UV coordinates, and timestamp. The function of this function is to return a vec3 type color value based on the values ​​of the three parameters after several steps of trigonometric function changes; the function of the "fs:DECKGL_FILTER_COLOR" attribute value is to reset the color value. The processing method is to keep the rgb value of the color value unchanged and only modify the transparency value, which is multiplied by a coefficient pow(vp.y, 2.0).

3. Application of the color gradient three-dimensional geographic polygon rendering method according to claim 1: characterized in that, The rendering method is applied to a large screen to realize three-dimensional administrative divisions, and a special hover effect of administrative districts on the large screen. When the mouse moves into a certain administrative district, the height of the administrative district increases appropriately, and when the mouse is removed, the original height is restored.

4. Application of the color gradient three-dimensional geographic polygon rendering method according to claim 1: characterized in that, The rendering method is applied to buildings to realize three-dimensional buildings.

Images