因為做到一個大屏數據業務 用於記錄 發現一個大神寫的特別細致 自己記下來用於保存，轉載於： https://blog.csdn.net/snowin1994/article/details/101361811
使用熱力圖的基本配置
在官方熱力圖api實例中有標准代碼。
<!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.15&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的瀏覽器適用,您所使用的瀏覽器不能使用熱力圖功能,請換個瀏覽器試試~')
}
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'
}
*/
});
heatmap.setDataSet({
data: heatmapData,
max: 100
});
});
//判斷瀏覽區是否支持canvas
function isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
</script>
</body>
</html>
主要需要注意的地方如下
加載js組件和數據
加載組件
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
其中需要的key，可以注冊高德地圖開發者后，在我的應用中找到（需要創建一個應用）
加載數據
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
js中根據自己的代碼修改路徑和名字，其中直接返回json數據即可。例如：
var heatmapData = [ {"lng":"116.311322","lat":"39.957033","count":1}, {"lng":"116.16741","lat":"39.89261","count":2} ];
字段含義
| 字段 | 含義 |
|---|---|
| lng | 經度 |
| lat | 緯度 |
| count | 出現次數 |
重要參數說明
剩下的js代碼注意做兩件事
- 加載地圖
- 加載熱點圖
下面着重說明其中出現的幾個參數的含義。js代碼列舉如下，說明請注意注釋。
var map = new AMap.Map("container", { resizeEnable: true, center: [116.418261, 39.921984], zoom: 11 // zoom表示地圖打開時候默認的縮放級別，數值變大，地圖相當於放大，看見的實際面積減小，內容變詳細 }); if (!isSupportCanvas()) { alert('熱力圖僅對支持canvas的瀏覽器適用,您所使用的瀏覽器不能使用熱力圖功能,請換個瀏覽器試試~') } var heatmap; map.plugin(["AMap.Heatmap"], function () { //初始化heatmap對象 heatmap = new AMap.Heatmap(map, { radius: 25, // 每個點的覆蓋范圍半徑，單位是像素 /** * 熱力圖的透明度，包含兩個值（取值范圍從0到1），表示透明度從完全透明到完全不透明的變化值。 * 這個選項對應着熱力圖顏色的漸變。 * 舉個例子，opacity: [0, 1]，則坐標點的數目在最小梯度的區域是完全透明的，在最大梯度的區域是完全不透明的。 * 再舉個例子，opacity: [1, 1]，則整個熱點圖的區域都是完全不透明的。 * 所謂梯度見下面的gradient配置說明。 */ opacity: [0, 0.8], /** * 顏色梯度配置，我們設目標值(某點范圍內點數目/下面配置的max)為x。 * key是x的區間配置,value是對應區間的顏色。 * 舉個例子，假設gradient和max的配置均是下面的代碼。 * 當某個點出現的數目為10時，x = 某點范圍內點數目 / 下面配置的max = 10/10 = 1, * x > 0.9，則目標區域顯示的顏色為紅色。 * 具體的范圍如下： * x > 0.9 red * 0.9 > x > 0.7 yellow * 0.7 > x > 0.5 green * 0.5 > x > 0.3 blue * 0.3 > x blue * 注意，即使x的值小於0.3還是會有顏色。 */ gradient:{ 0.3: 'blue', 0.5: 'green', 0.7: 'yellow', 0.9: 'red' } }); //設置數據集：該數據為北京部分“公園”數據 heatmap.setDataSet({ data: heatmapData, // 加載數據一節中，js文件內保存所有數據的變量。 max: 10 // 見gradient的例子 }); });
顯示調優
要配置出顯示合適的熱力圖，注意關注三個參數（radius、gradient、max）。如果配置不當，會導致熱力圖的重點區域不突出。熱點圖中的顏色顯示規則如下：
我們設 (某點范圍內點數目 / max) 為x。gradient的配置為
gradient:{ 0.3: 'blue', 0.5: 'green', 0.7: 'yellow', 0.9: 'red' }
max的配置為 10
heatmap.setDataSet({ data: heatmapData, // 加載數據一節中，js文件內保存所有數據的變量。 max: 10 // 見gradient的例子 });
舉個例子，當某個點出現的次數為10時，x = 10 / 10 = 1,
x > 0.9，則目標區域顯示的顏色為紅色。具體的范圍如下：
| 范圍 | 顏色 |
|---|---|
| x > 0.9 | red |
| 0.9 > x > 0.7 | yellow |
| 0.7 > x > 0.5 | green |
| 0.5 > x > 0.3 | blue |
| 0.3 > x | blue |
redius
redius控制單個點的籠罩半徑，半徑范圍內所有的點都會算作此點的數目，變相增大 x 的值。設置合適的半徑，確定每個點的籠罩范圍。
max
max代表熱點圖區分熱度的界限，某地區的點數超過max一定比例，即顯示對應gradient配置的顏色。
參考
var heatmapData =[{"lng":"116.311322","lat":"39.957033","count":1},{"lng":"116.16741","lat":"39.89261","count":2}];