• 漏刻有时数据可视化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
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    只有山东省数据时，其他省的鼠标高亮效果会出现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">

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 搜索表单使用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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    对应省市区，分别做隐藏式的面包屑按钮，跟随鼠标互动显示或隐藏区域名称。

    互动菜单

        //地图容器
    var oBack = document.getElementById("back");

    // 点击返回按钮
    oBack.onclick = function () {
        $('#cityBtn').addClass('hidden');
        $('#countyBtn').addClass('hidden');

        //加载地图;
        getChina(project_id, course_id);
    };
    //加载地图;
    getChina('', '');

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    常量配置

    //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 = ["北京市", "天津市", "上海市", "重庆市", "香港特别行政区", "澳门特别行政区"];

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    对接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);
        })
    });
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    //地级市下钻;
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);
        })
    });
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    视觉映射配置

       //判断视觉映射最大值;
    //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
         }
     }*/

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
      visualMap: {
            show: true,
            left: '5%',
            bottom: '5%',
            calculable: true,
            min: 0,
            max: dataMax,
            textStyle: {
                color: "#FFF"
            },
            inRange: {
                symbolSize: 30,
                symbol: 'circle',
                color: ['#A3E00B', '#E0022B']
            }
        },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    海南省放大

        // 针对海南放大
    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;
    }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    下钻单击事件

       //防止重复触发点击事件
    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("未找到对应的下钻级别.");
        }
    });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    @lockdata.cn

  • 相关阅读:
    搭建hadoop+spark完全分布式集群环境
    解码2022中国网安强星丨正向建、反向查，华为构建数字化时代的网络安全防线
    在bootstrap中，能不能对同一个容器，既使用类row进行网格设计，又使用类d-flex实现弹性盒子的性能？
    Docker之MongoDB容器中创建用户与授权操作
    【大数据】Flink SQL 语法篇（八）：集合、Order By、Limit、TopN
    OpenCV-Python快速入门（九）：直方图
    牛客SQL刷题第三趴——SQL大厂面试真题
    java 时间类型和 mysql 时间类型对应关系
    计算机防勒索病毒之主机加固核心要点
    birt 如何实现 SQL 语句中带 in 的查询
  • 原文地址：https://blog.csdn.net/weixin_41290949/article/details/126820624