项目需求
- 基于全国地图进行省市区(县)三级下钻开发；
- 不同区域进行视觉映射，体现区域热力图；
- 自动调用后台API，对应区域显示数据库数据；
- 动态筛选条件，依据筛选条件加载数据；
项目分析
- 全国完整地图china,json，二级省级34个json地理数据，三级地市344个json地理数据。地理数据获取存在难度，获取最新的地市和区县地理数据难上加难；
- 动态加载数据，意味着需要将地图下钻整体封装成函数，同时容器对应的变量设置为全局变量，才能实现图表和菜单的双向互动；
- 对接API数据时，只传过来有数据的地区名称，而无数据的地区空置，需要进行技术处理。如下所示：
{
"err": "",
"res": "",
"data": [
{
"name": "山东省",
"value": "921"
}
],
"code": 0,
"msg": 0
}只有山东省数据时，其他省的鼠标高亮效果会出现undefined异常。
4. 北京、天津、上海、重庆四个直辖市只有二级下钻；
5. 海南省下钻市，海域面积过大，需要进行特殊处理；
6. 省市json地理数据与对应区域的映射编码；
项目开发
外部文件
<script type="text/javascript" src="static/js/jquery.2.14.js"></script>
<script type="text/javascript" src="static/js/functions.js"></script>
<script type="text/javascript" src="static/js/echarts5.min.js"></script>
<!-- 全国344个市、区、州对应的数字编号 -->
<script type="text/javascript" src="static/js/citymap.js"></script>
<script type="text/javascript" src="static/js/lockmaps.js"></script>
<link rel="stylesheet" type="text/css" href="static/rooted/css/lockmap.css">
<!--layui核心框架-->
<script src="static/layui/layui.js"></script>
<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
- 搜索表单使用layui；
- 基于Echarts5开发，动态效果更炫，同时会自动弥补区域无数据时补0；
图表容器及返回按钮
<!--地图-->
<div class="box">
<span id="back">全国</span>
<span id="cityBtn" class="hidden"></span>
<span id="countyBtn" class="hidden"></span>
<div id="main"></div>
</div>
对应省市区，分别做隐藏式的面包屑按钮，跟随鼠标互动显示或隐藏区域名称。
互动菜单
//地图容器
var oBack = document.getElementById("back");
// 点击返回按钮
oBack.onclick = function () {
$('#cityBtn').addClass('hidden');
$('#countyBtn').addClass('hidden');
//加载地图;
getChina(project_id, course_id);
};
//加载地图;
getChina('', '');
常量配置
//34个省、市、自治区的名字拼音映射数组
var provinces = {
//23个省
"台湾省": "taiwan",
"河北省": "hebei",
"山西省": "shanxi",
"辽宁省": "liaoning",
"吉林省": "jilin",
"黑龙江省": "heilongjiang",
"江苏省": "jiangsu",
"浙江省": "zhejiang",
"安徽省": "anhui",
"福建省": "fujian",
"江西省": "jiangxi",
"山东省": "shandong",
"河南省": "henan",
"湖北省": "hubei",
"湖南省": "hunan",
"广东省": "guangdong",
"海南省": "hainan",
"四川省": "sichuan",
"贵州省": "guizhou",
"云南省": "yunnan",
"陕西省": "shanxi1",
"甘肃省": "gansu",
"青海省": "qinghai",
//5个自治区
"新疆维吾尔自治区": "xinjiang",
"广西壮族自治区": "guangxi",
"内蒙古自治区": "neimenggu",
"宁夏回族自治区": "ningxia",
"西藏自治区": "xizang",
//4个直辖市
"北京市": "beijing",
"天津市": "tianjin",
"上海市": "shanghai",
"重庆市": "chongqing",
//2个特别行政区
"香港特别行政区": "xianggang",
"澳门特别行政区": "aomen"
};
//直辖市和特别行政区-只有二级地图，没有三级地图
var special = ["北京市", "天津市", "上海市", "重庆市", "香港特别行政区", "澳门特别行政区"];
对接API封装函数
//省级下钻;
function getProvince(name, pid,) {
$.getJSON('static/js/map/province/' + provinces[name] + '.json', function (data) {
echarts.registerMap(name, data);
//获取数据;
$.getJSON('./api/api.php?act=getMap&token=3cab7ce4142608c0f40c785b5ab5ca24', {
fromType: 'province',
regionName: name,
project_id: pid,
course_id: cid
}, function (res) {
//console.log(res.data)
lockDrillMap('main', name, res.data, pid, cid);
})
});
};
//地级市下钻;
function getCity(name, pid,) {
$.getJSON('static/js/map/city/' + cityMap[name] + '.json', function (data) {
echarts.registerMap(name, data);
$.getJSON('./api/api.php?act=getMap&token=3cab7ce4142608c0f40c785b5ab5ca24', {
fromType: 'city',
regionName: name,
project_id: pid,
course_id: cid
}, function (res) {
lockDrillMap('main', name, res.data, pid, cid);
})
});
}
视觉映射配置
//判断视觉映射最大值;
//console.log(data);
var dataMax;
if (data.length == 0) {
dataMax = 1;
} else {
dataMax = data[0].value;
}
/* if (data.length == 0) {
dataMax = 1;
} else {
dataMax = data[0].value;
for (var i = 0; i < data.length - 1; i++) {
dataMax = dataMax < data[i + 1].value ? data[i + 1].value : dataMax
}
}*/
visualMap: {
show: true,
left: '5%',
bottom: '5%',
calculable: true,
min: 0,
max: dataMax,
textStyle: {
color: "#FFF"
},
inRange: {
symbolSize: 30,
symbol: 'circle',
color: ['#A3E00B', '#E0022B']
}
},
海南省放大
// 针对海南放大
if (map == '海南省') {
option.series[0].center = [109.844902, 19.0392];
option.series[0].layoutCenter = ['50%', '50%'];
option.series[0].layoutSize = "120%";
} else { //非显示海南时，将设置的参数恢复默认值
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
}
下钻单击事件
//防止重复触发点击事件
lockChart.off('click');
//地图点击事件
lockChart.on('click', function (params) {
//console.log(params.name);
if (params.name in provinces) {
//如果点击的是34个省、市、自治区，绘制选中地区的二级地图
$('#cityBtn').html(params.name);
$('#cityBtn').removeClass('hidden');
getProvince(params.name, pid, cid);
} else if (params.seriesName in provinces) {
//如果是【直辖市/特别行政区】只有二级下钻
if (special.indexOf(params.seriesName) >= 0) {
console.log("未找到对应的下钻级别.");
} else {
//显示县级地图
$('#countyBtn').html(params.name);
$('#countyBtn').removeClass('hidden');
/*二级返回按钮*/
$('#cityBtn').click(function () {
$('#countyBtn').addClass('hidden');
var val = $('#cityBtn').html();
getProvince(val, pid, cid);
})
getCity(params.name, pid, cid);
}
} else {
console.log("未找到对应的下钻级别.");
}
});
@lockdata.cn
