本文关键词：echarts geo和map混用
做前端可视化这几年，ECharts 算是老搭档了。
但最近有个项目，老板非要在同一个大屏里，既要看全国宏观分布，又要看某个省份的微观细节。
这就尴尬了，因为 ECharts 的 geo 组件和 map 组件，底层逻辑其实不太一样。
很多新手直接上手，结果地图错位、数据对不上，头发都掉了一把。
今天我就掏心窝子聊聊，怎么优雅地解决 echarts geo和map混用 的问题。
先说个真实案例。
上个月有个客户找我救火，他的大屏上，全国地图是 geo 画的，但点击某个省后，弹出的详情地图用的是 map 组件。
问题出在哪？
经纬度坐标系不统一。
geo 用的是标准的 WGS84 坐标系，而很多第三方提供的 map json 数据，可能是经过加密或偏移的。
这就导致，当你试图把 geo 里的数据点，直接映射到 map 上去时，点位全飘了。
有的点飘到了海里，有的点甚至飞到了国外。
客户急得团团转，说这怎么跟领导交代。
其实，解决这个问题的核心，不在于代码多复杂，而在于数据预处理。
我一般建议，不要试图在运行时动态转换坐标，太慢，而且容易出 bug。
最好的办法，是在数据入库前，就把所有数据统一清洗成标准的 WGS84 坐标。
这样，无论是用 geo 还是 map，只要引入对应的 json 文件，点位就能精准重合。
再说说 echarts geo和map混用 时的另一个大坑：系列类型混淆。
有些朋友喜欢在一个 option 里，既写 series: [{ type: 'geo' }]，又写 series: [{ type: 'map' }]。
这当然可以，但要注意，它们共享同一个 coordinateSystem。
如果你没有正确配置 geo 或 map 的 registration，图表渲染就会失败。
我见过最蠢的错误，就是 map 组件没有通过 echarts.registerMap 注册，却直接引用了 name。
结果页面白茫茫一片，查了半天日志，才发现是少了一行注册代码。
还有价格方面，市面上有些所谓的“地图数据服务”，号称提供高清矢量图。
其实很多都是网上扒下来的旧数据，甚至带有版权风险。
我自己一直用的是开源的 GeoJSON 数据，配合自研的清洗脚本。
成本几乎为零，但稳定性极高。
别为了省事去买那些不明来源的数据包，一旦遇到数据源变更，你的项目就得重构，那才是真坑。
最后，分享一个调试小技巧。
在开发 echarts geo和map混用 的场景时，建议先用 console.log 打印出关键数据点的经纬度。
对比一下 json 文件中的边界坐标，看看是否在合理范围内。
如果差距过大，那肯定是坐标系的问题。
这时候，不要慌，去查一下地图数据的来源说明。
大部分问题，都能通过调整 coordinateSystem 的配置项来解决。
总之，做地图可视化，耐心比技术更重要。
别想着走捷径，每一步数据清洗都要扎实。
只有基础打好了，echarts geo和map混用 才能玩得转。
希望这点经验，能帮大家在深夜改 bug 时，少掉几根头发。
如果有其他疑问，欢迎在评论区留言，咱们一起探讨。
