Geographic data visualization

takeaway

After reading this article, you will understand: 1. Common geographic data visualization layer and classification; 2. 2, GeoJSON encoding format; 3. How to realize the layer of the point; 4. How to realize OD arc layer; 5. How to realize the thermal layer;

Data visualization layer

Base vs. data visualization layer

Through the previous articles, namely GIS coordinate system, camera control, pyramid formation of data source and binary analysis, a basic vector tile data information can be obtained, including: Road, water, functional surface, building, POI and other information, combined with the architectural rendering and text rendering mentioned in previous articles (please visit the link at the end of this article), plus road rendering (when there is a chance to talk again), functional surface, water, basically can form a relatively complete geographic information map engine.

Tiles or vector tiles, as the base of a map, are usually only used to express geographic information. If you want to draw on the base of geographic information, you need to output visual layers like crazy. This layer is usually used to quickly create geographic location-related visual works such as scatter points, tracks, areas, heat maps and so on.

Map base maps are related to visual layers, like Mapbox and deck.gl, Autonavi and loca.js.

Data visualization layer classification

After the analysis and collection comparison with Loca and Deck.gl, we roughly divided the layers into 5 categories according to the data source type (point, line, plane) and the visualization mode:

• Point type data layer

• Line type data layer

• Surface type data layer

• Thermal type layer

• Other data model layers

Style and data definitions

The data format

For the definition of data structure, we adopt the encoding format of GeoJSON. GeoJSON is a format for encoding various geographical data structures. Each piece of data is called a Feature.

1、点：Point、MultiPoint

2. Line: LineString or MultiLineString

3, surface: Polygon, MultiPolygon

The geometry attribute is used to describe the geometry attribute, and the properties attribute is used to describe other attributes, such as projection and bbox.

More rules can be found in the GeoJSON specification document: geojson.org/geojson-spe…

Style format

We use the “image” field to describe the point style, the “fill” field to describe the fill color style, and the “stroke” field to describe the stroke style.

Style merge strategy

Changes and Settings to feature styles in layers sometimes require regenerating vertices and faces, such as setting a region with a height of 0 to a region polygon with a height value. Setting styles too often can cause CPU consumption. To avoid this problem, we set a merge first, update later policy for styling operations. That is, after the style is updated in the same frame, it does not take effect immediately, the style is merged, the style is bound to the data before the next event cycle of rendering, and the updated style is cleared after rendering.

There are a lot of holes in the implementation and practice of layers, and each layer can be talked about at length. Here are some common layers with general problems to share in practice.

Point of the layer

Drawing geographic point data is the basic demand in the visualization of geographic information. ICONS and graphics can be used to annotate and text can be used to describe information.

Size of the unit

In a two-dimensional map, point data is usually presented as a vector, that is, the size of the point is the number of pixels, and the size and dimension of the point remain the same as the map is scaled. Plot points in 3 d maps of the appeal will be divided, common 3 d scene, is usually a close election small, namely as the map zoom camera (distance), PM will have the size on the vision and the surrounding objects, so doing 3 d map points in the scene, need to consider the size of the point unit is a physical unit (m), or the pixel units (px).

Rendering toward

In addition to the size unit, the orientation of points should also be taken into account. In a 2D scene, all features are oriented towards the screen. In a 3D scene, with the tilt of the camera, there will be scenes that require the data points in the scene to be tilted together, so the orientation should also be taken into account when creating the Mesh of points.

Combining the size units and rendering orientation, there are now 4 permutations and combinations:

• Toward the screen, in pixels: regular requirements, common ICONS dot

• Toward the sky, in pixels: use the name of the scene such as the road

• Skyward, in meters: Apply scenes such as scan animation to physical sphere of influence

• Toward screen, in meters: suitable for fixed scale scenes, without overlap when reduced

Implementation scheme

Each point is represented by 4 vertices +2 triangular faces, and the coordinates of the four vertices are calculated as the same position in the CPU. Anchor information is added to help describe the stretching direction of the vertices, and offset information is added to describe the offset of the points, so that in the vertex shader, Dynamically calculates specific vertices of triangular faces based on orientation and size.

The screen orientation, implemented in pixels, is similar to regular vertex calculations, requiring vertex stretching and adding and subtracting offsets after the matrix projection is calculated.

Vec2 r_anchor = m_ratation * (a_anchor * a_size); vec2 r_anchor = m_ratation * (a_anchor * a_size); vec4 projected_position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.); Vec4 (projected_position.xy/projected_position.w + (r_anchor * a_scale + offset)/u_resolution * 2.0, 0.0, 1.0);Copy the code

Similarly, for a scene facing the screen in meters, the final stretch needs to be multiplied by the ratio of the current window pixels to the physical units.

// Face screen + physical unit float mileScale = dist * PXSCALE; vec3 newPosition = vec3(position.xy + a_offset * u_cameraScale, position.z); vec4 projected_position = projectionMatrix * modelViewMatrix * vec4(newPosition.xyz, 1.); gl_Position = vec4(projected_position.xy / projected_position.w + (r_anchor * a_scale) / mileScale / u_resolution, 0.0, 1.0);Copy the code

Toward the sky, in meters, you need to figure out the stretch and the shift of the point, and then do the projection matrix.

Vec3 offsetPosition = vec3(position.xy + (r_anchor * vec2(1. -1.) * a_scale + a_offset) * u_cameraScale, position.z); gl_Position = projectionMatrix * modelViewMatrix * vec4(offsetPosition, 1.);Copy the code

Skyward, similarly in pixels, also needs to calculate the stretch and offset first, plus the ratio of one window pixel to the physical unit.

// Face the sky + pixel unit float pxScale = dist * pxScale * u_cameraScale; Vec3 offsetPosition = vec3(position.xy + (r_anchor * vec2(1., -1.) * a_scale + a_offset) * pxScale * 2.0, position.z); gl_Position = projectionMatrix * modelViewMatrix * vec4(offsetPosition, 1.);Copy the code

OD arc layer

In map scenarios, the OD line is usually used to draw some kind of relationship between the starting point and the ending point, such as population migration, flights, DDOS attacks, etc. The difficulty of drawing OD line is how to generate a “surface line”.

Constant width line calculation

In WebGL, drawing a line with a thickness requires calculating the plane grid of the line. A “plane line” can be achieved by calculating the normal direction through two adjacent points and stretching the width along the normal direction:

If you need to face the screen, you need to dynamically calculate the stretching value of the line thickness in the shader according to the unit width of the pixel. For details, please refer to the previous article “How to draw a 2px Line in WebGL”. In addition, the LineGeometry is also provided in the example extension on the official website of Three.

Arc calculated

At present, the calculation of arcs in the geographical scene is usually in the majority of great circle arcs. What is a great circular arc? It’s the shortest path between two points on the sphere. When you project it on Mercator, you get the shape of the arc. The calculation method of great circle arc path is usually based on dichotomy interpolation, that is, according to two points to calculate the coordinate of the central point, and then the analogy, calculate other interpolation points.

The downside of great arcs is that they tend to behave differently on routes that pass near the North or South Poles.

In addition, the OD curve of the plane, we also use the quadratic Bezier curve to calculate the arc. For the OD line of two points, the third control point is selected in the perpendicular direction of the center of the two points, so as to obtain the three control points of the Bessel curve.

In 3 d scene of stereoscopic OD curve are also common, is on the map the radian to elevation (the z axis), its calculation is more simple, the interpolation points to the radian of the OD line divide N, each radian of sine value can be calculated the height of the current interpolation points, according to the arc cosine values can be calculated in proportion to the current interpolation point on the OD line t, So any point on this line segment, you can get it by 1 minus t times a plus t times b.

Application scenarios

The final effect is shown in the following figure (Education migration of CPC Central Committee members). The DIRECTION of OD is represented by two colors, white is the starting point, and yellow is the end point.

The thermal layer

Thermal map is used to show the intensity and distribution trend of data by color. In the three-dimensional map scene, height can also be used to improve the three-dimensional sense.

To achieve a thermal map, you need to do two phases of rendering. The first phase is the density rendering, usually using a certain channel of color, color overlay to get the density. We use point cloud color overlay to highlight, and use the R channel to judge the density. It is important to note that if you want dynamic and continuous heat changes during the map zooming, you need to continuously update the density map as the window changes.

In the second stage of rendering, the entity is a grid plane.

According to the r channel of the density diagram, the thermal color and height values are calculated correspondingly. When calculating the density, you can use the Bezier curve to do something with R, so that the changes in height and color are not so steep.

vec2 toBezier2(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3){ float t2 = t * t; Float one_minus_t = 1.0-t; float one_minus_t2 = one_minus_t * one_minus_t; Return (P0 * one_minus_t2 * one_minus_t + P1 * 3.0 * t * one_minus_t2 + P2 * 3.0 * t2 * one_minus_t + P3 * t2 * t); } vec2 toBezier(float t, vec4 p){return toBezier2(t, vec2(0.0, 0.0), vec2(p.x, p.y), vec2(p.z, p.w), vec2(1.0, 1.0)); }Copy the code

The first one is a density map and the second one is a thermal gradient texture. In the element shader, use the density value as the UV s vector and take the color.

The rest of the visual layer crater and code details will be expanded and shared in the future.

Stay tuned for the next installment: Maps Cool Effects and Principles Revealed

Review past

Creating cool 3D Map Visualization Products for B-side Clients