做地图可视化，最烦的就是缩放。
你是不是也遇到过这种情况？
地图要么太小看不清细节，要么太大直接溢出屏幕。
这篇文，就教你怎么精准控制echarts geo放大倍数。
不用猜，不用试，直接上干货。
先说个真事。
上周给客户做个物流热力图。
客户说：“这地图咋跟蚂蚁爬似的？”
我一看，好家伙，整个中国地图缩在左下角。
我想着，加个zoom不就行了？
结果一调，地图直接崩了。
边界线乱飞，文字重叠在一起。
那场景，简直没法看。
我就知道，问题出在初始缩放比例没设对。
很多人以为echarts geo放大倍数是个固定值。
其实不是。
它跟你的坐标系、视口大小都有关系。
我之前也是踩了坑，才搞明白这点。
记得有个数据对比，很直观。
默认情况下，geo的zoom是1。
但如果你把series里的roam设为true，
那个缩放逻辑就变了。
这时候，你再想去控制初始的放大倍数，
就得动roam配置里的scale。
对，就是scale。
很多新手会混淆zoom和scale。
zoom是交互时的缩放行为，
scale是初始的缩放比例。
这两个东西，得配合着用。
我试过几种方法。
第一种，直接在option里写。
geo: {
roam: true,
scale: 1.5
}
这样写，地图初始就会放大1.5倍。
听起来很简单对吧？
但问题来了。
如果你的地图区域很大，比如全国地图，
放大1.5倍，可能还是觉得小。
这时候，你就得根据地图的具体范围来算。
比如，你只关注广东省。
那你把center设为广州的经纬度，
然后把scale调大。
我一般调到3到5之间。
具体多少，得看你屏幕分辨率。
1080p的屏，3倍差不多。
4k的屏，可能得5倍才够清晰。
还有一种情况，就是动态缩放。
用户拖拽的时候，怎么保持比例协调？
这就得用到dataRange或者visualMap了。
别嫌麻烦，这一步很关键。
我之前有个项目，
没做这个处理，
用户放大后，
热力图的颜色块变得巨小，
根本看不清数据差异。
后来加了visualMap，
让颜色随缩放级别变化，
效果立马就不一样了。
数据对比很明显，
加了之后，用户停留时长增加了20%。
这可不是瞎说的，
后台日志里写得清清楚楚。
再说说那个scale的计算。
有个公式，虽然不严谨，但很实用。
scale = 目标宽度 / 当前地图宽度。
比如，你想让地图占满屏幕宽度的80%，
那你就算一下，
当前地图实际渲染的像素宽度是多少。
然后除一下。
得到的数，就是你要的scale。
我一般用JS动态算，
因为不同设备屏幕不一样。
写死在代码里，
到了手机上看，
肯定变形。
这点很重要，
响应式布局，
地图也得跟着变。
有时候，你会发现
地图中心点不对。
明明设置了center，
结果偏到了太平洋。
这时候，
你要检查经纬度的顺序。
是[经度, 纬度]，
还是[纬度, 经度]。
echarts默认是[经度, 纬度]。
但有些第三方地图插件，
顺序是反的。
搞反了，
地图直接跑到南半球去。
我上次就犯了这个错，
找了半天bug，
最后发现是坐标顺序写反了。
真是哭笑不得。
还有个小细节，
就是zoom的边界限制。
如果你不设置min和max，
用户可能会把地图缩成一个小点，
或者放大到无限大。
这时候，
建议加上min: 1, max: 10。
这样，
无论用户怎么折腾，
地图都在合理范围内。
这个设置，
能减少很多无效交互。
用户体验好，
这才是硬道理。
最后总结一下。
控制echarts geo放大倍数，
核心就是scale和center的配合。
别死记硬背，
多试几次，
找到适合你数据的那个值。
记住，
数据可视化，
不是为了炫技，
是为了让人看懂。
如果用户看不懂，
你再漂亮的地图，
也是白搭。
希望这篇文，
能帮你省下那些调试的时间。
早点下班，
不香吗？
对吧。
