ArcGIS API For JavaScript官方文档之热力图渲染

一、API类:HeatmapRenderer            esri/renderers/HeatmapRenderer

二、描述

    HeatmapRenderer(热力图渲染器)将要素层的点数据渲染成栅格可视化来强调密度较高或加权值较高的区域。该渲染器使用Gaussian Blur(高斯模糊)技术来平均测量每个在由blurRadius确定的区域中的点的影响。Gaussian blur采用高斯或正态分布(也称为Bell曲线)来在垂直和水平方向上传播值。

    标准正态分布


    这种平均函数应用于水平和垂直地产生一个影响的模糊区域,而不是根据单个特定点产生。


    每个点都重复这个过程。每次计算执行时,将blurred values(模糊值)添加到底层像素。结果是累积的,所以附近有几个点数据的像素比只有一个点数据的像素的值更高(以数据密度为衡量指标)。这个累积值称为像素的intensity(强度)。通过字段属性可以进一步调整intensity计算,在计算每个点时,从指定属性字段中的值乘以blurred values。通过这个属性,点可以根据指定属性的值来获得更高或更低的权重(以数据权重为衡量指标)。

    calculated intensity值用来分配颜色给像素。color选项指定的颜色斜坡根据maxPixelIntensityminPixelIntensity的值进行划分。通常,minPixelIntensity将为0,并且maxPixelIntensity将设置为适当的高值,默认值为100。但是这对您的数据集和预期范围可能并不适合。当使用field来为数据点加权时,设置minPixelIntensity为0以上可能有助于视觉过滤出频繁发生但低值点集群。此属性不会以任何方式过滤数据或修改calculated intensity值,但是,要调整颜色斜坡,这样像素就需要更高的强度值才能获得明显的颜色。确定minPixelIntensity和maxPixelIntensity的最佳值是留给开发人员的练习,由于不同类型、尺度、密度和分布的数据将需要不同的值来创建一个视觉愉悦的高Intensity区域和低Intensity区域的对比。

    有关渲染、智能制图和使用可视化变量的更多信息可以在Data Visualization指导主题中找到,以及在本主题中引用的多个示例。

三、示例

查看示例来使用这个类

四、类层次结构

esri/renderers/Renderer

    |_esri/renderers/HeatmapRenderer

五、构造函数

new HeatmapRenderer(options)                ——   从json创建一个新的HeatmapRenderer对象

1、参数

①<Object> options                        必填                    构造一HeatmapRenderer的参数化列表。参见options列表。 

2、options列表

<Number>blurRadius                     选填                    圆的半径(像素),圆上的每个点的值大部分都被散布出来。默认值:10

<String[]>colors                              必填                    一个CSS color字符串的数组(#RGB,#RRGGBB,rgb(r,g,b),RGBA(r,g,b,a)。需要最少两

                                                                                    个元素用于描述渲染需要的颜色斜坡。

<String>field                                   选填                    作为点的权重值的属性字段。

<Number>maxPixelIntensity          选填                   像素intensity值,intensity值小于此maxPixelIntensity的像素会被分配颜色斜坡上的颜色。

<Number>minPixelIntensity          选填                    像素intensity值,intensity值大于此minPixelIntensity的像素会被分配颜色斜坡上的颜色。

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
});


               


    

    

猜你喜欢

转载自blog.csdn.net/qq_35732147/article/details/80072504
今日推荐