经纬志 看得懂 · 跑得起来
首页 / 实战手册
Field Notes · 120 Cases

实战手册

地图白屏、瓦片 404、坐标偏移、模型陷进地形、相机钻到地下—— 这些不是 API 问题,是经验问题。这里按现象整理开发中真实撞到的问题, 每个案例都给出成因、排查顺序,以及能直接用的解决代码。

120个案例
15个分类
8套技术栈覆盖
FIELD CHECK / 01 2026 现象 成因 容器高度 坐标系 瓦片与跨域 渲染顺序 版本差异 性能预算 先查这里 排查顺序 1 复现 2 缩小范围 3 对照版本 结论 多数是容器或坐标 不是库的问题 先排除自己的代码
现场排查清单 经纬志 / 120 例

一句话概览:120 个开发中真实遇到的问题,按现象分为 15 类;每个案例给出成因、从快到慢的排查顺序,以及可以直接复制使用的解决代码。

01

按现象定位

先描述你看到的现象:白屏、偏移、卡顿、加载失败。找到最接近的一类。

02

按顺序排查

不要一上来改代码。案例里的排查顺序是从最快能排除的原因开始的。

03

取走解决代码

确认原因后,直接复制案例中的写法,替换成你自己的数据与容器。

01

坐标与投影

20 个案例

位置不对、整体偏移、数据与底图错位。

国内地图坐标偏移到底差多少米的诊断示意图 001

国内地图坐标偏移到底差多少米

用 GPS 采的点标到高德或百度地图上,整体偏出去几百米,而且不同城市偏的还不一样多。 排查思路
底图和数据都对,合起来却错位的诊断示意图 002

底图和数据都对,合起来却错位

底图是自己接的,数据是业务方给的,两边单看都没问题,叠在一起整体偏出去一段。 排查思路
同一批点位被转换两次,偏移从 555 米变成 1110 米的诊断示意图 003

同一批点位被转换两次,偏移从 555 米变成 1110 米

GPS 点位在高德底图上偏出去半公里,接口里明明已经转过坐标了,前端又转了一遍。 排查思路
百度坐标用固定 0.0065 反算,剩下的 481 米没消掉的诊断示意图 004

百度坐标用固定 0.0065 反算,剩下的 481 米没消掉

从百度接口拿到的点是 BD-09,减掉 0.0065 和 0.006 之后仍然对不上 GPS 原始点,差 480 多米。 排查思路
把 3857 的米值当经纬度传入,标记点直接消失的诊断示意图 005

把 3857 的米值当经纬度传入,标记点直接消失

接口返回 13522390, 3669872,塞进 L.marker 后地图一 zoom 就飞到北极,标记也不见了。 排查思路
UTM 带号差 1,西安的点位横向偏了 551 公里的诊断示意图 006

UTM 带号差 1,西安的点位横向偏了 551 公里

数据按 49 带投影,地图却声明成 50 带,点位整体东移半个省。 排查思路
高斯 3 度带带号算成中央经线,图层偏了 275 公里的诊断示意图 007

高斯 3 度带带号算成中央经线,图层偏了 275 公里

EPSG:4546 和 EPSG:4547 只差一个数字,位置差了近三个经度。 排查思路
GeoJSON 没写坐标系,3857 的数据被当成经纬度的诊断示意图 008

GeoJSON 没写坐标系,3857 的数据被当成经纬度

文件能正常解析,features.length 也对,就是地图上什么都看不见。 排查思路
CGCS2000 与 WGS84 混着用,大比例尺下差了 0.4 米的诊断示意图 009

CGCS2000 与 WGS84 混着用,大比例尺下差了 0.4 米

小比例尺看不出来,一到 1:500 放样就发现控制点和实测点对不上。 排查思路
把 EPSG:4479 当地理坐标用,点位数值到了七位数的诊断示意图 010

把 EPSG:4479 当地理坐标用,点位数值到了七位数

天地图服务目录里写着 CGCS2000,选了 4479,拿到的却是 X/Y/Z 三个米值。 排查思路
把 CRS 改成 EPSG:4326,中国版图被压扁了的诊断示意图 011

把 CRS 改成 EPSG:4326,中国版图被压扁了

为了「让坐标直出度」,把地图 CRS 换成 4326,结果圆变成了椭圆,省界也矮了一截。 排查思路
两个图层各用一套坐标系,叠上去错开半屏的诊断示意图 012

两个图层各用一套坐标系,叠上去错开半屏

底图正常显示,叠加的规划图却整体偏右上,缩放越大偏得越多。 排查思路
proj4 报 unknown projection: EPSG:4547的诊断示意图 013

proj4 报 unknown projection: EPSG:4547

同样的转换代码,换一个 EPSG 码就抛异常,控制台只说「未知投影」。 排查思路
WMS 1.3.0 的 BBOX 是纬度在前,图层整个错位的诊断示意图 014

WMS 1.3.0 的 BBOX 是纬度在前,图层整个错位

从 GeoServer 取同一块范围,1.1.1 正常,1.3.0 返回空白图或上下颠倒的图。 排查思路
七参数尺度因子没除 1e6,20 公里外偏了 24 公里的诊断示意图 015

七参数尺度因子没除 1e6,20 公里外偏了 24 公里

地方坐标转 CGCS2000,近处看着还行,越往外偏得越离谱,像被整体放大了两倍多。 排查思路
境外坐标也被加密,深圳河两岸出现 600 米断崖的诊断示意图 016

境外坐标也被加密,深圳河两岸出现 600 米断崖

一条连续的边界线,转了坐标之后在河中间断开,两侧相差 600 米。 排查思路
百度墨卡托漏了 MCBAND 分段,点位偏出三公里的诊断示意图 017

百度墨卡托漏了 MCBAND 分段,点位偏出三公里

用 lng * 20037508.34 / 180 自己算百度瓦片坐标,结果和百度的瓦片对不上。 排查思路
经纬度只存两位小数,热力图整体错开 1.1 公里的诊断示意图 018

经纬度只存两位小数,热力图整体错开 1.1 公里

数据库字段是 decimal(9,2),存进去的点全被吸到 0.01 度的网格上。 排查思路
纬度 89° 传给墨卡托,Y 值变成 Infinity 后瓦片编号是 NaN的诊断示意图 019

纬度 89° 传给墨卡托,Y 值变成 Infinity 后瓦片编号是 NaN

南极科考站的点一加进去,整个图层就不渲染了,控制台却一声不响。 排查思路
南半球 UTM 少了 1000 万假北,悉尼的 y 变成负数的诊断示意图 020

南半球 UTM 少了 1000 万假北,悉尼的 y 变成负数

同一份投影代码,北半球的点正常,南半球的点 y 全是负的,排序时全跑到最前面。 排查思路
02

加载与显示

15 个案例

白屏、转圈、只画一半、资源加载失败。

地图一片空白,控制台却没报错的诊断示意图 021

地图一片空白,控制台却没报错

代码看起来没问题,库也加载了,页面就是一片白。最难查的一类问题,因为没有任何错误信息。 排查思路
地图在弹窗里显示错位的诊断示意图 022

地图在弹窗里显示错位

地图只在主页面正常,一放进弹窗、抽屉、标签页,就只画左上角一小块,或者整片空白。 排查思路
瓦片 404 或跨域被拦的诊断示意图 023

瓦片 404 或跨域被拦

地图框架加载正常,但底图是一格一格的灰色方块,网络面板里一片红色。 排查思路
20 MB 的 GeoJSON 同步解析,主线程卡了 8 秒的诊断示意图 024

20 MB 的 GeoJSON 同步解析,主线程卡了 8 秒

文件不大,但打开页面后转圈八秒,期间点击任何按钮都没反应。 排查思路
Shapefile 属性表中文全是乱码,几何却完全正常的诊断示意图 025

Shapefile 属性表中文全是乱码,几何却完全正常

边界线画得一丝不差,属性弹窗里的地名却是「鍖椾含甯傚湴鍥炬」。 排查思路
CSV 的经纬度列写反,点全跑到索马里外海的诊断示意图 026

CSV 的经纬度列写反,点全跑到索马里外海

一批北京的点,加载后坐标显示 39.9, 116.4,落点在印度洋。 排查思路
MultiPolygon 少包一层数组,渲染直接报 invalid geometry的诊断示意图 027

MultiPolygon 少包一层数组,渲染直接报 invalid geometry

后端拼的 GeoJSON 在 QGIS 里打不开,前端有时报错、有时什么都不画。 排查思路
WMTS 的 TileMatrix 标识从 0 开始,瓦片整体错一层的诊断示意图 028

WMTS 的 TileMatrix 标识从 0 开始,瓦片整体错一层

图层能显示,但比例尺总比底图大一级,设施点位与影像对不上。 排查思路
GeoServer 把 4326 的数据声明成 4490,图层偏了半米的诊断示意图 029

GeoServer 把 4326 的数据声明成 4490,图层偏了半米

同一份数据直接读文件正常,从 GeoServer 出图就整体平移,差半米,肉眼几乎看不出。 排查思路
geometry 为 null 的要素,让 fitBounds 抛 null is not an object的诊断示意图 030

geometry 为 null 的要素,让 fitBounds 抛 null is not an object

接口里混进两条 geometry 为 null 的记录,整个地图初始化就中断了。 排查思路
TopoJSON 丢了 transform,坐标全变成整数 7823的诊断示意图 031

TopoJSON 丢了 transform,坐标全变成整数 7823

文件从 20 MB 压到 3 MB,转换后却画不出任何东西,坐标是 7823、4210 这样的整数。 排查思路
跨 180° 经线的多边形,被画成横穿整个地球的一条带的诊断示意图 032

跨 180° 经线的多边形,被画成横穿整个地球的一条带

斐济的专属经济区,在地图上变成一条横跨太平洋的细长条,中间还穿透了非洲。 排查思路
缺了 .prj 的 Shapefile,被当成经纬度读进西安以东 500 公里的诊断示意图 033

缺了 .prj 的 Shapefile,被当成经纬度读进西安以东 500 公里

同事只发了 .shp、.shx、.dbf 三个文件,打开后数据跑到非洲西海岸。 排查思路
DBF 字段名超 10 个字符被截断,前端读 properties 全是 undefined的诊断示意图 034

DBF 字段名超 10 个字符被截断,前端读 properties 全是 undefined

数据表里明明有 population_total,导出的 Shapefile 里只剩 population。 排查思路
KML 里的图标写相对路径,加载后全是碎图的诊断示意图 035

KML 里的图标写相对路径,加载后全是碎图

KML 在 Google Earth 里正常,放进网页地图后每个点都变成一个破碎的小图标。 排查思路
03

性能

2 个案例

卡顿、掉帧、首屏慢,以及大数据量下的取舍。

04

服务接入

10 个案例

底图服务、瓦片地址、鉴权与跨域。

接入国内底图要改哪些地方的诊断示意图 038

接入国内底图要改哪些地方

从 OpenStreetMap 换成国内底图,不只是把 URL 换掉。坐标系、Key、协议、配额四处都要动。 排查思路
3D Tiles 加载不出来的诊断示意图 039

3D Tiles 加载不出来

代码没报错,tileset.json 也请求成功了,地球上就是什么都不显示。 排查思路
WMS 一直 502,服务其实还活着的诊断示意图 040

WMS 一直 502,服务其实还活着

直接访问 GeoServer 的 8080 端口一切正常,走 Nginx 就返回 502,刷新几次偶尔又成功。 排查思路
跨域预检被拒,GET 能过 POST 不行的诊断示意图 041

跨域预检被拒,GET 能过 POST 不行

查询瓦片正常,一提交分析任务就报跨域;网络面板里多出一条 OPTIONS 请求,返回 405。 排查思路
数据更新了,切片还是上周的样子的诊断示意图 042

数据更新了,切片还是上周的样子

数据库里新增的道路已经入库,WMS 直连能看到,瓦片服务却还是旧图,局部甚至出现新旧拼接的接缝。 排查思路
代理转发后,WMS 的查询参数全丢了的诊断示意图 043

代理转发后,WMS 的查询参数全丢了

直连 GeoServer 正常,经过公司网关后所有请求都变成“缺少 LAYERS 参数”,服务端日志里看不到 BBOX。 排查思路
SLD 传上去了,地图还是默认灰色的诊断示意图 044

SLD 传上去了,地图还是默认灰色

在 GeoServer 里上传了 SLD,预览页面能看到效果,自己的 WMS 请求出来还是那套默认灰填充。 排查思路
GetCapabilities 要等一分钟,客户端直接超时的诊断示意图 045

GetCapabilities 要等一分钟,客户端直接超时

加载图层树时转圈,最后报“服务不可用”。直接打开能力文档地址,等了 58 秒才出来。 排查思路
HTTPS 页面加载 HTTP 瓦片,全被浏览器拦了的诊断示意图 046

HTTPS 页面加载 HTTP 瓦片,全被浏览器拦了

站点切到 HTTPS 后,底图整片空白,控制台刷满 “Mixed Content” 警告,瓦片一个都没下下来。 排查思路
连接池耗尽,WMS 集体 503的诊断示意图 047

连接池耗尽,WMS 集体 503

早上九点业务高峰,所有图层一起变慢,随后整站返回 503,重启 GeoServer 才能恢复。 排查思路
05

交互

1 个案例

拖动、缩放、弹窗与移动端手势。

06

3D 与 Cesium

9 个案例

三维球、地形、3D Tiles、模型与相机。

Cesium 报 401,ion Token 没生效的诊断示意图 049

Cesium 报 401,ion Token 没生效

地球能出来,底图是黑的,网络面板里所有 api.cesium.com 请求都返回 401。 排查思路
3D Tiles 白模糊成一片白,看不出轮廓的诊断示意图 050

3D Tiles 白模糊成一片白,看不出轮廓

模型加载成功了,相机也对准了,但建筑是一片纯白,和白色底图几乎融在一起,只能靠阴影分辨。 排查思路
模型悬空或陷进地形,差的那几米在哪的诊断示意图 051

模型悬空或陷进地形,差的那几米在哪

坐标填的是地面点,模型却飘在半空十几米;换成另一个视角,又有一半埋进了山体。 排查思路
相机钻到地下,画面只剩一片黑的诊断示意图 052

相机钻到地下,画面只剩一片黑

用户按住右键向上拖,视角越过地平线,屏幕突然全黑,再拖几下地球从另一侧翻出来。 排查思路
地形瓦片加载慢,首屏转了十几秒的诊断示意图 053

地形瓦片加载慢,首屏转了十几秒

影像早就铺满了,地形却一直有锯齿状的空洞,进度条停在一半,请求队列常年两百多条。 排查思路
Entity 上了两千个,帧率掉到 18的诊断示意图 054

Entity 上了两千个,帧率掉到 18

五百个站点时很流畅,加到两千个站点后拖动明显卡顿,性能面板里 update 阶段占了大头。 排查思路
CesiumWidget 尺寸为 0,地球建不出来的诊断示意图 055

CesiumWidget 尺寸为 0,地球建不出来

页面一打开就报错,容器明明写了 width: 100%; height: 100%, 浏览器算出来的却是 0×0。 排查思路
toDataURL 截出来是黑图,Cesium 也一样的诊断示意图 056

toDataURL 截出来是黑图,Cesium 也一样

点击“导出图片”,拿到一张纯黑或全透明的 PNG;同一段代码在别的页面又是正常的。 排查思路
开了泛光后整个场景发白的诊断示意图 057

开了泛光后整个场景发白

想让夜景灯光有一点辉光,结果整屏像蒙了一层雾,建筑边界全糊了,帧率也掉了三分之一。 排查思路
07

three.js 渲染

8 个案例

场景、材质、光照、实例化与拾取。

08

deck.gl 可视化

6 个案例

图层、聚合、坐标与大数量级数据。

09

MapLibre 样式与图层

5 个案例

样式规范、图层表达式与底图接入。

10

Leaflet 容器与图层

5 个案例

容器、图标、图层与插件。

11

OpenLayers 图层

5 个案例

投影、图层、样式与交互。

12

工程化

7 个案例

构建、版本、依赖与部署。

13

安全与合规

2 个案例

坐标系、密钥、数据与许可边界。

14

瓦片

12 个案例

瓦片编号、缓存、404 与跨域。

TMS 的 Y 轴反着数,底图南北颠倒的诊断示意图 096

TMS 的 Y 轴反着数,底图南北颠倒

瓦片全部能加载出来,拼接也严丝合缝,就是整张图上下翻转。 排查思路
瓦片目录从 1 级开始,地图整体放大了一倍的诊断示意图 097

瓦片目录从 1 级开始,地图整体放大了一倍

离线包只有 1~19 级目录,前端按 0 级起算,画面始终比实际大一号,19 级还缺图。 排查思路
天地图瓦片 403,Key 是对的但 Referer 不在白名单的诊断示意图 098

天地图瓦片 403,Key 是对的但 Referer 不在白名单

把瓦片地址贴到浏览器地址栏能打开,放进地图里就全部 403。 排查思路
导出地图为图片时报 canvas tainted,前后排查了两小时的诊断示意图 099

导出地图为图片时报 canvas tainted,前后排查了两小时

截图按钮一点就抛 SecurityError,地图本身显示得好好的。 排查思路
瓦片返回 204 而不是 404,地图上是一片透明白块的诊断示意图 100

瓦片返回 204 而不是 404,地图上是一片透明白块

网络面板里全是 204,看着像「没有错误」,可地图上缺了一大片。 排查思路
瓦片之间出现 1 像素白线,缩放后像蛛网的诊断示意图 101

瓦片之间出现 1 像素白线,缩放后像蛛网

每张瓦片都完整加载了,但拼起来满屏细白线,缩放级别越小越明显。 排查思路
缩放到 17 级直接跳到 19 级,缺的两级全是灰块的诊断示意图 102

缩放到 17 级直接跳到 19 级,缺的两级全是灰块

滚轮滚一下,级别跳过 18 直接到 19,中间两级的地图从来没出现过。 排查思路
七个瓦片子域全配了,浏览器还是只开 6 个连接的诊断示意图 103

七个瓦片子域全配了,浏览器还是只开 6 个连接

子域配了 0 到 7,网络面板里同时进行的请求依然是 6 个,其余全部排队。 排查思路
512 像素的瓦片被按 256 排版,底图模糊又错位的诊断示意图 104

512 像素的瓦片被按 256 排版,底图模糊又错位

换了一份高清瓦片,地图反而变糊,还跟矢量数据差了半个屏幕。 排查思路
百度的瓦片原点在原点偏移处,按 XYZ 算整层偏移的诊断示意图 105

百度的瓦片原点在原点偏移处,按 XYZ 算整层偏移

按 Google 的公式算百度瓦片编号,每个级别都差几十张瓦片,拼出来的图像条带错位。 排查思路
瓦片缓存 30 天不清,改了配色用户看到的还是旧图的诊断示意图 106

瓦片缓存 30 天不清,改了配色用户看到的还是旧图

服务端已经重新切片,本地开发清缓存也没用,用户那边照样是两周前的底图。 排查思路
缩小到 3 级时地图重复了三次,noWrap 没开的诊断示意图 107

缩小到 3 级时地图重复了三次,noWrap 没开

缩到最小级别,屏幕上并排出现三个中国,左右两边还是镜像拼接的。 排查思路
15

样式与渲染

13 个案例

符号、配色、标注与渲染顺序。

样式表达式少了一个 dimension,整层要素都不显示的诊断示意图 108

样式表达式少了一个 dimension,整层要素都不显示

图层加上去了,图例也有,地图上却一个要素都没有,控制台只给了一条警告。 排查思路
多边形的洞方向反了,中间的湖被填满的诊断示意图 109

多边形的洞方向反了,中间的湖被填满

一个带湖的行政区面,渲染后湖面也被涂成了行政区的颜色,卫星底图看不见了。 排查思路
标注挤成一坨,text-allow-overlap 一开就全乱了的诊断示意图 110

标注挤成一坨,text-allow-overlap 一开就全乱了

城市名互相压住,打开允许重叠后,八百个名字同时糊在屏幕上。 排查思路
长地名的后两个字被裁掉,text-max-width 太小的诊断示意图 111

长地名的后两个字被裁掉,text-max-width 太小

「乌鲁木齐高新技术产业开发区」只显示成「乌鲁木齐高新」,后面的字全没了。 排查思路
面图层盖住了线图层,调 zIndex 反而更糟的诊断示意图 112

面图层盖住了线图层,调 zIndex 反而更糟

道路线被行政区面压在下面,设了 zIndex: 999 依旧没变,甚至整条线消失了。 排查思路
两层半透明叠在一起,颜色比预期深了一倍的诊断示意图 113

两层半透明叠在一起,颜色比预期深了一倍

两个 50% 透明的图层叠上去,重叠区看起来像 75% 不透明,设计稿完全对不上。 排查思路
线宽不随缩放变化,放大后像一根头发丝的诊断示意图 114

线宽不随缩放变化,放大后像一根头发丝

12 级时道路像主干道,17 级时同样的道路细得几乎看不见。 排查思路
图钉的针尖没对准坐标,偏了 12 像素的诊断示意图 115

图钉的针尖没对准坐标,偏了 12 像素

点位落在路口,图钉的针尖却指在马路中间,放大到 18 级差出十几米。 排查思路
颜色写成 #1a6fd4cc,老版本浏览器直接忽略的诊断示意图 116

颜色写成 #1a6fd4cc,老版本浏览器直接忽略

同一份样式,Chrome 最新版正常,客户的内嵌浏览器里整个图层透明。 排查思路
filter 里数字和字符串比较,条件永远是 false的诊断示意图 117

filter 里数字和字符串比较,条件永远是 false

明明有 40 个区县人口超过一万,图层上一个都没画出来,也没有报错。 排查思路
标注字体没加载,glyphs 404 导致文字全不显示的诊断示意图 118

标注字体没加载,glyphs 404 导致文字全不显示

图标正常、面正常,只有文字一个都出不来,网络面板里一排 glyphs 请求全是 404。 排查思路
sprite 里没有这个图标名,符号层直接不画的诊断示意图 119

sprite 里没有这个图标名,符号层直接不画

icon-image 写了一个名字,地图上什么都不出现,也没有任何报错。 排查思路
打印出的图比屏幕小一圈,96 与 72 DPI 混用了的诊断示意图 120

打印出的图比屏幕小一圈,96 与 72 DPI 混用了

屏幕上刚好铺满 A4 的地图,打印出来只占左上角四分之三,比例尺也对不上。 排查思路

常见问题

案例里的代码能直接复制使用吗?
可以。每个案例给出的都是最小可运行逻辑,依赖走公开 CDN,没有隐藏的私有包。复制后把容器高度、地图库版本和底图源换成你自己的,就能在本地跑起来。
为什么按现象分类,而不是按库分类?
因为排查时你先看到的是现象,不是库。同一个白屏或偏移,在 Leaflet、OpenLayers、Cesium 里的成因往往相同;按现象组织能一次覆盖多个技术栈。确认是某个库的 API 问题后,再去对应的 API 文档。
手册里没有的问题怎么查?
先找最接近的一条,按它的排查顺序把范围缩小;再回到对应技术栈的 API 文档核对参数和版本;最后用示例页里的最小可运行文件复现,排除业务代码干扰。三步走完,多数问题能定位到具体一两个原因。