A sharing meeting of “unveiling the mystery of mapping”

Time:2021-4-2

A sharing meeting of “unveiling the mystery of mapping”

Recorded my technology sharing in the group, students with the same needs can refer to it
It takes about 70 minutes to share the whole process

A sharing meeting of

1、 Why share front end related “map” knowledge

  1. (large screen display) many companies have corresponding large screen display systems, such as the distribution map of customers and assets in China or all over the world
  2. (vivid depiction) to show the geographical relationship from the perspective of map, which is more intuitive than simple words
  3. (many scenes) for example, this year’s distribution map of various epidemic severity
  4. Generally speaking, it looks cool and can improve the b-grid a little bit, and this is just a front-end category, so we need to understand it

2、 Brief introduction of map related technology

Here I only introduce a few of my commonly used

**Baidu map
It’s very famous and has many functions. Now it supports 3D very well. Note that the API of GL v1.0 is a little different from that of v2.0. Don’t drop it
The disadvantages are also obvious. For example, if you want a clean map with no shop and no logo, I suggest you use ecarts to play, because Baidu map has more things
Want to use Baidu map students can see here, super simple can complete the registration with play
It’s very easy to use

** hcharts
Very good, very easy to use, but part of its functions are to charge, before using the company to help you buy the corresponding functions can be used for commercial oh
As our company map database is developed by ourselves, there is no such online payment in the end
Details address

** echarts
No one knows the front end of this library. It is recommended to use this technology when the requirements are very simple. Most of the time, ecarts has been introduced when the project needs to draw histogram or line chart. At this time, there is no need to refer to it repeatedly to save space
A map drawn by ecarts

**Our own 2D, 3D map component library
I don’t want to introduce this in too much detail here. Some companies will also have map components developed independently. The design idea may be different from the above three. I’ll talk about it later

3、 Implementation of basic map by ecarts

Take ecarts, for example, because it’s best to

Here I built a new Vue project

<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import mapData from "./geo";

export default {
  name: "Home",
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    initMap() {
      this.myChart = echarts.init(document.getElementById("map"));
      echarts.registerMap ("world", MapData); // define the name to be used below. The advantage of this is that you can easily switch maps
      this.myChart.setOption({
        series: [
          {
            type: "map",
            Maptype: "world" // user defined extended chart type
            label: {
              show: false,
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.initMap();
  }
};
</script>
  1. As we usually use ecarts, initialize first
  2. And then there’s a little bit of a different needecharts.registerMap("world", mapData);It can be understood as naming this data “world” to facilitate future switching (I will talk about the data here below)
  3. In the option configuration, set the type as map and use the ‘world’ type defined above

design sketch
A sharing meeting of

We can see that there is nothing special about map drawing. The most important thing is thatmapDataData, this data is generally called geojson data, so let’s get to know it

4、 What is geojson data

  1. Geojson uses the syntax of JSON to express and store geographic data. It is a subset of JSON. It is not specially used by JS
  2. There are mountains, rivers, oceans and other geographic information on the map, so how to describe a river? At this time, we need to use the file of geojson format to describe
  3. It’s not necessary to use geojson. Geojson is just a set of specifications. Major parsers use this set of specifications to parse and generate the corresponding scenes. We can make our own specifications to achieve these. It’s just that we need to write and draw our own parsers due to poor compatibility

5、 Geojson

English is good can roll website first
1. Basic structure

{// can include points, lines and surfaces, a large set
  "Type": "featurecollection", // define that this is a geojson file, and other values can be used here, as will be mentioned below
  "Features":
}

We’ll see later"type": "FeatureCollection"This line indicates that this file is a geojson specification file

2. Describe a feature
Dot data on maps

{
  "type": "FeatureCollection",
  "features": [
    {
      "Type": "feature", // indicates that the object is a feature
      "Properties": {}, // styles are put here, which will be specially said later
      "Geometry": {// here is the specific data
        "Type": "point" // refers to drawing a point
        "Coordinates": [105.380859375, 31.57853542647338] // the default values are longitude and latitude. In three dimensions, they are XYZ. Of course, it's not necessarily why we talk about longitude and latitude (different coordinate systems)
      }
    },
  ]
}

3. Describe multiple feature collections
**Advantages

  1. Simple writing
  2. These point styles can be shared
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "Type": "multipoint", // multipoint, that is to draw multiple identical points in succession
        "coordinates": [[105.380859375, 31.57853542647338],
        [105.580859375, 31.52853542647338]
        ]
      }
    },
  ]
}

4. Describe a line (linestring)

  1. It’s still drawing every point here, but these points will connect to form a line
  2. Connection data on map
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "Type": "linestring" // all the points here will be connected to form a line
        "coordinates": [[105.6005859375, 30.65681556429287],
        [107.95166015624999, 31.98944183792288],
        [109.3798828125, 30.031055426540206],
        [107.7978515625, 29.935895213372444]]
      }
    },
  ]
}

5. Describe multilinestring

  1. Here, the lines of the second group and the first group can be separated and not connected end to end
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "MultiLineString",
        "coordinates":
          [
            [
              [105.6005859375, 30.65681556429287],
              [107.95166015624999, 31.98944183792288],
              [109.3798828125, 30.031055426540206],
              [107.7978515625, 29.935895213372444]
            ],
            [
              [109.3798828125, 30.031055426540206],
              [107.1978515625, 31.235895213372444]
            ]
          ]
      }
    },
  ]
}

6. Describe a polygon

  1. The first point and the last point should be the same, so as to complete the closed loop!!
  2. Attention should be paid to the format of 3D array
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "Type": "polygon", // note that this is a 3D array
        "coordinates": [
          [
            [106.10595703125, 33.33970700424026],
            [106.32568359375, 32.41706632846282],
            [108.03955078125, 32.2313896627376],
            [108.25927734375, 33.15594830078649],
            [106.10595703125, 33.33970700424026]
          ]
        ]
      }
    },
  ]
}

7. There are multiple faces in one face

  1. This kind of single ‘polygon’ has multiple shapes and hollows, which is similar to Boolean operation. In this way, we can describe the circled countries in the map
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -39.7265625,
              -3.162455530237848
            ],
            [
              127.96875,
              -3.162455530237848
            ],
            [
              127.96875,
              74.1160468394894
            ],
            [
              -39.7265625,
              74.1160468394894
            ],
            [
              -39.7265625,
              -3.162455530237848
            ]
          ],
          [
            [
              -22.5,
              15.961329081596647
            ],
            [
              110.74218749999999,
              15.961329081596647
            ],
            [
              110.74218749999999,
              70.8446726342528
            ],
            [
              -22.5,
              70.8446726342528
            ],
            [
              -22.5,
              15.961329081596647
            ]
          ]
        ]
      }
    }
  ]
}

The results are as follows
A sharing meeting of

8. Describe multiple faces
Advantages:

  1. Simple writing
  2. These point styles can be shared
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
          [
            [
              -39.7265625,
              -3.162455530237848
            ],
            [
              127.96875,
              -3.162455530237848
            ],
            [
              127.96875,
              74.1160468394894
            ],
            [
              -39.7265625,
              74.1160468394894
            ],
            [
              -39.7265625,
              -3.162455530237848
            ]
          ]
        ],
        [
          [
            [
              -22.5,
              15.961329081596647
            ],
            [
              110.74218749999999,
              15.961329081596647
            ],
            [
              110.74218749999999,
              70.8446726342528
            ],
            [
              -22.5,
              70.8446726342528
            ],
            [
              -22.5,
              15.961329081596647
            ]
          ]
        ]
        ]
      }
    }
  ]
}

Here, if it overlaps, it is the superposition of colors, as shown in the figure:
A sharing meeting of

9. Describe a group

  1. For example, in order to represent a specific landform, we can separate the landform data
{
  "type": "FeatureCollection",
  "features": [
    {// can include points, lines and surfaces, an independent set
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "coordinates": [108.62, 31.02819]
        }, {
          "type": "LineString",
          "coordinates": [[108.896484375, 30.1071178870],
          [108.2184375, 30.91717870],
          [109.5184375, 31.2175780]]
        }
      ]
    }
  ]
 }

10. Different properties

{
  "type": "FeatureCollection",
  "features": [
     {
      "type": "Feature",
      "Properties": {// special properties
        "Stroke": "#", // outside color
        "Stroke" -- 1.width
        "Stroke opacity": 0.7, // outer transparency
        "Fill": "#9e290c", // fill color
        "Fill opacity": 0.7 // fill color transparency
      },
      "geometry": {
        "Type": "point", // draw a point
        "coordinates": [105.380859375, 31.57853542647338]
      }
    },
  ]
}

6、 The use of geojson related websites and tools

**I recommend a great website for drawing geojsonaddress

Let me introduce how to use this website to generate efficiently and debug geojson
A sharing meeting of

  1. That is, the final generated geojson, where the changes can affect the image in real time, and there will be error prompts, which is very convenient to write
  2. draw a straight line
  3. Draw a polygon, that is, a face. Note that the first one is connected here
  4. Draw rectangle, here should be a special method to draw rectangle
  5. Draw a point, here we will mark it on the map, specific pictures need to be referenced in the project

A sharing meeting of

  1. Click to enter edit mode, mouse will appear small hand logo on the graph, at this time you can drag the graph to move, operation can choose whether to keep
  2. Delete mode, click to delete the specified graphics, operation can choose whether to retain

A sharing meeting of
Click the figure to display the operation box as shown in the figure

  1. Add style attribute, the top shows the current style attribute
  2. Save your changes
  3. Delete this graphic

A sharing meeting of

  1. Click open to use the local geojson file to import and draw
  2. Save below, click geojson to download the generated code file to local

7、 The idea of self-made geojson analytic drawing tool

  1. We can only make a converter, that is, you can write whatever format you think is good, and finally convert it to geojson format
  2. Draw directly in your favorite format
  3. If you use canvas to realize it, you just need to draw the corresponding graph, that is, you need special treatment for graph superposition. The style can read the data in properties directly for setting
  4. Drawing longitude and latitude is also a problem. After all, it is not easy to calculate longitude and latitude on the plane
  5. So in conclusion, it is not so difficult to draw a plane version of the map, as long as the data on the success of a small half

8、 Basic concepts of map (tile map, vector map)

**Have you found that when we enlarge the map, the area is loaded into an image block by block
**If you open the network of the console, you can see many PNG requests
**How to render a map quickly with such huge data and details?
**Here are the two main map drawing modes

Grid Tile Map

As the name suggests, the picture is like a tile stacked grid to become a map, a bit like a jigsaw puzzle, doesn’t it feel that it’s not tall at all
But there are also many problems to be solved. For example, when you look at the map from the perspective of overlooking the world, the tile image of the world will appear. When the height is less than a certain value, another set of tiles will be used. In a certain height range, the tile image will be enlarged to simulate the decline of the field of vision, Every request for tile image needs to transfer: 1: coordinates (longitude and latitude) of current view 2: width and height of current view 3: height of current view

Grid tiles in 256256 or 512512 size images are used as media. This technology usually renders the images in advance on the server side. The front end loads the images according to the zoom level of the map and stitches them on demand. At present, it is still used on a large scale, but this method has some disadvantages

Affected by the network bandwidth overhead and storage space constraints, the cost of offline deployment is high, and a single set of themes is nearly 500 g (China).
It takes a long time for style editing and back-end rendering.
No 3D building data, no height information in 3D scene.
Data confidentiality is poor.

Vector map

As the name suggests, vector graphics, as long as it is not a photo will certainly be much smaller, for why the vector light and distortion can refer to the last article SVG shareSvg actual combat

The vector tile adopts the same hierarchical cutting scheme as the grid tile. The difference is that the tile data transmits geographic data, including roads, land, buildings, etc

It takes up little server space and reduces network overhead. Localization deployment only needs 5g space (China).
It is easy to change the base map style
Because of the geographic data itself, we can extend the 3D space based on the data, such as 3D architecture.
Data confidentiality is strong.

9、 Different coordinate systems

**The earth itself is an ellipsoid. It’s really difficult to draw it on a rectangle in a plane way. Now there are many drawing methods, but they all have their own advantages and disadvantages. Interested friends can check the specific details. Here I will briefly introduce the more common methods

  1. Longitude and latitude EPSG: 4326 is the default coordinates of the map
    Now define the longitude and latitude on the sphere, and then draw the scale on the square paper
  2. Mercator projection (EPSG: 3785)
    Put the earth in a cylinder. Suppose there is a light source inside the earth, then the projection of the earth on the cylinder is a map
  3. Mars coordinate system

The Mars coordinates are obtained by the National Bureau of Surveying and mapping for national security on the basis of the original coordinates. The basic domestic electronic maps and navigation equipment are obtained by using this coordinate system or secondary encryption on the basis of this coordinate.
The real name of Mars coordinates should be gcj-02 coordinates. Basically, all domestic electronic maps use the Mars coordinate system, and even the Chinese part of Google maps has made a special offset for the Chinese government.

  1. Baidu coordinate system

Mars coordinates are encrypted once on the international standard coordinates WGS-84. As domestic electronic maps need to be encrypted at least once using Mars coordinates, baidu is more willful. It directly studies a set of encryption algorithm and comes to a second encryption. This is the well-known Baidu coordinates bd-09. Of course, only Baidu maps use Baidu coordinates

  1. WGS-84 coordinate system

Gs-84 coordinate is an international standard, which is used in general satellite navigation and original GPS equipment. Google map, OpenStreetMap, mapbox, openlayer and so on all use this coordinate.

Geojson setting coordinate system
Because of different coordinate systems, even if the coordinates of a point are not exactly the same, we need to tell people who use geojson which coordinate system to analyze

{
  "type": "FeatureCollection",
  "CRS": {// define the coordinate system (if it is not written, the coordinate system of longitude and latitude will be used). The default value is EPSG:4326 .
    "Type": "name", // / type "and" properties ". For mandatory ownership
    "properties": {
      "Name": "urn: OGC: def: CRS: EPSG: 54013" // specific rules are defined here
    }
  },
  "features": [
     {},
  ]
}

Use the online rules

{
  "type": "FeatureCollection",
  "crs": {
    "Type": "link" // here it becomes link
    "properties": {
      "href": " http://example.com/crs/42 ", // here is the resource link you set up
      "Type": proj4 // proj4, ogcwkt and esriwkt can only be in these three formats
    }
  },
  "features": [
     {},
  ]
}

10、 Faster front end data – > webassembly

**Webassembly is a new coding method, which has smaller file size, faster startup speed and faster running speed. Compared with the web application built with JavaScript, the performance is improved significantly. It is the compiler target of many programming languages, including C + +, C, rust and so on.
Webassembly is a new specification developed by W3C community which is composed of mainstream browser manufacturers. **

Webassembly can obviously improve the speed of calculation, which is quite suitable for map database

  1. The combination of webassembly and JavaScript will not replace JS in a short time
  2. . wasm file at the end of the file
  3. Web assembly has a complete set of semantics. In fact, wasm is a binary format with small volume and fast loading. Its goal is to give full play to the hardware capabilities to achieve native execution efficiency
    Webassembly runs in a sandbox execution environment, and can even be implemented in an existing JavaScript virtual machine. In the web environment, webassembly will strictly abide by the same origin policy and browser security policy.
    Web assembly has designed a very regular text format to be used for debugging, testing, experimenting, optimizing, learning, teaching or programming. You can view the source code of wasm module on the web page in this text format.
    Web assembly is designed to be version free, feature testable and backward compatible in web. Webassembly can be called by JavaScript to enter the JavaScript context, and can also call browser functions like web API. Of course, webassembly can run not only in browser, but also in non web environment.
  4. Parsing decoding webassembly is faster than parsing JavaScript

Compile and optimize – compile and optimize takes less time because more optimizations have been done before pushing the file to the server, and JavaScript needs to compile code multiple times for dynamic types
Re optimization – the webassembly code does not need to be re optimized because the compiler has enough information to get the correct code at the first run
Execution execution can be faster, and webassembly instructions are closer to machine code
Garbage collection – at present, webassembly does not directly support garbage collection. Garbage collection is manually controlled, so it is more efficient than automatic garbage collection. MVP (minimizing viable products) in browsers is fast growing. In the next few years, with the development of browser and the increase of new functions, it will become faster in the next few years.

Having said that these are all concepts, let’s fight together

11、 Webassembly at hello level

Chinese official website
The implementation of the official website also needs to configure the environment, which is very formal. At the entry level, we want to have a try. As long as you can order C + +, you can use my next method to realize it

Online generation
Online generation

A sharing meeting of

  1. Click to convert C + + code to webassembly format
  2. Click to download the converted file
  3. It’s a binary file

References

fetch("/test.wasm")
      .then((res) =>  res.arrayBuffer ()) // get buffer format
      .then((bytes) =>  WebAssembly.compile (bytes)) // convert to bytecode
      .then((mod) => {
        const instance = new WebAssembly.Instance(mod);
        const exp = instance.exports;
        console.log(exp._Z7showNumv())
      });
  1. exp._ Z7shownumv instead of exp.showNum We can modify this in the wat column, but it’s not easy to modify when there are too many codes. There should be the option to change the name when the conversion is forbidden. Here we just expand more
  2. Note that there will be cross domain, because it belongs to file protocol, you can start a service locally

development cost

  1. We need more than just front-end technology
  2. There are a few bugs, for example, it’s not easy to debug, and some students have different compilation results
  3. The community is not perfect
  4. It is suggested that this technology should be used in modules with high encapsulation and large computation

12、 I write the 2D and 3D project code introduction

Here, I’ll show the code structure and problems of the two projects I wrote in the group. I won’t start here. After all, it involves the problem of confidentiality. But the general idea is to divide the map into world, country, province, city and district levels (province and city are the classification of China), which is equivalent to a state machine, and then do corresponding things in each state, such as dot and connect, Every time you change the layer state, other layers will be hidden to show the corresponding view

end.

Map is also a useful part of the front-end. I just came into contact with map related projects this year, but after learning geojson and other knowledge in detail, it’s very smooth to use map related component library
That’s it this time. I hope to make progress with you