To map the epidemic trajectory, the mapping process can be divided into the following three steps.

  1. Establish coordinate system
  2. Draw points according to coordinates
  3. Draw lines according to points

Webgl has 3d rendering function. In order to simplify this section, a 2d coordinate system is first established to map the 2d epidemic trajectory.

drawArrays

If you want to cast magic using WebGL, the drawArrays function is a must. Let’s take a look at how MDN describes it.

WebGL API in the * * WebGLRenderingContext drawArrays () method is used for * * rendering primitives from the vector array.

  var data = new Float32Array([0.5.0.5, -0.5.0.5, -0.5, -0.5.0.5, -0.5]);
  const colors = [
    1.0.1.0.1.0.1.0./ / white
    1.0.0.0.0.0.1.0./ / red
    0.0.1.0.0.0.1.0./ / green
    0.0.0.0.0.0.1.0./ / black
  ];
Copy the code

Mode (Drawing mode)

  • gl.POINTS: Draws a series of points.

  • gl.LINE_STRIP: Draw a line. That is, draw a series of line segments with the top point connecting the next.

  • gl.LINE_LOOP: Draws a coil. That is, draw a series of line segments, with the top point joining the next, and the last point joining the first point.

  • gl.LINES: Draws a series of individual line segments. Every two points serve as endpoints, and line segments are not connected.

  • gl.TRIANGLES: Draws a series of triangles. Every three points are the vertices.

  • gl.TRIANGLE_FAN: Draw aTriangle fan.

Establish coordinate system

First, we take the Canvas canvas area as the whole world, and establish the world coordinate system, not considering the clipping effect at present.

To simplify the problem, let’s simplify the problem further, the world coordinate system only considers the latitude and longitude of Shenzhen.

The city covers a total area of 1,952.84 square kilometers. At 113°46' to 114°37' e, 22°27' to 22°52' N.Copy the code

That’s a quarter of a latitude across one degree of longitude. We could design the grid to be 100 by 25 and to simplify things, let’s simplify things even further, the world coordinate system only considers the latitude and longitude of Shenzhen.

The city covers a total area of 1,952.84 square kilometers. At 113°46' to 114°37' e, 22°27' to 22°52' N.Copy the code

That’s a quarter of a latitude across one degree of longitude. We can make the grid 100 by 25.

So let’s create a function from geographic coordinates to world coordinates:

// Change the geographic coordinates to the world coordinates
const geoToVertex = ([lng, lat]) = > {
  // At -113 °46' -114 °37' E, 22°27' -22 °52' N.
  // const topLeft = [113.46, 22.27]
  // const topLeftVertex = [0,0,0]
  const lngRatio = (lng - 113.46) * 100 / 100
  const latRatio = (lat - 22.27) * 25 / 25
  const vertex = [lngRatio, latRatio]
  return vertex
}
Copy the code

Simulate patient data and draw patient points

const covids = [
{
	lng: 113.88.lat: 22.31.name: Patients' 1 '
},
{
	lng: 113.88.lat: 22.35.name: Patients' 2 '
},
{
	lng: 114.33.lat: 22.35.name: Patients' 3 '
},
{
	lng: 114.lat: 22.44.name: Patients' 4 '},]]Copy the code

These data are drawn in the coordinate system. Part of the code for drawing has been given in the previous part, which will not be elaborated here, as shown below:

We connect them:

Okay, so we have a crude trajectory diagram.

Now let’s take a look at the real data. So far, liantang, Shuibei, Caopu, Buji and Bantian have been affected by the epidemic in Shenzhen. All we have to do is figure out the latitude and longitude to map the scale of the epidemic.

  • Water bay: 114.124, 22.574
  • Lin Tong :114.173, 22.5639
  • Straw paving :114.116, 22.5851
  • Boogie :114.118, 22.6021

The data are plotted as follows:

In the next section, we will add background textures and 3D effects.