一 、热力图定义

热力图（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. 无责任Windows Azure SDK .NET开发入门篇（一）：开发前准备工作

    Windows Azure开发前准备工作 什么是 Azure SDK for .NET?微软官方告诉我们:Azure SDK for .NET 是一套应用程序,其中包括 Visual Studio 工 ...

  2. DataSet & DataTable &DataRow 深入浅出

    本篇文章适合有一定的基础的人去查看 ,最好学习过一定net 编程基础在来查看此文章. 1.概念 DataSet是ADO.NET的中心概念.可以把DataSet当成内存中的数据库,DataSet是不依赖 ...

  3. CentOS7 配置静态IP

    在mini安装完CentOS7后,如果想让电脑能够上网,则必须要进行网络配置. 本虚拟机使用NAT模式上网,网络配置步骤如下: ifconfig命令查到机器网卡: vi /etc/sysconfig/ ...

  4. JdbcTemplate完全学习

    概述 Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDBC模板类是第一种工作模式. JdbcTe ...

  5. nginx多站点配置

    一.安装nginx https://yq.aliyun.com/articles/101144?spm=5176.10695662.1996646101.searchclickresult.70af9 ...

  6. 漫画 | Java多线程与并发（二）

    1.什么是线程池? 为什么要使用它? 2.Java中invokeAndWait 和 invokeLater有什么区别? 3.多线程中的忙循环是什么? 4.Java内存模型是什么? 线程内的代码能够按先 ...

  7. inline-block元素间隙处理

    要使多个块级元素并行显示,可使用float或者inline-block进行处理 使用inline-block会出现元素之间的间隙 <div class="demo"> ...

  8. 【机器学习】EM算法详细推导和讲解

    今天不太想学习,炒个冷饭,讲讲机器学习十大算法里有名的EM算法,文章里面有些个人理解,如有错漏,还请读者不吝赐教. 众所周知,极大似然估计是一种应用很广泛的参数估计方法.例如我手头有一些东北人的身高的 ...

  9. ThinkPHP5自定义分页样式

    1.在thinkphp/library/think/paginator/driver目录下新建文件Page.php 注意命名空间和继承 <?php namespace think\paginat ...

  10. 使用excel开发平台活字格搭建物流管理系统

    物流管理系统是指包含完整的物流公司信息.物流寄件信息.物流运输信息以及物流寄件单位等管理系统.功能完善的物流管理系统,能帮助物流企业更好的进行物流管理. 下面我们借助活字格,来设计一个简单的物流管理系 ...