内容:echarts map多个geo
做这行七年了，真见过太多人在这上面栽跟头。
特别是搞echarts map多个geo的时候。
很多新手一上来就懵，为啥地图重叠了？
为啥颜色对不上？
我当年也踩过坑，今天不整虚的，直接上干货。
先说个真实案例。
上个月有个兄弟找我，说他的全国地图，每个省颜色都不一样，但点进去某个省，里面的区县地图又乱了。
他用了两套geojson，一套全国，一套省级。
结果就是echarts map多个geo渲染的时候，坐标轴对不齐。
数据量一大，浏览器直接卡成PPT。
这就是典型的思路错了。
你以为多搞几个geo对象就能解决？
天真。
ECharts底层是SVG或者Canvas，它不支持你在一个series里放两个完全独立的geojson，除非你处理得极其精细。
我之前带过一个实习生，他试图用两个series，一个放全国轮廓，一个放省份填充。
结果呢？
省份的边界线和全国的边界线，因为精度问题，哪怕只差了0.001，显示出来就有缝隙。
那缝隙，在手机上看着特别别扭，像地图裂开了。
后来怎么解决的？
别折腾echarts map多个geo了。
用“融合”的思路。
把你需要展示的省份，从全国地图里单独抠出来，或者重新生成一个只包含这几个省份的geojson。
这样，你只需要一个series，一个geo对象。
数据映射的时候，通过data里的name去匹配。
比如，你要展示广东和浙江。
你就准备一个只有这两个省的geojson。
然后series里的data，只填这两个省的数据。
其他的省，不传数据，或者传null。
这样渲染出来的地图，干净利落，没有重叠，没有缝隙。
而且性能提升不止一倍。
再说说颜色。
很多人问，为什么echarts map多个geo配置里，visualMap不管用？
因为visualMap是针对series里的data的。
如果你用了多个geo，或者geojson加载不同步，visualMap就会失效。
我的经验是，统一数据源。
不管你要展示多少个地区，尽量把它们放在同一个数据集里。
通过itemStyle的emphasis和normal来区分状态。
别指望靠多个geo对象来差异化显示，那太累，还容易出bug。
还有个细节，坐标转换。
有时候你拿到的geojson，坐标是经纬度，有时候是投影坐标。
如果混着用，地图就会飘。
我之前遇到一个案子，客户给的地图数据，有的省是WGS84，有的是GCJ02。
直接扔进echarts，地图直接错位，广东跑到了黑龙江旁边。
查了两天才发现这个问题。
所以，在引入echarts map多个geo之前，先清洗数据。
确保所有geojson的坐标系一致。
这是底线。
最后，给个建议。
别为了炫技，非要搞复杂的嵌套。
简单，往往最有效。
如果你的业务场景真的需要展示多层级，比如全国-省-市。
那就用联动。
点击全国，加载省地图；点击省，加载市地图。
通过dispatchAction去触发事件。
而不是试图在一个画布里塞进所有层级的geo。
那样做，除了增加开发难度，没有任何好处。
记住，echarts map多个geo不是万能钥匙。
它是工具，不是目的。
解决业务问题才是目的。
别被工具绑架了。
我见过太多人，为了用echarts map多个geo而用echarts map多个geo。
结果代码写得像天书，维护起来想哭。
真诚建议，少即是多。
把基础打牢，把数据理顺。
比研究那些花里胡哨的配置重要得多。
希望这点经验，能帮你省点头发。
毕竟，发际线也是成本啊。
