echarts自定义地图总结(VUE)

需求：

全国地图中内蒙古地区分为蒙东、蒙西，河北省地区分为河北、冀北，需要自定义地图。

思路：

从json文件上做文章，例如整个中国地图的json里包含各个省的json，各个省包含各个市的json，以此类推，那么将一个省拆分为两个省，理论上来说是可以实现的。

实现：

先分后合

例如实现河北分为河北和冀北：

1、从阿里云datav的范围选择器下载地图json，范围选取所要区分的区域并且下载json格式文件：

链接： DataV.GeoAtlas地理小工具系列

2、选择阿里云datav的边界生成器上传刚下载的河北省json:

得到如下所示包含河北所有地市地图区域：

3、导出冀北范围地市:

勾选下方列表中的承德市、张家口市、唐山市、廊坊市、秦皇岛市（注意有分页），导出冀北json数据（导出的该地图json可作为省地图详情显示）：

PS：下载完成后的文件格式为.geoJson，我直接修改后缀名为.json后暂时无其他问题。

4、现在打开下载好的自定义json发现地市之间有分界线，需求要求在原先的中国地图上以整体来呈现，接下来就要实现合并。想要实现地图区域合并，重点在于地图Json合并。

方法一：

1）进行第3步时不着急导出所选范围地市，而是选择所需合并区域，点击进行合并后再导出：

2）得到整块冀北地图后，导出geoJson：

方法二：

1）编辑地图文件：

打开第三步下载的json格式的地图文件，添加新字段area（字段名称随意）：

2）利用mapshaper 进行地图编辑：https://mapshaper.org/

·点击select上传地图：

·点击import加载地图：

·打开console控制台，利用dissolve命令合并区域并导出编辑完成的地图，

dissolve 'area' -o jibei.json

得到完整冀北地图json文件。

5、剩余河北地图同理。最后将新河北json、新冀北json替换掉原先china地图中的河北json区域即可。

注意：第4步使用方法二时，对编辑替换的地图文件需再次进行修改：将原本的area字段替换成name（在echarts中默认识别name名称），并添加cp字段指定区域的中心点，得到最终效果。

该方法只适用于对已知地市县区域进行划分、合并，若要完全自定义区域可使用阿里云datav边界生成器选点划区域进行操作，或者使用geojson（http://geojson.io）制作所需要的json数据。

Update:

特定企业有自己的区域划分，坐标文件（.shp等）也可以用https://mapshaper.org/导入后，转为JSON文件，但是要注意导出文件略有不同，需要手动修改。

导出：

导出的geojson需要重新整理格式（图一为mapshaper导出，图二为标准的echart用的json）：

echarts自定义地图总结(VUE)相关推荐

vue:echarts自定义地图
前言 echarts有地图,但是echarts的地图只支持到三级(省市区),所以有的时候,我们就需要自己定制化地图准备我们绘制地图前,我们需要地图的点位置,这些有几种方式 1.我们进入http:/ ...
Echarts自定义地图和添加图标
介绍:由于我司在项目中使用到了Echarts,所以我开了Echarts的相关栏目来分享在使用上的经验.这是本栏目的第一篇文章,需要Echarts相关基础,之后会介绍Echarts的基础,需要的朋友可以 ...
echarts中国地图在vue中的使用
1:下载echarts最新版本 yarn add echarts -D 默认最新版本 5.2.2版本在assets文件夹下新建data.json,中国地图需要用到 {"type" ...
echarts自定义地图行政区域
项目有个需求,根据业务区域,做一个区域展示大屏.以往用的一般都是按照行政区域来展示的,这次按业务区域,相比行政区域多了好几个新区域,要把原有区域进行拆分,在网上找了很久,各种办法都不太理想,最后只能手 ...
ECharts自定义地图——行政划分“乡镇级别”地图
百度地图API能够直接划分区级别的行政划分: 如果是在线访问的系统可以参考链接https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618#c ...
echarts自定义地图（想怎么画就怎么画）
echarts提供了全国各省市及区县的js和json文件,但是并没有细化到区域内各街道范围,有时候项目中又有这种需求,领导给予重任,我们又不能轻易拒绝,只能是硬着头皮上了. 今天我们以北京市西城区各街 ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...

echarts自定义地图总结(VUE)

echarts自定义地图总结(VUE)相关推荐

最新文章

热门文章