Common technology stacks involved:

• Mapbox GL JS
• OpenLayers
• deck.gl
• Leaflet

1. Basic principles of GIS

1 What is GIS?What are the core components?

Standard answer:

GIS (Geographic Information System) is used for Systems for collecting, storing, analyzing and visualizing spatial data 。

Three core parts:

空间数据
空间分析
空间可视化

Data structure:

Geometry + Properties

For example:

{
 "type":"Point",
 "coordinates":[116.39,39.90],
 "properties":{
   "city":"北京"
 }
}

2 What is the difference between vector data and raster data?

Vector Data

点
线
面

For example:

城市
道路
行政区

Common formats:

GeoJSON
Shapefile
TopoJSON

Raster Data

Essence:

图片

For example:

卫星图
热力图
DEM高程

3 What is the GeoJSON structure?

GeoJSON is the most common GIS data format.

Type:

Point
LineString
Polygon
MultiPolygon
Feature
FeatureCollection

Example:

{
 "type": "Feature",
 "geometry": {
   "type": "Point",
   "coordinates": [116.39,39.90]
 },
 "properties": {
   "name": "Beijing"
 }
}

2. Coordinate system (GIS core)

4 What is the difference between WGS84, GCJ02 and BD09?

Three coordinate systems:

Coordinate system	Use
WGS84	GPS
GCJ02	AutoNavi Tencent
BD09	Baidu

China map requires:

坐标偏移

For example:

WGS84 → GCJ02

5 Why is coordinate projection needed?

Reason:

地球是球体
屏幕是平面

Requires:

Projection

Common projections:

Web Mercator

Coordinates:

EPSG:3857

6 Why is WebMercator suitable for Internet mapping?

Reason:

1️⃣ Simple calculation 2️⃣ The tile map is well adapted 3️⃣ Easy to convert latitude and longitude

Disadvantages:

高纬度地区严重变形

3. Map rendering principle (high frequency)

7. What is the principle of tile map (Tile)?

The map is not a whole picture, but:

很多小图片

Common sizes:

256x256

URL structure:

/z/x/y.png

For example:

/10/512/345.png

Meaning:

z = zoom
x = tileX
y = tileY

8 Why can tiles be infinitely scaled?

Map usage:

金字塔模型

Zoom levels:

0 → 1 张
1 → 4 张
2 → 16 张
3 → 64 张

Formula:

tiles = 2^zoom

4. Front-end map rendering

9 Canvas / WebGL map difference?

Canvas：

CPU 渲染

Advantages:

简单

Disadvantages:

性能差

WebGL：

GPU 渲染

Advantages:

百万级点位

For example:

• Mapbox GL JS
• deck.gl

10 Why does Mapbox GL have good performance?

Core:

Vector Tile + WebGL

Process:

VectorTile
→ GPU
→ shader
→ 渲染

Not the DOM.

5. Spatial analysis (GIS capabilities)

How to implement 11 Point In Polygon?

Question:

点是否在多边形内

Algorithm:

射线法
Ray Casting

Steps:

点向右画一条射线
统计交点数量

Rules:

奇数 = 内部
偶数 = 外部

12 How to calculate the distance between two points?

Commonly used:

Haversine

Because:

地球是球体

Not simple:

√((x1-x2)^2+(y1-y2)^2)

13 How to find the closest point?

Commonly used spatial indexes:

R-Tree
KD-Tree

Avoid:

O(n)

Optimize to:

O(log n)

6. Map performance optimization (advanced must ask)

14 How to render 100,000 points?

Solution:

1 WebGL

For example:

• deck.gl

Support:

百万点

2 aggregation

Cluster

For example:

1000点 → 1个圆

3 VectorTile

后端切片

15 How to optimize map lag?

Common strategies:

requestAnimationFrame

Batch update:

RAF 合并

Avoid:

频繁 setState

7. GIS system architecture

16 Typical architecture of GIS system?

Standard:

数据层
服务层
前端层

Data layer:

PostGIS

Service layer:

GeoServer
MapServer

Frontend:

• Mapbox GL JS
• OpenLayers

17 Why is VectorTile faster than GeoJSON?

GeoJSON：

一次加载全部

VectorTile：

按瓦片加载

Advantages:

按需加载

8. Real-time map (AI/IoT)

18 How to realize real-time trajectory?

For example:

车辆轨迹

Technology:

WebSocket
SSE

Optimization:

轨迹抽稀

Algorithm:

Douglas-Peucker

19 Real-time 2000 How to optimize vehicles?

Strategy:

WebGL

空间索引

增量更新

Don't:

全量重绘

9. Digital twin/3D map

20 How to implement 3D map?

Common solutions:

• CesiumJS
• Three.js
• deck.gl

Core:

3D Tiles

For example:

城市模型
BIM

10. GIS interview bonus points answers

In large mapping systems, I typically use VectorTile + WebGL rendering to handle large-scale data and optimize performance through spatial indexing and point aggregation.If it is a real-time data scene, WebSocket + incremental update will be used, and combined with requestAnimationFrame to control the rendering rhythm.