项目需求
- 1.基于全国地图进行省市区(县)三级下钻开发；
- 2.不同区域进行视觉映射，体现区域热力图；
- 3.自动调用后台API，对应区域显示数据库数据；
- 4.动态筛选条件，依据筛选条件加载数据；
项目分析
1.全国完整地图china,json，二级省级34个json地理数据，三级地市344个json地理数据。地理数据获取存在难度，获取最新的地市和区县地理数据难上加难；
2.动态加载数据，意味着需要将地图下钻整体封装成函数，同时容器对应的变量设置为全局变量，才能实现图表和菜单的双向互动；
3.对接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, cid) { $.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, cid) { $.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
