本文将说明地图组件下钻的逻辑以及如何生成一个可以任意下钻的地图边界数据

实现全国-大区-省-市-区/县下钻 或是 农田-水稻田-A区下钻

1基本概念

数据类型：我们要做的数据是类型为行政边界轮廓数据，数据格式为JSON

常用地图数据类型以及获取途径👇 其中对包行政边界轮廓数据做了详细介绍

adcode：地图的上卷下钻依赖行政边界轮廓数据中的一个字段 adcode

adcode是由国家基础地理信息中心定义的区域代码，身份证的前六位也是这个🙃

各行政区划对应的adcode码表⬇️

📎AMap_adcode_citycode.xlsx

2地图组件上卷下钻的逻辑

以浙江省的【省-市-区】的下钻为例，

上传到地图组件的数据为zip压缩包

zip压缩包中需包含浙江省、浙江省下级个各市、以及各市下级的个区县边界轮廓数据的JSON文件

且文件以adcode命名

地图上卷下钻的本质为 以adcode作为索引的JSON文件切换

地图组件会判断点击下钻区域的adcode是什么

根据adcode在上传的文件夹中检索，如有对应命名的文件，则切换地图数据

3实现「全国-大区-省-市-区/县」下钻

了解了地图上卷下钻的本质为 以adcode作为索引的JSON文件切换这个前提后

实现「全国-大区-省-市-区/县」下钻这种包含自定义行政区划的场景就很容易拆解步骤了

其中需要包含中国(大区版)、各大区、各省、各市、各区/县的边界轮廓数据，

各省、各市、各区/县标准行政边界的数据EasyMap可直接获取，我们只需要做⬇️

1. 绘制一个大区版的中国边界轮廓数据
2. 绘制各个大区单独的边界轮廓数据
3. 组装数据

最终的效果👇

数据 ➡️ 📎muti_files.zip

3.1所需数据材料以及软件

EasyMap(在线使用)：https://map.easyv.cloud/

QGIS(需下载)：https://www.qgis.org/en/site/

3.2标准行政边界轮廓数据下载

打开EasyMap：https://map.easyv.cloud/

说明：数据来源为高德开放平台：https://lbs.amap.com/api/webservice/guide/api/district?spm=a2crr.b71357980.area-selector.1.7d8c26c0L4hCNs

获取标准行政边界轮廓数据下载

3.3绘制大区版中国

解压下载的文件

打开QGIS，将100000.json拖入

3.3.1修改投影方式

点击坐标系

在过滤搜索栏中输入WGS84/Pseudo-Mercator搜索后并选中，点击OK

得到一个正正的地图

3.3.2修正数据

在右侧「处理工具箱」中搜索修正，选择「修正几何图形」

没有「处理工具箱」的话，点击上方的「处理」 选中工具箱

点击「运行」，运行结束后点击关闭

3.3.3合并省份

用修正后的数据 合并省份 以合并华东区为例

按住shift多选省份

右击工具栏空白区，看看「高级数字化工具栏」是否已经被选中，没选中的话选中一下

点击「合并选中的要素」

出现弹窗后，修改最后一栏合并的数据

需要修改adcode以及name两个字段

adcode：可以根据业务场景自定义填写，最好是数字，可以不是六位，数字简单一点也行，但一定要记得这个这个修改后的数

name：华东区，合并别的区就写别的

避免自己忘记adcode可以在修改前列好表格，把对应的adcode和name记下来

修改后点击确认

那么就已经合并好了一个区

其他大区的合并流程同理，就不再重复演示

合并结束之后 点击保存 保存修改结果

再点击✏️退出编辑模式

3.3.4导出数据

右键修改好的图层，选择导出

文件名和原本的保持一致 100000

点击「…」选择文件存储路径

修改文件后缀 geojson➡️json

3.4 绘制单独的大区轮廓

以华东区为例

打开EasyMap：https://map.easyv.cloud/

说明：数据来源为高德开放平台：https://lbs.amap.com/api/webservice/guide/api/district?spm=a2crr.b71357980.area-selector.1.7d8c26c0L4hCNs

3.4.1获取华东区范围的数据

解压压缩包

3.4.2重命名文件

按照我们之前定义好的adcode和name的表给生成的文件重命名

这个文件就是华东区单独的轮廓数据了

其他大区的合并流程同理，就不再重复演示

3.5组装数据

我们费老半天劲攒出来的数据⬇️

将文件夹中旧的100000.json 删掉

把新制作好的大区版中国100000.json、以及七个大区文件拖进文件夹进去

压缩文件夹成zip上传至组件使用

4实现「农田-水稻田-A区」下钻

这样自定义区域的数据可以通过EasyMap绘制

了解了地图上卷下钻的本质为 以adcode作为索引的JSON文件切换这个前提后

我们可以通过adcode关联自定义区域的数据

最终的效果👇

数据 ➡️ 📎test.zip

4.1所需数据材料以及软件

EasyMap(在线使用)：https://map.easyv.cloud/

QGIS(需下载)：https://www.qgis.org/en/site/

4.2绘制农田区域轮廓

打开EasyMap 👉 https://map.easyv.cloud/

在子组件数据模拟中点击「➕」

根据业务场景填入图层名称，类型选择面，字段列表中添加adcode、name，配置完点击保存

选择是否都可以，案例场景的范围比较小，就不在选定范围内绘制了

找到想要绘制的区域绘制面，单击添加点，双击结束绘制，结束绘制后可修改点、添加点

双击结束绘制会提示弹窗提示补充adcode name，根据业务场景填入就好

绘制完成后 点击保存为JSON

4.2.1转换坐标系

因为EasyMap的数据来源为高德开放平台，使用的坐标系为火星坐标系，

在这里我们最终会放到基础平面地图中，底图用的mapbox 使用的坐标系是WGS84

为了数据不产生偏移，现将轮廓数据转换成WGS84

如果放到3D边界地图上使用的话可以不做坐标系转换

点击转换，转换后点击下载

4.3根据农田区域轮廓制作数据

打开QGIS，拖入转换后的文件，下级的区域轮廓通过裁剪这个文件获得

4.3.1修改投影方式

点击右下角坐标系的按钮

在过滤搜索栏中输入WGS84/Pseudo-Mercator搜索后并选中，点击OK

4.3.2引入卫星地图服务作为裁剪的参照

如果在EasyMap做了坐标系转换：

复制下面这个地址，粘进网址里面👇

https://api.mapbox.com/styles/v1/ychmap/ckgam3qq20syf19nq7fy851iu/wmts?access_token=pk.eyJ1IjoieWNobWFwIiwiYSI6ImNqbDF6N214YzEwY3Eza20weG5rdTY3NmsifQ.eJIpwRK1dgLEKlc8KiM6HQ

如果没在EasyMap做坐标系转换：

复制下面这个地址，粘进网址里面👇

https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

将已经添加好的地图服务拖进图层中

拖拽调整一下顺序，就得到下面这个结果

在裁剪之前也先约定各自的adcode表，避免绘制时造成混乱

右击工具栏空白区，看看「高级数字化工具栏」是否已经被选中，没选中的话选中一下

4.3.3包含下级数据的农田轮廓数据制作

选中轮廓图层，点击「✏️」进入编辑模式，点击「✂️」开始分割要素

隐藏轮廓图层，以卫星图作为裁剪参照，左键单击开始绘制裁剪线，右键结束绘制裁剪线

根据修改各裁剪区域的adcode

点击「📁」保存修改，点击「✏️」退出编辑模式

右键裁剪好的图层，选择导出-另要素存为

按adcode表给文件命名，并选择文件存储路径，取消勾选「将以保存的文件添加到地图」

点击OK，保存数据

第一个文件就做好了(1/9)

4.3.4农田下级数据的制作

以玉米田为例

点击图层-创建图层-新建临时草稿图层

填入名称，几何图形类型选择「多边形」，添加adcode(整数)、name(文本)字段，点击「OK」

点击选中「坐标系」图层，点击「✏️」进入编辑模式，再点击选择要素，选择对应的区域

「ctrl/commond+c」复制玉米田边界轮廓

点击选中「玉米田」图层，点击「✏️」进入编辑模式，「ctrl/commond+v」粘贴玉米田边界轮廓

过程gif(复制粘贴通过键盘操作可能看不太出来)👇

导出数据

按adcode表给文件命名，并选择文件存储路径，取消勾选「将以保存的文件添加到地图」

点击OK，保存数据

玉米田的数据就做好了(2/9)

小麦、大麦、高粱、甘薯、水稻绘制数据的流程同理，就不再重复演示

小麦、大麦、高粱、甘薯的数据就做好了(6/9)

水稻田的数据还需要接着处理，先不要导出

为了避免干扰可以把其他图层隐藏先

与裁剪「农田」的流程一样，我们裁剪「水稻」

选中「水稻田」图层，点击「✏️」进入编辑模式，点击「✂️」开始分割要素

隐藏「水稻田」图层，以卫星图作为裁剪参照，左键单击开始绘制裁剪线，右键结束绘制裁剪线

修改裁剪区域的adcode，name

点击「📁」保存修改，点击「✏️」退出编辑模式

右键「水稻田」，选择导出-另要素存为

按adcode表给文件命名，并选择文件存储路径，取消勾选「将以保存的文件添加到地图」

点击OK，保存数据

水稻的数据就做好了(7/9)

与制作水稻田、玉米田、大麦田的轮廓数据的流程一致，我们把A区、B区的数据制作出来

点击图层-创建图层-新建临时草稿图层

填入名称，几何图形类型选择「多边形」，添加adcode(整数)、name(文本)字段，点击「OK」

修改adcode、name，按照adcode码表填入数据

流程gif(A区)👇

按adcode表给文件命名，并选择文件存储路径，取消勾选「将以保存的文件添加到地图」

点击OK，保存数据

✅ A区B区的数据也做好了(9/9)

4.4组装数据

修改文件后缀 geojson👉json

打包成一个压缩包，上传至组件使用