一 、热力图定义

热力图（heat map）也称热图，是以特殊颜色高亮区域的形式表示密度、温度、气压、频率等分布的不易理解和表达的数据。

二、HeatmapRenderer

esri/renderers/HeatmapRenderer类用来快速绘制热力图，将要素图层点数据渲染为强调更高密度或加权值区域的栅格可视化效果。构造函数为：

new HeatmapRenderer(options)
options包括：

圆半径blurRadius；

一组渲染器渐变颜色字符串colors，该属性是必需的；

加权heatmap点的属性名称field；

最大像素强度值maxPixelIntensity；

最小像素强度值minPixelIntensity。

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)

三、完整代码

下图为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
版权声明：本文为博主原创文章，转载请附上博文链接！

ArcGIS API for Javascript之专题图的制作（四）热力图渲染（上）的更多相关文章

  1. ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）

    转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...

  2. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

  3. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  4. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  5. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  6. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  7. ArcGIS API for JavaScript 4.x 本地部署之Nginx法

    上篇ArcGIS API for JavaScript 4.x 离线配置之IIS法提到,如何用IIS配置ArcGIS jsAPI: 本篇则使用http下的Nginx配置,其原理基本一致.https的部 ...

  8. ArcGIS API for JavaScript：Layer之间那点儿事

    先来看一个模型: |–TiledMapServiceLayer  |       |–ArcGISTiledMapServiceLayer  |–DynamicLayer  |       |–Dyn ...

  9. ArcGIS API for JavaScript使用中出现的BUG（1）

    本人在使用ArcGIS API for JavaScript开发一个地图的搜索框时,总是出现一个BUG.如图所示: 搜索框总是出不来. 该引用的也引用了,找了半天终于解决,是因为路径没有定义详细. 应 ...

随机推荐

  1. jQuery实现DropDownList(MVC)

    今天学点什么呢?想来想去觉得DropDownList还是要加强功力,因为以前写ASP.NET网站时,此功能用的非常之多.在练习之前,先温习一下以前练习的<Html.DropDownListFor ...

  2. 基于asp.net mvc的近乎产品开发培训课程（第四讲）

    演示产品源码下载地址:http://www.jinhusns.com/Products/Download  演示产品源码下载地址:http://www.jinhusns.com/Products/Do ...

  3. Scott用户的表结构

    在Oracle的学习之中,重点使用的是SQL语句,而所有的SQL语句都要在scott用户下完成,这个用户下一共有四张表,可以使用: SELECT * FROM tab; 查看所有的数据表的名称,如果现 ...

  4. oracle数据库无法导出空表的问题解决（开始于oracle11g）

    --设置系统参数 alter system set deferred_segment_creation=false; Select 'alter table '||table_name||' allo ...

  5. 前m大的数（hdu1280）

    前m大的数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  6. 图解SVN的branch合并到trunk的过程

    SVN branch合并到主线的整个过程相对来说还是比较繁琐的,下面一个图揭示了一个大概的过程: 1. 将branch上的代码update到本地. 2.将branch本地的代码commit到branc ...

  7. python深拷贝浅拷贝

    python深拷贝和浅拷贝问题: 什么是深拷贝? (个人理解)深拷贝就是将原有的数据一模一样的拷贝一份,然后存到另一个地址中,而不是引用地址 什么是浅拷贝? (个人理解)就是引用地址 (1)用等于号的 ...

  8. H5音乐播放器【歌单列表】

    上篇详细描述了播放页歌词如何实现跟随跟单滚动,如何解析歌词,那么歌单页又是如何生成的呢,话不多说,直接上图上代码! 首先需要获取数据,具体获取数据api请转到我跟我大兄弟博客去观看学习去,同时也感谢我 ...

  9. Python 自定义线程池

    """思路1,将任务放在队列 1)创建队列:(初始化) 2)设置大小,线程池的最大容量 3)真实创建的线程 列表 4)空闲的线程数量 2,着手开始处理任务 1)创建线程 ...

  10. JS获取填报扩展单元格控件的值

    1. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...