Echarts地图下钻—一个案例+PBF文件拆分工具

echarts-drill-down

预览地址
项目地址

项目简介

  • 本项目提供了一个echarts下钻到市级区域的示例(精度到区县一级)
  • 同时支持通过命令直接生成中国边界线GeoGson文件,中国地图GeoJson文件(精度包含省、市、区县)以及按省份(名称、code)划分的省级GeoJson文件市级GeoJson文件,源文件来源于AntV L7 GISDATA页面使用的pdf文件
  • 行政区划代码依赖province-city-china

项目缘由

最近遇到一个需要离线地图下钻的场景,之前倒也是做过,不过只下钻到省一级,功能很简单。所以一开始遇到这个需求的时候一口应下,想着无非是GeoJson数据的问题。 在网上找了一阵,当然也发现了很多在线的Json/GeoJson数据,也发现了echarts-map-demo这个开源项目,到这以为任务就完成了。

不过全量下载数据后发现一些问题,首先是直辖市和港澳台缺少市一级的数据(在我们之前的方案中,一般来说直辖市我们会模拟一个市辖区来对齐其他省份的市一级)。

其次部分省份的市级数据也是有缺失的,例如:

当然我可以在这个项目提供的网站上点击地图对应的区域然后下载单个文件,但是这样需要一个一个单独下载的话我直接通过CDN或其他资源下载或者写个脚本下载保存也是一样的,比如下面这个网站上的数据就很全。

五级区划查询与下载

调研了几个小时,无奈没有完全符合需求又下载简单的数据(可能在某些网友的网盘里正躺着),想了一下这个还算挺常见的需求,于是我打算写一个能拆分PBF文件的工具,然后想着既然拆分工具都写了直接再写个案例得了,所以才有了本项目。

目前只下钻到区县级,不过只要有PBF文件,微调抽取命令代码想精确到街道一级也是很快就能搞定的。

启动

javascript 复制代码
* 安装依赖
pnpm i
* 启动项目
pnpm dev

抽取命令

javascript 复制代码
* 执行以下命令 支持local和antv两种模式
pnpm make:geojson [mode]

### 参数说明
* local 模式:依赖项目根目录/public/pbf目录下的pbf文件生成最终的GeoJson文件
* antv 模式:如果antv使用的CDN资源有更新,你可以使用此模式拉取最新的pbf文件来生成最终的GeoJson文件

生成文件一览

名称和code命名的文件/目录各一份,省级(精度到市级)单文件34个,市级(精度到区县)文件按省划分为34个文件夹,总共136个文件和目录。

文件说明

javascript 复制代码
echarts-drill-down
                 |-public
                 |   |-pbf                           # tinymce 编辑器静态资源
                 |   |-boundary                      # 存储antv页面使用的中国边界GeoJson文件
                 |   |-geojson
                 |   |   |-china.geojson             # 中国边界线geojson
                 |   |   |-china-province.geojson    # 中国地图geojson,精度到省级
                 |   |   |-china-city.geojson        # 中国地图geojson,精度到市级
                 |   |   |-china-county.geojson      # 中国地图geojson,精度到区县级
                 |   |   |-provinces                 # 拆分提取的geojson数据
                 |   |             |-文件                 # 名称或code对应省份的geojson数据,精度到市
                 |   |             |-目录                 # 名称或code对应省份下市级的geojson数据,精度到区县
                 |   |-favicon.ico                   # favicon 图标

其他

  • 建议使用pnpm作为包管理工具
  • 建议node ≥ 18.20,否则make:geojson命令不可用,原因参考 issue
相关推荐
小彭努力中21 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
姜太小白1 天前
【ECharts】多个ECharts版本共存解决方案
前端·javascript·echarts
患得患失9492 天前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
zhaocarbon3 天前
vue2 echarts中国地图、在地图上标注经纬度及标注点
前端·javascript·echarts
白白李媛媛3 天前
vue3中实现echarts打印功能
前端·vue.js·echarts
Hexene...5 天前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
晓得迷路了6 天前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
徊忆羽菲7 天前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
DataGear9 天前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
Endeavour_T9 天前
ECharts图表怎么做自适应?
前端·echarts