漏刻有时数据可视化Echarts组件开发(26):全国地图三级热力图下钻和对接api自动调用数据开发实录

项目需求

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>
    
    <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">
    
    <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