GIS必会知识点

涉及常见技术栈：

Mapbox GL JS
OpenLayers
deck.gl
Leaflet

# 一、GIS 基础原理

# 1 什么是 GIS？核心组成是什么？

标准回答：

GIS（Geographic Information System）是用于 采集、存储、分析和可视化空间数据的系统。

核心三部分：

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

1
2
3

数据结构：

Geometry + Properties

例如：

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

1
2
3
4
5
6
7

# 2 矢量数据和栅格数据区别？

矢量数据

点
线
面

1
2
3

例如：

城市
道路
行政区

1
2
3

常见格式：

GeoJSON
Shapefile
TopoJSON

1
2
3

栅格数据

本质：

图片

例如：

卫星图
热力图
DEM高程

1
2
3

# 3 GeoJSON 结构是什么？

GeoJSON 是最常见 GIS 数据格式。

类型：

Point
LineString
Polygon
MultiPolygon
Feature
FeatureCollection

1
2
3
4
5
6

示例：

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

1
2
3
4
5
6
7
8
9
10

# 二、坐标系统（GIS 核心）

# 4 WGS84、GCJ02、BD09 区别？

三个坐标系：

坐标系	使用
WGS84	GPS
GCJ02	高德腾讯
BD09	百度

中国地图需要：

坐标偏移

例如：

WGS84 → GCJ02

# 5 为什么需要坐标投影？

原因：

地球是球体
屏幕是平面

1
2

需要：

Projection

常见投影：

Web Mercator

坐标：

EPSG:3857

# 6 WebMercator 为什么适合互联网地图？

原因：

1️⃣ 计算简单 2️⃣ 瓦片地图适配好 3️⃣ 经纬度转换方便

缺点：

高纬度地区严重变形

# 三、地图渲染原理（高频）

# 7 瓦片地图（Tile）原理是什么？

地图不是一整张图，而是：

很多小图片

常见大小：

256x256

URL结构：

/z/x/y.png

例如：

/10/512/345.png

含义：

z = zoom
x = tileX
y = tileY

1
2
3

# 8 瓦片为什么能无限缩放？

地图使用：

金字塔模型

Zoom 层级：

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

1
2
3
4

公式：

tiles = 2^zoom

# 四、前端地图渲染

# 9 Canvas / WebGL 地图区别？

Canvas：

CPU 渲染

优点：

简单

缺点：

性能差

WebGL：

GPU 渲染

优点：

百万级点位

例如：

Mapbox GL JS
deck.gl

# 10 Mapbox GL 为什么性能好？

核心：

Vector Tile + WebGL

流程：

VectorTile
→ GPU
→ shader
→ 渲染

1
2
3
4

不是 DOM。

# 五、空间分析（GIS能力）

# 11 Point In Polygon 怎么实现？

问题：

点是否在多边形内

算法：

射线法
Ray Casting

1
2

步骤：

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

1
2

规则：

奇数 = 内部
偶数 = 外部

1
2

# 12 如何计算两个点距离？

常用：

Haversine

因为：

地球是球体

不是简单：

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

# 13 如何查找最近点？

常用空间索引：

R-Tree
KD-Tree

1
2

避免：

O(n)

优化到：

O(log n)

# 六、地图性能优化（高级必问）

# 14 10 万点位如何渲染？

方案：

# 1 WebGL

例如：

deck.gl

支持：

百万点

# 2 聚合

Cluster

例如：

1000点 → 1个圆

# 3 VectorTile

后端切片

# 15 地图卡顿怎么优化？

常见策略：

requestAnimationFrame

批量更新：

RAF 合并

避免：

频繁 setState

# 七、GIS 系统架构

# 16 GIS 系统典型架构？

标准：

数据层
服务层
前端层

1
2
3

数据层：

PostGIS

服务层：

GeoServer
MapServer

1
2

前端：

Mapbox GL JS
OpenLayers

# 17 VectorTile 为什么比 GeoJSON 快？

GeoJSON：

一次加载全部

VectorTile：

按瓦片加载

优点：

按需加载

# 八、实时地图（AI / IoT）

# 18 实时轨迹如何实现？

例如：

车辆轨迹

技术：

WebSocket
SSE

1
2

优化：

轨迹抽稀

算法：

Douglas-Peucker

# 19 实时 2000 车辆如何优化？

策略：

WebGL

空间索引

增量更新

不要：

全量重绘

# 九、数字孪生 / 3D 地图

# 20 3D 地图如何实现？

常见方案：

CesiumJS
Three.js
deck.gl

核心：

3D Tiles

例如：

城市模型
BIM

1
2

# 十、GIS 面试加分回答

在大型地图系统中，我通常会使用 VectorTile + WebGL 渲染来处理大规模数据，并通过空间索引和点位聚合优化性能。如果是实时数据场景，会使用 WebSocket + 增量更新，同时结合 requestAnimationFrame 控制渲染节奏。

上次更新: 2026/03/06, 03:23:20

← GIS 基础三件套 100 万点地图怎么渲染？→