美文网首页策划文案、产品经理、产品运营、营销策划
没有编程基础也可通过高德地图完成炫酷的热力图分析

没有编程基础也可通过高德地图完成炫酷的热力图分析

作者: 依宁0507 | 来源:发表于2019-03-14 22:22 被阅读13次

        我们常常看到一些分析报告中将用户实际分布信息展示在地图中,可以很直观地看到具体哪些片区的用户活跃度高,根据这些片区的特征可以有效分析出用户群体的一些基本性质,以生鲜电商为例,比如提取出近半年较为活跃的用户订单配送地址均为一些小区,那么可以判断出这些用户都是一些家庭用户,可以根据这些家庭用户的性质策划一些场景化的活动,比如周末聚餐,食材与菜谱全套推荐等。

热力图样例

        那么如何制作这样的热力图呢?其实非常简单,没有编程经验的同学也能很快学会,只需要简单的Excel操作就可以了。

1.数据准备

        用户在使用App或者线上购物时,其位置信息都会被记录在后台,以经纬度的形式存储在公司数据库中,只要把这些经纬度信息提取出来就可以了,随便找一个研发小哥都能很快把数据调取出来,拿到的数据是这样的:

经纬度原始数据

        数量可以是这个地址的订单量、用户数量、App打开次数等等指标,只要是想衡量某个地区某个指标的密度就行。

接下来在excel里处理一下,将三个字段连接在一起,每一行加工成如下的形式,加粗的部分为经纬度数值。   

        {"lng":116.191031,"lat":39.988585,"count":10},

       {"lng":116.389275,"lat":39.925818,"count":11},

       {"lng":116.287444,"lat":39.810742,"count":12},

       {"lng":116.481707,"lat":39.940089,"count":13},

       {"lng":116.410588,"lat":39.880172,"count":1999},

       {"lng":116.394816,"lat":39.91181,"count":15},

       {"lng":116.416002,"lat":39.952917,"count":16}

2. 修改代码

        用notepad或者记事本将本段代码复制进去,找到var points 这一行,将刚刚加工好的数据复制进去,注意最后一行没有逗号。

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>热力图</title>

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>

    <style>

        html,

        body,

        #container {

            margin: 0;

            padding: 0;

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

<div id="container"></div>

<div class="input-card" style="width: auto;">

    <div class="input-item">

        <button class="btn" onclick="heatmap.show()">显示热力图</button>

    </div>

    <div class="input-item">

        <button class="btn" onclick="heatmap.hide()">关闭热力图</button>

    </div>

</div>

<script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script>

<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>

<script>

    var map = new AMap.Map("container", {

        resizeEnable: true,

        center: [116.418261, 39.921984],

        zoom: 11

    });

    if (!isSupportCanvas()) {

        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')

    }

    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html

    //参数说明如下:

    /* visible 热力图是否显示,默认为true

    * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity

    * radius 势力图的每个点的半径大小

    * gradient  {JSON} 热力图的渐变区间 . gradient如下所示

    * {

    .2:'rgb(0, 255, 255)',

    .5:'rgb(0, 110, 255)',

    .8:'rgb(100, 0, 255)'

    }

    其中 key 表示插值的位置, 0-1

    value 为颜色值

    */

    var heatmap;

    map.plugin(["AMap.Heatmap"], function () {

        //初始化heatmap对象

        heatmap = new AMap.Heatmap(map, {

            radius: 25, //给定半径

            opacity: [0, 0.8]

            /*,

            gradient:{

                0.5: 'blue',

                0.65: 'rgb(117,211,248)',

                0.7: 'rgb(0, 255, 0)',

                0.9: '#ffea00',

                1.0: 'red'

            }

            */

        });

      var points =[

        {"lng":116.191031,"lat":39.988585,"count":10},

        {"lng":116.389275,"lat":39.925818,"count":11},

        {"lng":116.287444,"lat":39.810742,"count":12},

        {"lng":116.481707,"lat":39.940089,"count":13},

        {"lng":116.410588,"lat":39.880172,"count":1999},

        {"lng":116.394816,"lat":39.91181,"count":15},

        {"lng":116.416002,"lat":39.952917,"count":16}

    ];

        //设置数据集:

        heatmap.setDataSet({

            data: points,

            max: 100

        });

    });

    //判断浏览区是否支持canvas

    function isSupportCanvas() {

        var elem = document.createElement('canvas');

        return !!(elem.getContext && elem.getContext('2d'));

    }

</script>

</body>

</html>

复制位置示意

3.执行代码,完成热力图

        打开浏览器,输入地址:https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap   ;进入高德地图开放平台,界面如下。

高德地图开放平台界面

        将刚刚修改完的代码复制到红框中,点击运行,热力图就制作完成了。

4.补充说明

        提取数据时一定要确定清楚,取得的经纬度是否与高德地图坐标系一致,如果不一致,还需要对经纬度进行转换,高德地图与腾讯地图用的一套坐标系,百度地图用的另一套坐标系。


        如果您觉得我的文章有意思,欢迎关注哦,定期分享原创运营、数据分析干货知识

相关文章

网友评论

    本文标题:没有编程基础也可通过高德地图完成炫酷的热力图分析

    本文链接:https://www.haomeiwen.com/subject/iabfmqtx.html