今天接到一個需求,需要我做一個熱力地圖.什么? 你不知道熱力地圖是啥?

他長這樣

image.png

需求: 根據(jù) 后端給的經(jīng)緯度.標(biāo)記在一個點上, 疊加起來要有熱力值的表現(xiàn);

如何實現(xiàn)

條件:

 1. 使用騰訊地圖 map 
 2. 申請騰訊地圖 key

html

    <div id="container"></div>  //地圖容器
    <div id="setOptions">
        <button id="show">顯示/隱藏</button>
        <button id="data">更新數(shù)據(jù)</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(){
        // 創(chuàng)建地圖
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(39.9,116.4),
            zoom:8
        });
        // 創(chuàng)建熱力圖對象
        var heat = new qq.maps.visualization.Heat({
            map: map, // 必填參數(shù)赎瑰，指定顯示熱力圖的地圖對象
            radius: 30, // 輻射半徑嫌吠，默認(rèn)為20
        });
        // 獲取熱力數(shù)據(jù)
        var data = getHeatData();
        // 向熱力圖傳入數(shù)據(jù)
        heat.setData(data);
 
        // 監(jiān)聽button事件佃乘，更改熱力圖配置參數(shù)
        document.getElementById("setOptions").addEventListener("click", function(e) {
            var target = e.target;
            switch (target.id) {
                case "show":
                    if (heat.visible) {
                        heat.hide(); // 顯示熱力圖
                    } else {
                        heat.show(); // 隱藏?zé)崃D
                    }
                    break;
                case "data":
                    data = getHeatData(10);
                    heat.setData(data); // 重置熱力圖數(shù)據(jù)
                    break;
                case "radius":
                    let radius = heat.getRadius(); // 獲取輻射半徑
                    heat.setRadius(radius + 10); // 設(shè)置輻射半徑
                    break;
                case "gradient":
                    let gradient = heat.getGradient(); // 獲取漸變色
                    gradient[1.0] = "#fff"; // 強度最大為白色
                    heat.setGradient(gradient); // 設(shè)置漸變色
                    break;
                case "opacity":
                    let opacity = heat.getOpacity();
                    opacity = [0.1, 0.8]; // 透明度變化范圍為0.2～0.8
                    heat.setOpacity(opacity); // 設(shè)置透明度變化范圍
                    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%;
    }

按照上面步驟就可以準(zhǔn)確的畫出你要的熱力圖,

你只需要做的就是把后端給你的數(shù)據(jù),轉(zhuǎn)成

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

注意: min和max是控制熱力值最高最低的,max代表的是 根據(jù)max來渲染熱力顏色; max越高熱力圖越淺,是max也可以說是一個閥門