一 、熱力圖定義javascript
熱力圖（heat map）也稱熱圖，是以特殊顏色高亮區域的形式表示密度、溫度、氣壓、頻率等分佈的不易理解和表達的數據。css
2、HeatmapRendererhtml
esri/renderers/HeatmapRenderer類用來快速繪製熱力圖，將要素圖層點數據渲染爲強調更高密度或加權值區域的柵格可視化效果。構造函數爲：java
new HeatmapRenderer(options)
options包括：api
圓半徑blurRadius；數組
一組渲染器漸變顏色字符串colors，該屬性是必需的；dom
加權heatmap點的屬性名稱field；函數
最大像素強度值maxPixelIntensity；ui
最小像素強度值minPixelIntensity。.net
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)
3、完整代碼
下圖爲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 版權聲明：本文爲博主原創文章，轉載請附上博文連接！