当前位置: 首页 > Web前端 > HTML

echarts地图绘制了浙江省市县乡镇多级联动边界钻取最新geojson数据文件,获取和更新

时间:2023-03-28 00:10:24 HTML

ECharts地图展示ECharts支持地理坐标的展示。特地提供了一个geo组件,在setOption选项中提供geo配置可以显示地图。option.geo配置中有一个map属性,其值为通过echarts.registerMap("name",geojson)注册的name值,关联对应的geojson数据文件;注册不同名字的geojson地图数据,然后修改选项.geo.map和regions,可以切换显示不同的地图。具体可以参考官方文档:https://echarts.apache.org/zh/option.html#geoGeoJSON数据文件获取阿里云的DataV。GeoAtlas可以在线获取数据,但是数据比较旧(2021.5更新)),截至2022年12月9日一年半未更新。鉴于浙江省多个区县变化调整,不建议使用DataV.GeoAtlas数据。去AreaCity-JsSpider-StatsGov开源库下载新的geojson数据,包括四级分区数据、三级省市坐标界线数据、乡镇级坐标界线数据:在线预览下载(Gitee):https://xiangyuecn.gitee.io/areacity-jsspider-statsgov/assets/geo-echarts.html(提供ECharts+高德地图四级下钻代码)开源库(GitHub):https://github.com/xiangyuecn/AreaCity-JsSpider-StatsGov一般一个月更新一次(直接从高德同步,忙的时候会比较久)。下载的数据是最新的csv文件。同时下载开源库提供的转换工具。工具支持将csv数据转换成:shp、geojson、sql、导入数据库、坐标系转换,功能丰富,我们只需要转换成geojson即可。转换后的geojson是一个很大的文件,里面包含了全国各省市的所有数据。我们在ECharts中一般使用的是拆分文件,一个区县一个文件。我们在工具的高级功能中将这个大文件拆分成一个小文件。点击工具的高级功能,切换到geojson拆分功能,按照省市县拆分文件。如果我们需要浙江省的数据,复制浙江省下面的文件即可。.一般每年区县都会有变化,所以需要及时更新数据。建议至少每年更新一次数据。更新时,按照步骤重新下载最新数据,再次操作即可。在ECharts中绘制浙江省的数据我们得到浙江省的geojson文件后,里面的每个市、区都有对应的json文件。我们根据要展示的地方加载对应的json文件,然后通过echarts.registerMap("City"+cityid,geojson)注册地图。然后更新echarts实例的option.geo.map和region,在echarts中显示geojson地图。将点击事件绑定到地图。当点击地图上的某个城市时,重复以上步骤,加载下一层json文件,注册,再次显示;这样就可以实现多层次的下钻。放一张浙江杭州的geojson效果图,更直观:相关代码可以参考这个demo页面,实现了ECharts地图的四级下钻和高德地图的绘图显示。前端源代码在页面底部。不过这个demo太复杂了,用copy代码不太方便。过几天我会专门写一篇文章介绍ECharts地图代码的编写,敬请期待~【完】