ArcGIS API For JavaScript官方文件之熱力圖渲染
一、API類:HeatmapRenderer
require(["esri/renderers/HeatmapRenderer"], function(HeatmapRenderer){ /*主體程式碼*/ });
二、描述
HeatmapRenderer(熱力圖渲染器)將要素層的點資料渲染成視覺化柵格來強調密度較高或權值較高的區域。該渲染器使用Gaussian Blur(高斯模糊)技術來平均每個在由blurRadius確定的區域中的點的影響。Gaussian blur採用高斯分佈或正態分佈(也稱為貝爾曲線)在垂直和水平方向上傳播值。
標準正態分佈
這種平均函式水平和垂直地產生一個模糊的影響區域,但不是根據單個特定點生成。
對每個資料點都重複這個過程。每次執行計算時,blurred values(模糊值)都會新增到底層畫素,結果是累積的,所以附近有幾個點資料的畫素的blurred values累計值比只有一個點資料的畫素的blurred values累計值更高(以點資料的空間密度為衡量指標)。這個累積值被稱為畫素強度(the intensity of the pixel)。
這種畫素強度計算可以通過欄位屬性進一步調整。在計算每個點時,指定的屬性欄位中的值乘以blurred values,通過這個特性,點可以根據指定屬性的值獲得更高或更低的畫素強度(以點資料某個屬性值大小為衡量指標)。
通常,
有關渲染(rendering)、智慧製圖(smart mapping)和使用視覺化變數(visual variables)的更多資訊可以在Data Visualization指導主題以及在這個主題中引用的多個示例中找到。
三、示例
檢視示例來使用這個類
四、類層次結構
|_esri/renderers/HeatmapRenderer
五、建構函式
new HeatmapRenderer(options) | 根據json建立一個新的HeatMapRenderer物件 |
1、引數
<Object> options | 必填 | 構造一個HeatmapRenderer的引數化列表,參見options列表 |
2、options屬性
<Number> blurRadius | 選填 | 由每個資料點的大部分散發的blurred values(模糊值)而形成的圓的半徑(單位畫素),預設值:10畫素 |
必填 | 一個CSS color字串的陣列(#RGB,#RRGGBB,rgb(r,g,b),RGBA(r,g,b,a)),需要最少兩個元素以構成渲染需要的顏色坡道 | |
選填 | 作為資料點權重值的屬性欄位 | |
<Number>maxPixelIntensity | 選填 | 對應於顏色坡道中最後顏色的畫素強度值,畫素強度值大於這個值也會被賦予該顏色。預設值:100 |
<Number>minPixelIntensity | 選填 | 對應於顏色坡道中初始顏色的畫素強度值,畫素強度值小於這個值也會被賦予該顏色。預設值:0 |
3、示例
var heatmapRenderer = new HeatmapRenderer({
colors: ["rgba(0, 0, 255, 0)","rgb(0, 0, 255)","rgb(255, 0, 255)", "rgb(255, 0, 0)"],
blurRadius: 12,
maxPixelIntensity: 250,
minPixelIntensity: 10
});
六、屬性
blurRadius | Number | 由每個資料點的大部分散發的blurred values(模糊值)而形成的圓的半徑(單位畫素),預設值:10畫素 |
colorStops | Object[] | 描述渲染器顏色坡道的colorStop物件構成的陣列,它比colors屬性更具有專一性 |
colors | String[] | 一個CSS color字串的陣列(#RGB,#RRGGBB,rgb(r,g,b),RGBA(r,g,b,a)) |
field | String | 作為資料點權重值的屬性欄位 |
maxPixelIntensity | Number | 對應於顏色坡道中最後顏色的畫素強度值 |
minPixelIntensity | Number | 對應於顏色坡道中初始顏色的畫素強度值 |
七、方法
方法名 | 返回值型別 | 摘要 |
setBlurRadius(blurRadius) | 無 | 設定渲染器的模糊半徑 |
setColorStops(stops) | HeatmapRenderer | 設定colorStops屬性,並返回對應的HeatmapRenderer例項以便於使用方法鏈 |
setColors(colors) | 無 | 用於為渲染器新增顏色坡道 |
setField(field) | 無 | 設定作為資料點權重值的屬性欄位 |
setMaxPixelIntensity(maxPixelIntensity) | 無 | 設定渲染器的maxPixelIntensity |
setMinPixelIntensity(minPixelIntensity) | 無 | 設定渲染器的minPixelIntensity |
toJson() | String | 返回渲染器的options引數的JSON字串描述 |
八、屬性細節
1. <Object[]> colorStops
描述渲染器顏色坡道的colorStop物件構成的陣列,它比colors屬性更具有專一性
注意:需要ratio或者value
colorStop需要如下屬性:(添加於v3.12)
物件說明:
<colorStops>
<String> color | 必填 | CSS顏色字串、rgba值,或者是Color物件。由ratio或者value指定顏色的stop點。注意:這個屬性是必填的 |
<Number> ratio | 必填 | 介於0-1之間的值。描述colorStop中對應的顏色梯度各部分的比例。ratio屬性優先於value屬性,因為所有內容都將在內部使用ratio,ratio被用於建立一個canvas顏色梯度並和一樣遵從相同的規則。 |
<Number> value | 必填 | 畫素強度值,描述與顏色對應的畫素強度值。就像在colorInfo中一樣,使用value屬性將忽略maxPixelIntensity屬性和minPixelIntensity屬性,它實際上將這些屬性設定為colorStops陣列中的最大值和最小值。硬性值轉換為比率,以建立在熱力圖計算中使用的顏色梯度。設定minPixelIntensity或maxPixelIntensity之後,設定帶有值的colorStops,將移除顏色坡道和畫素強度值之間的硬性連結。 |
示例:
var heatmapRenderer = new HeatmapRenderer({
blurRadius: 10,
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)"}],
});