前端如何实现热力地图?很简单!

今天接到一个需求,需要我做一个热力地图.什么? 你不知道热力地图是啥?

他长这样

image.png

需求: 根据 后端给的经纬度.标记在一个点上, 叠加起来要有热力值的表现;

如何实现

条件:

 1. 使用腾讯地图 map 
 2. 申请腾讯地图 key

html

    <div id="container"></div>  //地图容器
    <div id="setOptions">
        <button id="show">显示/隐藏</button>
        <button id="data">更新数据</button>
        <button id="radius">改变半径</button>
        <button id="gradient">改变颜色</button>
        <button id="opacity">改变透明度</button>
        <button id="destroy">销毁对象</button>
    </div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=这里写你申请的key"></script>

JS

  window.onload = function(){
        // 创建地图
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(39.9,116.4),
            zoom:8
        });
        // 创建热力图对象
        var heat = new qq.maps.visualization.Heat({
            map: map, // 必填参数，指定显示热力图的地图对象
            radius: 30, // 辐射半径，默认为20
        });
        // 获取热力数据
        var data = getHeatData();
        // 向热力图传入数据
        heat.setData(data);
 
        // 监听button事件，更改热力图配置参数
        document.getElementById("setOptions").addEventListener("click", function(e) {
            var target = e.target;
            switch (target.id) {
                case "show":
                    if (heat.visible) {
                        heat.hide(); // 显示热力图
                    } else {
                        heat.show(); // 隐藏热力图
                    }
                    break;
                case "data":
                    data = getHeatData(10);
                    heat.setData(data); // 重置热力图数据
                    break;
                case "radius":
                    let radius = heat.getRadius(); // 获取辐射半径
                    heat.setRadius(radius + 10); // 设置辐射半径
                    break;
                case "gradient":
                    let gradient = heat.getGradient(); // 获取渐变色
                    gradient[1.0] = "#fff"; // 强度最大为白色
                    heat.setGradient(gradient); // 设置渐变色
                    break;
                case "opacity":
                    let opacity = heat.getOpacity();
                    opacity = [0.1, 0.8]; // 透明度变化范围为0.2～0.8
                    heat.setOpacity(opacity); // 设置透明度变化范围
                    break;
                case "destroy":
                    heat.destroy();
                default:
            }
        });
 
        function getHeatData(cnt, max, min) {
            let data = [];
            let center = {
                lat: 39.9,
                lng: 116.4
            };
            cnt = cnt || 100;
            max = max || 100;
            min = min || 0;
            for (let index = 0; index < cnt; index++) {
                let r = Math.random();
                let angle = Math.random() * Math.PI * 2;
                let heatValue = Math.random() * (max - min) + min;
                data.push({
                    lat: center.lat + r * Math.sin(angle),
                    lng: center.lng + r * Math.cos(angle),
                    value: heatValue
                });
            }
            return {
                max: max,
                min: min,
                data: data
            };
        }
    }
    

css

html, body {
        width: 100%;
        height: 100%;
    }
    * {
        margin: 0px;
        padding: 0px;
    }
    button {
        width: 100px;
        border: 1px solid #555;
    }
    #container {
        height: 90%;
    }

按照上面步骤就可以准确的画出你要的热力图,

你只需要做的就是把后端给你的数据,转成

let mapData = {
      min, //min可填可不填,
      max,//可填可不填,  
      data:[
          {  lat , lng , value  } //value可不填
      ]
}
//lat 纬度
//lng 精度
 heat.setData(data);//这样就ok了

注意: min和max是控制热力值最高最低的,max代表的是 根据max来渲染热力颜色; max越高热力图越浅,是max也可以说是一个阀门