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
相关推荐
不想上班只想要钱5 天前
ECharts鼠标悬浮提示框数字设置鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
javascript·计算机外设·echarts
枫叶落雨2227 天前
11苍穹外卖之Apache ECharts(数据可视化图表、后端传数据)
信息可视化·apache·echarts
祁许7 天前
【Vue】在Vue3中使用Echarts的示例 两种方法
前端·vue.js·typescript·vue·echarts
ctf_02268 天前
echarts 3d中国地图飞行线
3d·echarts·swift
Kill_paradise9 天前
echarts 鼠标移入柱状图展示手指,移入label 展示箭头
前端·javascript·echarts
cccc☜10 天前
echarts加载地图
前端·javascript·echarts
大厂在职_few11 天前
Android版&Kotlin版RxJava2+Retrofit2+OkHttp3的基础、封装和项目中的使用
android·kotlin·echarts
kidding72312 天前
Vue3使用Echarts组件步骤
前端·vue.js·echarts
呼啦啦呼_13 天前
使用mapshaper将echart地图合并,并取消内部边界
echarts
小彭努力中1 个月前
16.在Vue3中使用Echarts实现词云图
前端·javascript·vue.js·echarts