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文件，微调抽取命令代码想精确到街道一级也是很快就能搞定的。

启动

* 安装依赖
pnpm i
* 启动项目
pnpm dev

抽取命令

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

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

生成文件一览

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

文件说明

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