基于echart青海省地图资源的修改体验

基于echart青海省地图资源的修改体验

最近老用echart做首页展示地图，本来都还很正常，却遇到了奇怪的甲方需求。
在青海省下8个同级行政区内，把唐古拉山镇部分独立划分出来和这8个平级。
什么也不说先上图,

这是原版青海echart地图，可以看到划分的行政区域只有8个，地图中的海西自治州板块，如图中箭头所示，海西地区虽然被玉树分成了两个板块，但是它仍属于一个地区，鼠标移入高亮效果和值都是触发的一个地方。
但是某天博主在查看UI和需求更新后，发现地图和其它数据里，居然变成了9个区域，检查了半天才发现是海西另一部分独立成了一个地区，博主第一感觉便是需求和UI不知道，在看了地图效果后，强行把地图化成9块好看，这是博主能忍？果断度娘青海省地图，
对UI晓之以情，动之以理，给她们将的明明白白青海省下的第一级别行政机构总共8个，她们说的地方是归属于海西自治州，并不是单独的行政级别，苦口婆心的讲了半天，眼看着UI快被我说动~需求却来了一句让我无法动容的话：甲方要求这样做的！！！
好吧，我只能说，甲方的都是爸爸（手动滑稽）！！
事情一下就到了不可商量的余地，再苦再难也只有硬着头皮上了，这时候刚接触echart地图不久，总觉得这个事情很难，特别是这是别人家的数据包呀，我只是引用了进来，管我什么事，不过埋怨了过后还是只有想办法，而且谁让我打工的呀。
研究了半天，想起刚开始用echart map的时候，那个时候用的原声js写项目，为了把echart引入项目，找了半天的数据包，才下载到了免费的数据，为了不然半天白费，还专门研究了下JSON数据格式，虽然看了半天什么也没有看懂。这时候想起既然整个地图数据是echart画出来的，那我应该可以修改底层绘画的数据来修改，而且此处的地图看起来是分割开的，做数据的人应该会把绘画的数据分开，好动手找数据（之气用原生引入echart时候，需要下载json数据包或者js数据包，那个时候至少会接触下json数据，才大致有个影像，现在是用了vue写项目，对地图的引入是傻瓜式的引入）
import sc from ‘echarts/map/json/province/qinghai’ //引入
echarts.registerMap(‘qinghai’, sc) //数据注册
引入部分网上到处都是，我就不贴完了，
使用VUE注册不会有接触数据的方式，这也是它的一个特点和诟病，可以只用不理解，对于初学开发或者快速开发很好用，很便利，但是却不利于个人成长，用熟悉了你只是代码的搬运工，如果遇到特殊的界面需求或者对组件进行定制优化的时候，就歇菜了，废话不多说，import 引入数据后，registerMAP注册前，我可以拦截并修改数据，首先对sc进行console

发现这个一个对象，地图数据应该在features里，并且里面有8数据，应该是地图的8个区域
找到海西的数据，此时发现它有4个属性值，这个时候就要发挥分析能力了，第一眼看到的是id属性，主要这个太显眼，是区分数据的辨识，就应该联想到，移入地图触发地图tooltip 的时候，海西两个板块触发，应该和id有关，这个到简单，反正id经常用来辨识唯一性，不管它是不是控制触发器的，都得修改，不然哪里报告错就头疼；接着第二眼看到的是"海西蒙古族藏族自治州"，这么明显，控制地图名字没跑了，把propertied点开一看
有三个属性，children感觉我们用不到，name很明显是区域块的名字，至于省的一个cp，
是一个数组，地图用多了的直觉，这个应该是给名字定位的坐标，尝试修改了下果然是。
文章讲到这里，发现最关键的部分还是没有找到，我们要找地图的绘图数据，如果别人做好了，那就一切都好，想办法独立出来，如果数据全都在一起，那就喔嚯了~删库跑路吧，这时候还剩最后一个没有展开的对象，geometry，依稀记着是几何的意思，患者激动紧张的心情，点开了它
居然还是对象，果断又分别展开，发现终于是数组了，而且每个对象里有两个数据，瞬间心情澎湃，感谢cctv，成都tv，不过转念一想，我还不能高兴这么早，万一其它的地区里，这个对象也是2个，那就~~又得删库跑路了，怀揣着比刚才更加忐忑的心情，又点开一个数据

当发现只有一个数据的时候，又疯狂的点开其它地区，发现都是1个，这下悬着的心终于落地了。
查了下有道，coordinates 是坐标的意思，那这个是绘制数据没跑了，点开后一大串的数据，这里也用不着研究，另一个单词查不出来，应该是程序员造词，点开后发现是很简洁的一个两值数组，再看看encodeOffsets的字面意思，编码坐标，或者编码偏移，猜测是地图每个区域的位置，这里博主就没有去修改测试了，有兴趣的同学可以自己尝试修改，研究出来作用。
接着我们之前的将，发现地图数据coordinates是两个数组后，果然和之前猜测的一样，做地图数据的人是分开画的，这里不得不感谢画图的前辈，造轮子的时候还未后人考虑呢，谢谢了~
接着分析到这里思路就清晰了
首先尝试对海西的坐标数组进行 shift或者pop操作，果不其然，删掉一个元素后，地图就缺了一块，如下图，思路是对的，接下来的就简单了

只需要将海西的数据复制一份，推入它本身成为第8个数据，然后分别将第7个数据的coordinates 删除一个数组，将第8个数据coordinates 删除另一个数组，并把第8个数据的id，properties全修改了，应该就大公告成了
注意：这里有个注意事项一定要注意，在对第7个数据进行复制并再推入的时候，一定要考虑深复制，浅复制的事情，如果进行浅复制，则会出现修改7或8其中一个数据的时候，另一个数据也会变，是肯定又问题的
这里我用的扁平化的方法：（需要复制的数据JSON化，再将反JSON化的数组对象赋值给一个数组，最终再将这个新造的数据推入原数据）
var scArr = JSON.parse(JSON.stringify(sc.features[7]))
sc.features.push(scArr)
操作到这里，剩下的就简单了，只是对对象属性进行更改，我就不一一讲究，直接上代码
sc.features[7].geometry.coordinates.shift()
sc.features[7].geometry.encodeOffsets.shift()
sc.features[8].geometry.coordinates.pop()
sc.features[8].geometry.encodeOffsets.pop()
sc.features[8].id = ‘632900’
sc.features[8].properties.name = ‘格尔木’
sc.features[8].properties.cp = [91.2, 34]
sc.features[7].properties.cp = [95.370785, 37]
sc.features[6].properties.cp = [95, 34.5]
sc.features[5].properties.cp = [99.742143, 33.9736]
sc.features[4].properties.cp = [100.319542, 35.880353]
sc.features[3].properties.cp = [101.559988, 35.017744]
sc.features[2].properties.cp = [100.401059, 37.659435]
sc.features[1].properties.cp = [102.30327, 36.302916]
sc.features[0].properties.cp = [101.578916, 36.923178]
前面部分是对新增加的数组进行操作，后面部分是顺带调整了地图名字的位置

bingo 检查测试了下没有问题，终于把这一板块独立出来了

经验分享给大家~~原创作品，转载记得著名出处哟~
作者：高数定积分