Actually, I want to test you on three things:

渲染技术
数据分层
性能架构

1. The most basic solution: WebGL rendering

Distinguish DOM node counts from the number of points drawn on Canvas/WebGL:

为每个点创建 DOM/SVG 节点往往成本很高；Canvas 的绘制点不等于 DOM 节点

For many visible points, evaluate WebGL batching together with aggregation, chunking, and viewport culling. Canvas remains suitable for some scales and interactions; data count alone does not prove that it will crash.

Common libraries:

• Mapbox GL JS
• deck.gl

Their essence is:

WebGL → GPU 并行绘制

Rendering process:

数据 → Buffer → GPU → Shader → 渲染

A GPU can batch many points, but capacity depends on hardware, point styling, updates, and interaction costs.

For example:

deck.gl ScatterplotLayer

Support:

百万级点位

2. Second layer optimization: spatial layering (LOD)

1 million points No need to draw them all.

Maps usually use:

LOD (Level Of Detail)

Different zoom levels load different data.

For example:

zoom	data
5	City level
8	Districts and counties
12	POI
16	A la carte

That is:

远 → 少
近 → 多

3. The third layer of optimization: Vector Tile (core)

Large production systems often load chunks or tiles; decide whether loading complete GeoJSON is appropriate by measuring payload size, memory, and update needs.

Instead:

Vector Tile

Principle:

地图切成瓦片

z/x/y

Each tile only loads current screen data.

For example:

屏幕最多 20 个 tile

Each tile:

2000 点

Finally:

20 * 2000 = 40000

instead of:

1000000

This is the core architecture of the Internet map.

VectorTile Technology:

• Mapbox
• OpenLayers

4. The fourth layer of optimization: point aggregation (Cluster)

When zoom is small:

一个城市可能有 50000 点

Users can't see clearly at all.

So need:

Cluster

For example:

5000点 → 1个圆

Display:

5000

After zooming in:

5000 → 20 cluster

Zoom in again:

cluster → 单点

Many libraries are built in:

• Mapbox GL JS
• deck.gl

5. The fifth layer of optimization: data loading in chunks

Don't:

一次返回 100 万

Should:

分页 + tile

The backend usually:

PostGIS

Query by bbox:

SELECT * 
FROM points
WHERE ST_Intersects(...)

6. The sixth layer of optimization: GPU Instancing

GPU instancing can reduce repeated geometry draw calls, but is not mandatory for every point layer:

Instanced Rendering

Principle:

一次 draw call
渲染 N 个实例

instead of:

draw → 1000000 次

Many libraries already implement this internally:

• deck.gl

7. Real production structure (standard answer)

A million point map system architecture:

数据层
   ↓
PostGIS
   ↓
Tile Server
   ↓
VectorTile
   ↓
MapboxGL / deck.gl
   ↓
WebGL GPU 渲染

Optimization strategy:

VectorTile
LOD
Cluster
Instancing

8. Standard answer

If I need to render 1 million points on a map, I usually optimize from three levels:

Choose WebGL batching or Canvas according to visible point count and interaction needs, avoiding a separate DOM node for every point.

The second is the data layer, which loads data by map tiles through VectorTile to avoid loading all the data at once.The screen typically displays only a few dozen tiles, each containing only a few thousand points.

The third is visualization optimization, such as using cluster to aggregate points at a low zoom level, and then displaying real points at a high zoom level.

Supported layers can use instancing or other batching to reduce draw calls; smoothness still needs measurement on target devices.

9. If you continue to dig deeper (advanced)

You may ask:

1 Why is Mapbox GL fast?

Answer:

VectorTile + WebGL

2 Why is GeoJSON slow?

Because:

一次加载全部

3 Why can deck.gl support millions of points?

Because:

GPU Instancing