区域地图数据自定义
2021-6-29 About 8 min
# 区域地图数据自定义
Echarts3提供的地图有时无法满足我们的需求，这时可以引入geoJson作为底图。
# 1 准备数据
准备你的geoJson文件，注意中括号的数量 GeoJson 格式的数据，具体格式见 http://geojson.org/。
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
将准备好的地图数据放置在ext/mapdata目录之下，建议参考系统默认提供的中国地图三级行政区域地图数据china目录结构，新建一个文件夹
ext
├── ext.css
├── ext.js
└── mapdata
├── area-code
│ ├── _default.json
│ ├── index.json
│ ├── world-area.json
│ └── world-area-cn.json
├── china
│ ├── china.json
│ ├── citycode.json
│ ├── counties
│ └── province
├── world-cn.json
└── world-en.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2 目录解释
# 2.1 区域数据目录
区域数据索引，地图数据元数据，用于注册自定义地图数据，告知系统该如何读取与组织自定义数据
# 2.2 区域数据读取索引(index.json)
下面的数据为默认注册的三个区域索引，areaPath相对于应用根目录，也可以注册外部地址
[
{
"label": "中国三级行政区域",
"areaPath": "ext/mapdata/area-code/_default.json"
},
{
"label": "世界地图-en",
"areaPath": "ext/mapdata/area-code/world-area.json"
},
{
"label": "世界地图-cn",
"areaPath": "ext/mapdata/area-code/world-area-cn.json"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
如：新注册一个区域
# 2.3 地图数据字典(_default.json)
以中国三级行政区域(_default.json)为例，解释地图数据字典的格式
| 属性 | 描述 |
|---|---|
| level | 层级 |
| name | 名称 |
| code | 唯一标识，支持中文 |
| dataPath | geojson数据地址 |
| items | 子节点，结构与Area一致，可以没有子节点 |
有子节点的数据可用于区域地图下钻操作
{
"level": 0,
"name": "中国",
"code": "china",
"dataPath": "ext/mapdata/china/china.json",
"items": [
...
]
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
样例
{
"level": 0,
"name": "中国",
"code": "china",
"dataPath": "ext/mapdata/china/china.json",
"items": [
{
"level": 1,
"name": "广东省",
"code": "44",
"dataPath": "ext/mapdata/china/province/44.json",
"items": [
{
"name": "广州市",
"code": "440100",
"level": 3,
"dataPath": "ext/mapdata/china/counties/440100.json"
},
]
}
....
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 3 实例
# 3.1 注册地图
在area-code/index.json添加望谟县信息
[
{
"label": "中国三级行政区域",
"areaPath": "ext/mapdata/area-code/_default.json"
},
{
"label": "世界地图-en",
"areaPath": "ext/mapdata/area-code/world-area.json"
},
{
"label": "望谟县",
"areaPath": "ext/mapdata/area-code/mowang-area.json"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 3.2 元数据定义
在area-code目录下按2.3描述格式添加一份区域数据元数据定义
ext/mapdata/area-code/mowang-area.json
area-code
├── _default.json
├── index.json
├── mowang-area.json
└── world-area.json
1
2
3
4
5
2
3
4
5
{
"level": 0,
"name": "望谟县",
"code": "mowang",
"dataPath": "ext/mapdata/mowang/mowang.json"
"items": [
...乡镇数据信息
]
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3.2 添加地图数据
新建一个目录ext/mapdata/mowang用于存放刚才注册区域的geojson数据
mapdata
...
├── mowang
│ ├── 1-zhen // 文件夹：镇相关地图数据
│ ├── 2-cun // 文件夹：村相关地图数据
│ ├── 3-zu // 文件夹：组相关地图数据文件夹
│ └── mowang.json // 文件：县地图数据
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 4 注册完成
成功注册之后，区域地图选择地图数据下拉及可看到，您在index.json中新增注册的地图；
提示
该文件可能会被缓存, 1.4.3开始索引文件支持在系统配置页面修改
按照上面演示注册成功之后，下面的边饶镇应该显示是望谟县
