昨天深夜两点，我盯着屏幕上一团乱麻的地图，差点把键盘砸了。不是代码报错，而是那个该死的地图缩放和拖拽，怎么调都跟屎一样卡，或者干脆就是没反应。很多刚入行做数据可视化的兄弟，一上来就抄官网Demo，结果发现一放大地图就糊，一拖拽就抖，心里那个急啊。今天我不讲那些虚头巴脑的理论，就聊聊我踩过的坑，怎么让 echarts geo roam 真正跑起来，而且跑得丝滑。
首先，你得明白一个道理，echarts 的 geo 组件和 series 里的 map 是不一样的。geo 是底图，series 是数据层。很多新手把 roam 属性直接扔给 series，结果发现地图根本动不了，或者动了一下就崩。记住， roam 这个属性，主要是给 geo 组件用的，或者是给 series 类型是 'map' 的时候用的。如果你用的是 geo 加 scatter 这种组合，那 roam 必须写在 geo 里。
我有个客户，做物流轨迹的，地图上有几千个点。他一开始没优化，结果手机上一看，手指刚碰上去，地图就卡成 PPT。后来我让他检查配置，发现他没开 geo 的 roam，或者开了但没配好。正确的姿势是这样的：在 geo 对象里，加上 roam: true。别小看这俩字，这是开启缩放和平移的钥匙。但是，光开还不够，你得考虑性能。
比如，你可以设置 zoomScale: 0.2，这样缩放的时候不会一下子缩得太快，体验会好很多。还有 center 和 zoom，这两个属性决定了地图初始显示的位置和大小。如果你不设置 center，地图可能会默认显示在左上角或者某个奇怪的地方，用户进来一脸懵逼。我通常喜欢把 center 设为 [104.114129, 37.550379]，这是中国的大致中心，看着舒服。
再说说那个让人头疼的缩放层级问题。有时候地图放大到一定程度，文字就看不清了，或者背景图就没了。这时候，你可以尝试设置 map 的 register 方式，确保你用的地图数据是完整的。有些在线地图服务，比如高德或者百度的，需要申请 Key，而且有时候跨域问题会让你怀疑人生。这时候，本地加载 GeoJSON 文件是个好办法，虽然加载速度慢点，但稳定啊。
我还遇到过一种情况，就是地图拖拽的时候，边缘会有黑边，或者拖拽后地图回弹。这是因为 roam 的范围没限制好。你可以设置 scaleLimit，比如 min: 1, max: 20，这样用户就不能无限缩小或者放大，避免地图变成一团马赛克。这个细节，很多教程里都不提，但实际项目中特别重要。
另外，别忽略了样式。geo 的 itemStyle 里的 areaColor，如果设得太深，地图放大后看不清细节。我一般用浅灰色，比如 #eee，然后 hover 的时候变亮，这样用户知道当前选中的是哪个区域。还有 emphasis 状态，一定要配，不然用户交互的时候没反馈，会觉得这个地图是死的。
最后，也是最重要的一点，测试！测试！测试！别只在 Chrome 上看，去手机上看，去 Safari 上看，去 IE 上看（虽然 IE 已经快入土了，但有些国企客户还在用）。不同浏览器对 canvas 的支持不一样，有时候在 Chrome 上好好的，到了 Edge 上就飘了。我上次就因为这个，被客户骂了一顿，说地图在 iPad 上根本点不动。后来发现是 touch 事件没处理好，加了个 preventDefault 就好了。
总之，echarts geo roam 不是个简单的开关，它涉及到性能、交互、样式等多个方面。别指望复制粘贴就能搞定，得多试，多调。希望这些经验能帮你们少走点弯路，早点下班。毕竟，代码是写不完的，但生活是自己的。
本文关键词：echarts geo roam
