工欲善其事必先利其器，这里我们绘制行政区划图的底层工具选用Echarts与百度地图javascript API。直接进入正题：
一、对比选取“地理坐标/地图”中合适的API示例
先进入Echarts官网（Apache ECharts），查看全部示例。因为目标是行政区划地图，所以目前可以选择的就是“香港18区人口密度 （2011）”图（后称HK图）与“USA Population Estimates (2012)”图（后称USA图）。
对比代码细节后发现，主体功能没有什么区别。存在一些细节的差异，比如USA图显示地区名称，HK图不显示；USA图中像夏威夷等较远距离的地区，通过registerMap方法中配置平移参数时，拉近显示等。
那么选定本次用HK图作为示例代码，来绘制需要的行政区划图。
二、在程序中引用，生成初始化示例
这里引用示例时，使用的开发语言是HTML5，HTML代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试地图代码</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 引用jQuery与Echarts -->
<script src="jquery.min.js"></script>
<script src="echarts.min.js"></script>
<script type="text/javascript">
var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('HK', geoJson);
myChart.setOption(option = {
title: {
text: '香港18区人口密度 （2011）',
subtext: '人口密度数据来自Wikipedia',
sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{
name: '香港18区人口密度',
type: 'map',
mapType: 'HK', // 自定义扩展图表类型
label: {
show: true
},
data: [
{name: '中西区', value: 20057.34},
{name: '湾仔', value: 15477.48},
{name: '东区', value: 31686.1},
{name: '南区', value: 6992.6},
{name: '油尖旺', value: 44045.49},
{name: '深水埗', value: 40689.64},
{name: '九龙城', value: 37659.78},
{name: '黄大仙', value: 45180.97},
{name: '观塘', value: 55204.26},
{name: '葵青', value: 21900.9},
{name: '荃湾', value: 4918.26},
{name: '屯门', value: 5881.84},
{name: '元朗', value: 4178.01},
{name: '北区', value: 2227.92},
{name: '大埔', value: 2180.98},
{name: '沙田', value: 9172.94},
{name: '西贡', value: 3368},
{name: '离岛', value: 806.98}
],
// 自定义名称映射
nameMap: {
'Central and Western': '中西区',
'Eastern': '东区',
'Islands': '离岛',
'Kowloon City': '九龙城',
'Kwai Tsing': '葵青',
'Kwun Tong': '观塘',
'North': '北区',
'Sai Kung': '西贡',
'Sha Tin': '沙田',
'Sham Shui Po': '深水埗',
'Southern': '南区',
'Tai Po': '大埔',
'Tsuen Wan': '荃湾',
'Tuen Mun': '屯门',
'Wan Chai': '湾仔',
'Wong Tai Sin': '黄大仙',
'Yau Tsim Mong': '油尖旺',
'Yuen Long': '元朗'
}
}
]
});
});
option && myChart.setOption(option);
</script>
</body>
</html>完成后直接在浏览器上打开这个html，效果如下：
三、获取目标地区的边界坐标，组整成需要的json文件
首先查看HK图中引用的边界数据的json文件，查看代码可知json地址为
https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/HK.json
访问后显示如下：
可见，省级行政区划的JSON，是由省内各个地市的边界坐标数据和组成的。那么，如何获取目标地区的json数据呢？
百度地图与高德地图开放平台中都给出了画出行政区划的代码，只需要console.log打印出绘制的数组就可以获得地区边界坐标集。得到坐标集后，整理格式即可。
但是！有同事推荐给我了一个网站，他们把数据已经整理好了！直接列出：地图选择器。进入后就是以下界面：
http://weixin.qq.com/r/WipXT7nEyeS2rf0s939I (二维码自动识别)
下载好后，发现存在一个问题：新设立的一些地市没有独立出来。那么，就在原有地市中找到该区县，直接剪切后，原有地区就不再显示该区县。把剪切后的按照市级格式重组成一个JSON文件即可。
生成后的数据，替换示例代码中的HK的边界坐标JSON，效果如图：
四、调整参数配置，优化地图显示
首先进入“文档”中“配置项手册”，查看需要配置的参数：
--标题（title）
--缩放与放大（roam）
--值的视觉映射（visualMap）
--提示框（tooltip）
--工具箱（toolbox）
--居中自调整大小
.map{
width: 100vw;
height: 100vh;
margin: 0 auto;
}五、实现区划图点击查询，点击进入下级区划图，返回上级功能
效果如下图：
主要使用以下监听事件获取地图上点击的地区：
myChart.on('click', function (params) {
console.log(params);
});
六、实现地图低层区划切换至百度地图的功能
首先进入百度地图开放平台查看文档，https://lbsyun.baidu.com/。查看开发文档中的javascript API，百度地图基础调用demo如下（首先需要获得你的密钥）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试地图代码</title>
</head>
<body>
<div id="container" style="width: 500px; height: 500px;"></div>
<!-- 引用jQuery与百度地区接口 -->
<script src="jquery.min.js"></script>
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script>
<script type="text/javascript">
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>
</body>
</html>完成后直接在浏览器上打开这个html，效果如下：
之后，增加如下功能：
海量聚合点
默认中心定位（文字/坐标）
基础缩放、拉动等功能
七、模块改进方向记录
1.行政区划图下增加实体地图，效果会更好，如下图：
2.行政区划图增加淡入淡出的切换效果会比较好