echart地图合并，并取消边框

逃离我推掉我的手 2023-01-20 15:58 278阅读 0赞

原文地址：[https://blog.csdn.net/qq\_19816325/article/details/108520451][https_blog.csdn.net_qq_19816325_article_details_108520451]  
**问题**  
echart地图区域合并，并不出现边框  
按照之前的经验，每个区域都有自己的json数组，如果要调整区域划分，比如把A拆成AB或者把AB合并，只需要调整该区域的经纬度数组即可，但是会有个问题，合并之后会有边框，比如  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70_pic_center]  
**想要解决这种问题，参考了大神帖子，现在记录下。**  
需要两个网站  
1、获取地图json数据，阿里地图选择器[http://datav.aliyun.com/tools/atlas/\#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5][http_datav.aliyun.com_tools_atlas_lat_30.332329214580188_lng_106.72278672066881_zoom_3.5]  
2、地图文件编辑mapshaper [https://mapshaper.org/][https_mapshaper.org]

**1. 修改要处理的文件**

首先将你要合并的地图文件，添加字段标识，name同级添加，名字自定义比如“area”。  
举个栗子，我要将**崇明区**和**长兴区**合并成一个新区域叫**新区**，那么就在两个区域下面添加 `"area": "新区",`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70]

**2.将要处理的json上传到mapshaper**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 1]  
点击console打开控制台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 2]  
输入执行命令生成新json文件并输出

dissolve 'area' -o result.json

dissolve：合并命令  
‘area’：步骤一取得别名  
\-o：固定  
result.json生成的文件，可自定义命名

3.修改最终json  
生成完的json文件只有area，并没有name，但是地图里面是根据name展示的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 3]  
用编辑器将所有的**area**替换成**name**  
然后将新的json文件引入即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 4]

[https_blog.csdn.net_qq_19816325_article_details_108520451]: https://blog.csdn.net/qq_19816325/article/details/108520451
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/dbe68f00d69b48ea957cdba6f739b776.png
[http_datav.aliyun.com_tools_atlas_lat_30.332329214580188_lng_106.72278672066881_zoom_3.5]: http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
[https_mapshaper.org]: https://mapshaper.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70]: /images/20221021/bfcb73d63a3943108a5ca7cae96166fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 1]: /images/20221021/7be1b6daf2e943149293752061904f23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 2]: /images/20221021/8cd1134536aa4679b5c2f7d1b22ce1ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 3]: /images/20221021/b477c360285e47b394984ed92400ba56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70 4]: /images/20221021/43e04557c01c415c86d919371ed4c713.png