一 、热力图定义

热力图（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. Docker基础-容器操作

    1.创建容器 1.新建容器 可以使用docker create命令新建一个容器. [root@linux-node1 ~]# docker create -it ubuntu:latest ffc90 ...

  2. C#基础知识回顾--委托事件

    在上一篇看到他我一下子就悟了(续)---委托,被人狂喷.说写的太空,没有什么内容之类的.所以准备在这里重写下,不过还是按着以前的方式尽量简单的写.这里我们以打篮球为例. 第一步:首先,其他对象订购事件 ...

  3. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  4. JavaScript 日期多加一天 方法

    今天查看项目发现有出bug,由于未了符合sql语句的要求,前台网页显示的时候传到后台的时候要+1天, 网上查看了别人写的,发现多多少少有点漏洞,经过我自己总结,写出了达到了我要求的 var str = ...

  5. Linux常用基本命令(cut)

    cut命令 作用:从文件的每一行剪切字节,字符或者字段,类似与编程语言中的字符串截取函数 格式:cut [option] [file] -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的 ...

  6. 安装php扩展包

    sudo apt-get install php5-gd curl libcurl3 libcurl3-dev php5-curl 重启Apache sudo service apache2 rest ...

  7. 【java基础】基础小总结

    学习java,将自己的心得或总结写下来吧. Java 标识符 标识符由字母,下划线(_),美元符($)和数字组成. 标识符不能以数字开头. 标识符不能使java关键字. 标识符对大小写敏感. Java ...

  8. 语义SLAM的数据关联和语义定位（四）多目标测量概率模型

    多目标模型 这部分想讲一下Semantic Localization Via the Matrix Permanent这篇文章的多目标测量概率模型.考虑到实际情况中,目标检测算法从单张图像中可能检测出 ...

  9. Mariadb MySQL逻辑条件判断相关语句、函数使用举例介绍

    MySQL逻辑条件判断相关语句.函数使用举例介绍 By:授客 QQ:1033553122 1.  IFNULL函数介绍 IFNULL(expr1, expr2) 说明:假如expr1 不为NULL,则 ...

  10. ethernaut 以太坊靶场学习 （1-12）

    前言 这个靶场搜集了许多不同的 solidity 开发的问题,通过这个可以入门 区块链安全 Fallback 给出了源码 pragma solidity ^0.4.18; import 'zeppel ...