Glittering's blog

Appearance

涉及常见技术栈：

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

一、GIS 基础原理 ​

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

标准回答：

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

核心三部分：

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

数据结构：

Geometry + Properties

例如：

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

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

矢量数据

点
线
面

例如：

城市
道路
行政区

常见格式：

GeoJSON
Shapefile
TopoJSON

栅格数据

本质：

图片

例如：

卫星图
热力图
DEM高程

3 GeoJSON 结构是什么？ ​

GeoJSON 是最常见 GIS 数据格式。

类型：

Point
LineString
Polygon
MultiPolygon
Feature
FeatureCollection

示例：

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

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

4 WGS84、GCJ02、BD09 区别？ ​

三个坐标系：

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

中国地图需要：

坐标偏移

例如：

WGS84 → GCJ02

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

原因：

地球是球体
屏幕是平面

需要：

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

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

地图使用：

金字塔模型

Zoom 层级：

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

公式：

tiles = 2^zoom

四、前端地图渲染 ​

9 Canvas / WebGL 地图区别？ ​

Canvas：

CPU 渲染

优点：

简单

缺点：

性能差

WebGL：

GPU 渲染

优点：

百万级点位

例如：

  • Mapbox GL JS
  • deck.gl

10 Mapbox GL 为什么性能好？ ​

核心：

Vector Tile + WebGL

流程：

VectorTile
→ GPU
→ shader
→ 渲染

不是 DOM。

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

11 Point In Polygon 怎么实现？ ​

问题：

点是否在多边形内

算法：

射线法
Ray Casting

步骤：

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

规则：

奇数 = 内部
偶数 = 外部

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

常用：

Haversine

因为：

地球是球体

不是简单：

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

13 如何查找最近点？ ​

常用空间索引：

R-Tree
KD-Tree

避免：

O(n)

优化到：

O(log n)

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

14 10 万点位如何渲染？ ​

方案：

1 WebGL ​

例如：

  • deck.gl

支持：

百万点

2 聚合 ​

Cluster

例如：

1000点 → 1个圆

3 VectorTile ​

后端切片

15 地图卡顿怎么优化？ ​

常见策略：

requestAnimationFrame

批量更新：

RAF 合并

避免：

频繁 setState

七、GIS 系统架构 ​

16 GIS 系统典型架构？ ​

标准：

数据层
服务层
前端层

数据层：

PostGIS

服务层：

GeoServer
MapServer

前端：

  • Mapbox GL JS
  • OpenLayers

17 VectorTile 为什么比 GeoJSON 快？ ​

GeoJSON：

一次加载全部

VectorTile：

按瓦片加载

优点：

按需加载

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

18 实时轨迹如何实现？ ​

例如：

车辆轨迹

技术：

WebSocket
SSE

优化：

轨迹抽稀

算法：

Douglas-Peucker

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

策略：

WebGL
空间索引
增量更新

不要：

全量重绘

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

20 3D 地图如何实现？ ​

常见方案：

  • CesiumJS
  • Three.js
  • deck.gl

核心：

3D Tiles

例如：

城市模型
BIM

十、GIS 面试加分回答 ​

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

Copyright © 2026