1. Basics of Geographic Information System: What is GIS

GIS (Geographic Information System) The essence is:

Use computers to process "data with spatial location".

Normal data:

用户ID  年龄  性别

GIS data:

经度  纬度  人口  温度

For example:

116.397, 39.908 → 北京

So GIS data =

空间位置 + 属性数据

For example:

Longitude	Latitude	City	Population
116.39	39.90	Beijing	21 million

2. Coordinate system (most important)

Map must know:

地球上的一个点在哪里

The most common are latitude and longitude coordinates:

经度：东西
纬度：南北

For example, Beijing:

116.397°E
39.908°N

This coordinate system is called:

WGS84

This is what GPS uses.

Many maps use it, for example:

• GPS
• Google Map

3. Why is “coordinate projection” needed?

Here comes the question:

The earth is a sphere The screen is flat

Must put ball → plane

This is called:

坐标投影（Projection）

Like:

橙子皮 → 摊平

There will definitely be deformation.

4. Common projections: Web Mercator

Basic uses of Internet maps:

Web Mercator

Many maps use it:

• Google Maps
• OpenLayers
• Leaflet
• Mapbox

The coordinates are called:

EPSG:3857

Features:

单位不是经纬度
而是 米

For example:

经纬度
116.397,39.908

After conversion:

12958000, 4850000

This is it:

WGS84 → WebMercator

5. Why are China’s maps different?

The map of China has coordinate encryption.

Three common types:

Coordinate system	Where to use
WGS84	GPS
GCJ02	AutoNavi / Tencent
BD09	Baidu

For example:

Beijing

WGS84
116.397 39.908

GCJ02
116.403 39.915

So development often requires:

坐标转换

6. Spatial Relationship

The core capabilities of GIS are actually:

Determine the relationship between spatial objects

For example:

1 intersect

Do the two graphics intersect?

A ∩ B

For example:

一个区域
是否覆盖某个城市

2 contains

A 包含 B

For example:

一个点是否在区域内

This is called:

Point In Polygon

3 distance

两个点之间距离

For example:

配送距离

Formula:

Haversine

4 closest

For example:

找最近的充电站

7. GIS data types

There are two types of data in GIS:

1 Vector data (Vector)

Points:

城市

Line:

道路

Face:

行政区

Format:

GeoJSON

Example:

{
 "type":"Point",
 "coordinates":[116.397,39.908]
}

2 Raster data (Raster)

Actually it is:

图片

For example:

卫星图

Map tiles:

256x256

8. Internet map rendering principle

The map is actually:

很多瓦片拼起来

For example:

Zoom 10

It will load a lot:

256x256 图片

For example:

/tile/10/532/342.png

9. Front-end GIS technology stack

Common:

Map:

• Mapbox GL JS
• OpenLayers
• Leaflet

Visualization:

• deck.gl
• ECharts

10. Do you understand the principles of GIS?

Standard answer:

The core of GIS is the processing of data with spatial coordinates. The foundation consists of three parts:

The first is the coordinate system, such as GPS using WGS84.

The second is coordinate projection. Because the earth is a sphere and the map is a plane, projection is required. Internet maps usually use Web Mercator (EPSG:3857).

The third is spatial relationship, such as whether a point is within a polygon, whether two graphics intersect, distance calculation, etc.

In front-end development, we usually process GeoJSON data and render it through Mapbox or OpenLayers. At the same time, we need to perform coordinate conversion, such as conversion between WGS84 and GCJ02.