热力图在echarts渲染地图上实现

最新推荐文章于 2024-10-04 11:57:29 发布

李剑一

最新推荐文章于 2024-10-04 11:57:29 发布

阅读量3.1k

点赞数

文章标签： javascript echarts

本文链接：https://blog.csdn.net/Feng_ye__/article/details/115132580

版权

自律给你自由

需求

今天公司有一个小需求，将热力图显示在地图上，由于没有精准的世界地图数据，也没有对接百度/高德的地图数据，仅仅使用geojson渲染出一个大致的世界地图，然后将热力图根据坐标显示在这个echarts渲染的地图上。

思路

将世界地图的geojson数据注入到echarts中使其渲染出地图
将热力图地理坐标数据重新组合为数组形式
将组合完的热力图数据匹配到地图上

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts上热力下地图</title>
</head>
<body>
<div style="width: 800px;height: 500px;border: 1px solid #ddd;" id="main"></div>
<!-- 引用BootCDN的jq -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 引用BootCDN的echarts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<script>
    var geoCoordMap = {
        "zh":[113.65,34.76],
        "za":[13.65,3.76],
        "zb":[50.65,35.6],
        "zc":[36.65,54.76],
        "zd":[11.65,74.76],
        "ze":[48.65,45.76],
        "zf":[52.65,86.76],
        "zg":[55.65,99.76],
        "zi":[55.65,76],
    };

    /**
     * 将坐标数据封装成为数组
     * */
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push(geoCoord.concat(data[i].value));
            }
        }
        return res;
    };

    var myChart = echarts.init(document.getElementById('main'));

    $.get('world.json', function (geoJson) {
        echarts.registerMap('world', geoJson);

        var option = {
            visualMap: {
                min: 0,
                max: 500,
                splitNumber: 5,
                inRange: {
                    color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                },
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'world'
            },
            series: [{
                name: '活跃人数分布',
                type: 'heatmap',
                coordinateSystem: 'geo',
                data: convertData([
                        {name: "zh"},
                        {name: "za"},
                        {name: "zb"},
                        {name: "zc"},
                        {name: "zd"},
                        {name: "ze"},
                        {name: "zf"},
                        {name: "zg"},
                        {name: "zi"}
                    ])
            }]
        };

        myChart.setOption(option);
    });

</script>
</body>
</html>