做地图开发久了，你会发现最折磨人的不是算法，而是数据。

特别是处理 geo json 这种格式，看着挺标准，实际上坑多得让人想砸键盘。

很多新手上来就百度教程，复制粘贴代码，结果一跑，地图白屏，或者点位置全乱套。

今天我不讲那些虚的理论，直接说我在项目里踩过的雷，以及怎么填坑。

先说个真实案例。

上周有个客户拿来一堆 Excel 表格，说里面有经纬度，让我转成 geo json 给他们做可视化。

我一看，好家伙，经度和纬度混在一起，有的带括号，有的不带，还有的坐标轴反了。

这种数据直接丢进前端，必死无疑。

所以第一步，别急着写代码，先检查数据源。

你要确认你的数据是不是标准的 WGS84 坐标系。

很多国内的老系统用的是 GCJ02 甚至 BD09，直接当成 WGS84 用，地图上偏差能有几百米。

这一步搞错，后面全白搭。

第二步，数据清洗。

geo json 对格式要求极严，少一个逗号，多一个括号，解析器直接报错。

我习惯用 Python 的 pandas 库先处理一下。

把经纬度列提取出来，确保它们是浮点数，不是字符串。

然后构建 Feature 对象。

注意，geometry 里的 coordinates 是个数组，而且顺序必须是 [经度, 纬度]。

千万别写成 [纬度, 经度]，虽然数学上没问题，但地图引擎会把你带偏。

第三步，校验格式。

别信自己的眼睛，要信工具。

网上有很多 geo json validator，把生成的文件扔进去跑一遍。

如果有错误，它会告诉你哪一行缺了逗号。

这时候别慌，打开编辑器，找到对应位置，补上就行。

这里有个小细节，很多人忽略。

如果你的数据量很大，比如几十万个点，生成的 geo json 文件会非常大。

直接加载到前端，浏览器直接卡死。

这时候你需要做简化处理。

用 Douglas-Peucker 算法简化多边形，或者用 turf.js 在客户端做实时简化。

这样既能保留大致形状，又能保证性能。

第四步，前端渲染。

我用过 Leaflet，也用过 Mapbox GL JS。

Leaflet 适合简单展示，加载快，兼容性好。

Mapbox 效果好，但贵，而且对数据格式要求更严。

不管用哪个库，加载 geo json 的方法都差不多。

fetch 请求拿到数据，然后 addSource，addLayer。

这里有个坑，就是样式配置。

很多人不知道 fill-opacity 和 stroke-opacity 的区别。

如果不设置 fill-opacity，多边形内部是实心的，看起来黑乎乎一片，分不清边界。

一定要调低填充透明度，比如 0.3，这样叠加效果才好看。

第五步，交互处理。

光看不够，还得能点。

给 layer 加上 click 事件。

event.properties 里存的是你的业务数据，比如名称、ID、描述。

把这些信息弹窗显示出来。

注意，弹窗内容不要直接渲染 HTML，防止 XSS 攻击。

用 textContent 或者转义一下。

最后，说点心里话。

做地理信息开发，耐心比技术更重要。

数据清洗往往占整个项目 70% 的时间。

别嫌麻烦，前期省下的时间，后期都要加倍还回来。

还有，记得备份你的原始数据。

一旦处理出错，还能从头再来。

现在市面上有些工具号称一键转换，但我建议你自己动手写一遍转换逻辑。

只有理解了底层结构，遇到报错才能快速定位。

geo json 虽然标准，但现实中的数据千奇百怪。

你需要做的，就是把这些杂乱无章的数据，整理成机器能读懂的语言。

这个过程很枯燥，但看到地图上的数据动起来，那种成就感也是真的。

希望这些经验能帮你少走弯路。

如果有遇到具体的报错，别急着问人，先看看控制台，再查查文档。

大部分问题，答案都在错误信息里。

加油吧，同行们。