echart中的geo地图数据加载失败？老鸟教你三步搞定坐标映射

搞地图可视化最头疼的不是画线，是坐标对不上。你明明给了经纬度，结果点在太平洋里，或者干脆不显示，那种抓狂谁懂？别急着骂代码，多半是geo配置没搞对。今天就把我踩过的坑全掏出来，照着做，保证你的地图能跑起来。

第一步，搞清坐标系。这是90%的人翻车的地方。echart里的geo默认用的是墨卡托投影或者地理坐标系，但很多第三方地图数据，比如高德、百度，或者是某些老旧的GIS数据，用的可能是投影坐标或者特定的EPSG编码。如果你直接拿百度的坐标往echart里塞，位置肯定偏。怎么解决？去查你数据的来源。如果是标准的WGS84经纬度，直接扔进去就行。如果是GCJ02或者BD09，别硬刚，找个转换工具预处理一下数据，或者在echart里用registerMap注册自定义地图时，确保数据源和配置匹配。记住，坐标一致性是底线，别偷懒。

第二步，注册地图json。很多人喜欢用在线的geojson文件，觉得方便。但在生产环境，在线文件经常挂，或者跨域报错。最稳妥的办法是把geojson下载到本地。去阿里云DataV或者echart官方示例里找个你需要的省份或城市json，下载下来。然后在代码里用echarts.registerMap('china', jsonData)注册。这里有个细节，json里的name字段必须和你series里的name完全一致，包括空格和标点。差一个标点，那个省就隐身了。我上次就因为多了个全角空格，找了半天bug，差点把键盘砸了。

第三步，配置series里的type和map。在option里，series的type一定要设为'map'，map属性填你刚才注册的名称，比如'map: "china"'。这时候，如果你发现地图出来了，但是数据没显示，或者颜色不对，检查data数组。确保data里的每一项都有name和value。name对应json里的区域名，value是数值。如果数据量很大，别全塞进去，先拿几个测试点。比如北京、上海，看看能不能高亮。

再说说常见的坑。有些朋友喜欢用散点图叠加在地图上，这时候要注意，散点图的坐标如果是经纬度，需要在series里设置coordinateSystem: 'geo'。如果你用了visualMap，记得把visualMap的inRange和series里的itemStyle关联起来，不然颜色不会随数据变化。还有，geo组件里的roam属性，设为true可以缩放和平移，这对用户体验很重要，别省这个配置。

另外，加载geojson的时候，如果数据太大，浏览器会卡。这时候可以用web worker异步处理，或者把json压缩。别小看这一步，数据量大时，加载时间差几秒，用户可能就直接关页面了。我有个项目，因为geojson没压缩，首屏加载花了5秒，转化率直接掉了一半。后来改成gzip压缩，秒开。

最后，调试的时候，打开浏览器控制台，看Network面板，geojson请求有没有404。如果有，路径肯定错了。看Console面板，有没有语法错误。geojson格式要求很严，多一个逗号少一个括号都会报错。用JSONlint校验一下你的json文件，能省不少时间。

echart中的 geo 功能强大，但细节决定成败。别指望复制粘贴就能完美运行，多看看文档，多试错。特别是处理复杂数据时，耐心点。把坐标搞对，把json注册好，把series配齐，你的地图就能动起来。遇到报错别慌，一步步排查，总能解决。

本文关键词：echart中的 geo