一 、熱力圖定義
熱力圖（heat map）也稱熱圖，是以特殊顏色高亮區域的形式表示密度、溫度、氣壓、頻率等分布的不易理解和表達的數據。
二、HeatmapRenderer
esri/renderers/HeatmapRenderer類用來快速繪制熱力圖，將要素圖層點數據渲染為強調更高密度或加權值區域的柵格可視化效果。構造函數為：
new HeatmapRenderer(options)
options包括：
圓半徑blurRadius；
一組渲染器漸變顏色字符串colors，該屬性是必需的；
加權heatmap點的屬性名稱field；
最大像素強度值maxPixelIntensity；
最小像素強度值minPixelIntensity。
colors：CSS顏色字符串數組（#RGB，＃RRGGBB，rgb（r，g，b），rgba（r，g，b，a）），顏色數組至少需要2個元素，即渲染器將使用的顏色漸變，例如：
colors: ["rgba(0, 0, 255, 0)","rgb(0, 0, 255)","rgb(255, 0, 255)", "rgb(255, 0, 0)"]
1
除了使用顏色字符串外，還可以使用colorStops對象來定義漸變顏色。其形式如下代碼所示，ratio用來設置各漸變顏色的比率。
colorStops: [
{ ratio: 0, color: "rgba(250, 0, 0, 0)" },
{ ratio: 0.6, color: "rgb(250, 0, 0)" },
{ ratio: 0.85, color: "rgb(250, 150, 0)"},
{ ratio: 0.95, color: "rgb(255, 255, 0)"}
]
1
2
3
4
5
6
HeatmapRenderer類的方法：
設置渲染半徑： setBlurRadius(blurRadius)
設置用於插入渲染器顏色漸變的顏色： setColors(colors)
設置渲染器用於確定權重的屬性字段： setField(field)
三、完整代碼
下圖為2012年加利福尼亞州涉及超速的致命交通事故點分布圖，其中紅色高亮地區為事故高發地段。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>熱力圖</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/renderers/HeatmapRenderer",
"dojo/on",
"dojo/domReady!"],
function (Map, FeatureLayer, HeatmapRenderer, on){
map = new Map("map", {
basemap: "dark-gray",
center: [-119.11, 36.65],
zoom: 6
});
//初始化要素圖層
var heatmapFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/2012_CA_NHTSA/FeatureServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: [
"atmcond",
"numfatal",
"conszone",
"age",
"alcres",
"sex"
]
});
//熱力圖渲染器
var heatmapRenderer = new HeatmapRenderer({
blurRadius: 10,
colorStops: [
{ ratio: 0, color: "rgba(0, 255, 150, 0)" },
{ ratio: 0.6, color: "rgb(250, 250, 0)" },
{ ratio: 0.85, color: "rgb(250, 150, 0)"},
{ ratio: 0.95, color: "rgb(255, 50, 0)"}],
});
heatmapFeatureLayer.setRenderer(heatmapRenderer);
map.addLayer(heatmapFeatureLayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
---------------------
作者：佯佯Youngth
來源：CSDN
原文：https://blog.csdn.net/yy284872497/article/details/82977693
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！