一 、热力图定义

热力图（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. 基于Webkit的浏览器关键渲染路径介绍

    关键渲染路径概念 浏览器是如何将HTML.JS.CSS.image等资源渲染成可视化的页面的呢?本文简单介绍一下渲染过程中涉及到的关键步骤. 该过程分为四步:模型对象的构建.渲染树构建.布局.绘制. ...

  2. <mvn:default-servlet-handler/>标签作用

    servlet在找页面时,走的是dispatcherServlet路线.找不到的时候会报404 加上这个默认的servlet时候,servlet在找不到的时候会去找静态的内容.

  3. java8 集合神操作

    public class StreamUtils { private static final List<Integer> listInteger = Lists.newArrayList ...

  4. Java - HashSet源码解析

    java提高篇(二四)-----HashSet 一.定义 public class HashSet<E> extends AbstractSet<E> implements S ...

  5. putty连接ubuntu：network error:connection refused

    原因: ubuntu存在一个bug:在/var/run/目录下缺少一个文件夹sshd 解决方法: 在命令行输入: sudo mkdir /var/run/sshd sudo /usr/sbin/ssh ...

  6. POJ3186(KB12-O DP)

    Treats for the Cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5801   Accepted: 30 ...

  7. JS 获取css transform中的值

    可以参考这位博主的文章https://www.cnblogs.com/zhenwoo/p/4993780.html 不想看直接想看怎么解决的看这: var translates= document.d ...

  8. PHP中NOTICE错误常见解决方法

    对于初学者,肯定会遇到不同的错误提示,比如:警告,致命,等等,其中NOTICE错误等级最低,页面中,好多类似 Notice: Use of undefined constant title - ass ...

  9. Codeforces Round #545 (Div. 1) 简要题解

    这里没有翻译 Codeforces Round #545 (Div. 1) T1 对于每行每列分别离散化,求出大于这个位置的数字的个数即可. # include <bits/stdc++.h&g ...

  10. CSS隐藏多余的文字

    效果: <p><strong>商品名称:</strong>新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</p></div> ...