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，通过这个特性，点可以根据指定属性的值获得更高或更低的像素强度（以点数据某个属性值大小为衡量指标）。

    像素强度的值用来给像素分配颜色。colors选项根据maxPixelIntensity和minPixelIntensity的值成比例划分构成颜色坡道。

    通常，minPixelIntensity将被设置为0，并且maxPixelIntensity将被设置为适当的较高值，默认值为100。但是这对您的数据集和预期渲染范围可能并不适合。当使用field来为数据点加权时，设置minPixelIntensity为0以上可能有助于视觉过滤除掉空间密度较高但低属性值的点集群。此特性不会以任何方式过滤数据或修改像素强度值，而是调整了颜色坡道，这样相应的像素就需要更高的像素强度值才能获得明显的颜色。由于不同类型、尺度、密度和分布的数据将需要不同的关于这个特性的值来创建一个视觉愉悦、对比明显的热力图，所以确定minPixelIntensity和maxPixelIntensity的最佳值需要开发人员细细斟酌。

    有关渲染(rendering)、智能制图(smart mapping)和使用可视化变量(visual variables)的更多信息可以在Data Visualization指导主题以及在这个主题中引用的多个示例中找到。

三、示例

查看示例来使用这个类

四、类层次结构

esri/renderers/Renderer

    |_esri/renderers/HeatmapRenderer

五、构造函数

new HeatmapRenderer(options)

根据json创建一个新的HeatMapRenderer对象

1、参数

<Object> options

必填

构造一个HeatmapRenderer的参数化列表，参见options列表

2、options属性

<Number> blurRadius	选填	由每个数据点的大部分散发的blurred values(模糊值)而形成的圆的半径（单位像素），默认值：10像素
<String[]>colors	必填	一个CSS color字符串的数组(#RGB，#RRGGBB，rgb(r,g,b)，RGBA(r,g,b,a))，需要最少两个元素以构成渲染需要的颜色坡道
<String>field	选填	作为数据点权重值的属性字段
<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颜色梯度并和CanvasGradient.addColorStops一样遵从相同的规则。
<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)"}],
});