1. 程式人生 > >ArcGIS API For JavaScript官方文件之熱力圖渲染

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通過這個特性,點可以根據指定屬性的值獲得更高或更低的畫素強度以點資料某個屬性值大小為衡量指標)。

    通常,

minPixelIntensity將被設定為0,並且maxPixelIntensity將被設定為適當的較高值,預設值為100。但是這對您的資料集和預期渲染範圍可能並不適合。當使用field來為資料點加權時,設定minPixelIntensity為0以上可能有助於視覺過濾除掉空間密度較高但低屬性值的點叢集此特性不會以任何方式過濾資料或修改畫素強度值,而是調整了顏色坡道,這樣相應的畫素就需要更高的畫素強度值才能獲得明顯的顏色。由於不同型別、尺度、密度和分佈的資料將需要不同的關於這個特性的值來建立一個視覺愉悅、對比明顯的熱力圖,所以確定minPixelIntensitymaxPixelIntensity
的最佳值需要開發人員細細斟酌

    有關渲染(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)"}],
});