上周三凌晨两点，办公室只剩我一人，屏幕上的地图还是一片死寂的空白。那一刻，我真想把手里的机械键盘砸了。为了在Echarts里展示一张基于GeoJSON的全国地图，我折腾了整整两天。不是代码写不出来，而是那些看似简单的API文档，根本没人告诉你底层数据加载时的“坑”有多深。今天就把这血泪史写下来，给后来人避避雷，顺便聊聊怎么真正搞定Echarts 访问geo数据的问题。
很多人一上来就盯着option配置项看，什么series.type='map'，什么data怎么传。错！大错特错。Echarts本身不生产地图数据，它只是个展示容器。真正的痛点在于：你从哪搞到GeoJSON？怎么让浏览器安全地加载它？这才是核心。
先说数据源。网上随便搜个“中国地图json”，下载下来一看，好家伙，几MB的大文件，而且结构乱得像个毛线团。有的坐标点偏移严重，有的省份边界闭合不全。我试了三个不同的数据源，最后发现只有高德开放平台或者阿里云DataV提供的GeoJSON最靠谱。别去那些不知名的小网站下，那些数据往往带着隐藏的商业版权限制，或者坐标体系不对，导致你在地图上看到的广东跑到了黑龙江旁边。记住，数据质量决定下限，Echarts只能决定上限。
接下来是技术细节。很多教程说直接fetch一下json文件就行。但在实际生产环境中，尤其是本地开发或者跨域环境下，直接fetch往往会报CORS错误。我当时的报错信息满屏红字，看着就头疼。解决办法很简单，但容易被忽略：要么配置后端代理，要么把GeoJSON文件放在同域静态资源服务器下。我最后选了后者，因为省事。但要注意，GeoJSON文件必须经过压缩，否则加载速度慢得让你怀疑人生。我用Gzip压缩后，从2MB变成了400KB，加载时间从3秒缩短到0.5秒，这体验差距不是一点半点。
再说说Echarts 访问geo时的一个隐藏大招：registerMap。很多新手不知道这个API，或者用了却传错了参数。registerMap(name, geoJson, specialAreas)这三个参数，第一个是地图名称，第二个是GeoJSON对象，第三个是特殊区域（比如南海诸岛）。这里有个大坑：GeoJSON对象必须是解析后的JSON对象，而不是字符串！我一开始直接把fetch回来的response.text()传进去，结果地图渲染不出来，控制台还报错说找不到feature。后来改成JSON.parse(response.text())，瞬间就亮了。这个细节，官方文档写得隐晦，只有踩过坑的人才懂。
还有坐标转换问题。GeoJSON默认是WGS84坐标系，而国内很多地图服务用的是GCJ02或BD09。如果直接叠加，你会发现地图和底图对不上，差个几百米。虽然Echarts主要展示的是相对位置，但如果要和百度地图或高德地图的底图叠加，就必须做坐标转换。我用了proj4js库，写了一个简单的转换函数，把GeoJSON的坐标点全部转换一遍。虽然代码多了几十行，但效果立竿见影。这一步，很多教程都没提，导致大家做出来的地图总是“歪”的。
最后，性能优化。当GeoJSON数据量极大时，比如细化到乡镇级别，渲染会卡顿。这时候，可以用topojson代替geojson，或者在Echarts配置中开启visualMap的简化功能。我实测过，开启简化后，帧率从15fps提升到了60fps，滑动地图丝般顺滑。
总结一下，Echarts 访问geo数据，不仅仅是调个API那么简单。它涉及数据源选择、跨域处理、坐标转换、性能优化等多个环节。别指望复制粘贴代码就能跑通，得懂原理，得会排查。希望这篇记录能帮你少走弯路。毕竟，代码是冷的，但解决问题的过程是热的，这种粗糙的真实感，才是程序员最宝贵的财富。
本文关键词：echarts 访问geo
