ArcGIS API for Javascript之专题图的制作（四）热力图渲染（上）
一 、热力图定义
热力图（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
版权声明：本文为博主原创文章，转载请附上博文链接！
转载于:https://www.cnblogs.com/telwanggs/p/10208723.html
ArcGIS API for Javascript之专题图的制作（四）热力图渲染（上）相关推荐
- 计算机辅助遥感制图的基本过程,项目八-遥感专题图的制作
项目九遥感专题图的制作,授课教师:王冬梅,任务一遥感专题图的制作,一.遥感影像地图,遥感影像地图是一种以遥感影像和一定的地图符号来表现制图对象地理空间分布和环境状况的地图.在遥感影像地图中,图面内容要 ...
- 用ArcGIS API for JavaScript制作三维可视化图
前段时间接了一个项目,涉及到了空间信息三维可视化的工作.之前在网上查找无意中看到ArcGIS API for JavaScript(以下简称"ArcGIS API"或"该 ...
- ArcGIS API for Javascript学习
一.ArcGIS API for Javascript 介绍 ArcGIS API for Javascript 是由美国 Esri 公司推出,跟随ArcGIS 9.3 同时发布的,是Esri 基于d ...
- ArcGIS API for JavaScript：Layer之间那点儿事
先来看一个模型: |–TiledMapServiceLayer | |–ArcGISTiledMapServiceLayer |–DynamicLayer | |– ...
- 地图小部件—ArcGIS API for JavaScript
电子地图和传统的纸质地图最大的区别就是交互的程度不一样,而交互性很大程度上由地图的小部件所控制.传统的纸制地图主要有三个基本的部件(要素):比例尺.指北针.图例,而电子地图有更多的交互性小部件选择,在 ...
- ArcGIS API for JavaScript 开发笔记
1.Vue.js 中引入 ArcGIS API for JavaScript 4.x 安装 esri-loader npm install --save esri-loader 引入 ArcGIS A ...
- ArcGIS API for JavaScript之基础篇（二）
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...
- ArcGIS API for JavaScript——地图展示
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放.平移.定位.实时显示坐标.展示地图要素(指北针.比例尺.图例).切换地图等.本文将详细介绍地图展示的 ...
- ArcGIS API for JavaScript 4.0尝鲜——WebGIS前端开发大杀器
已经发布的ArcGIS API for JavaScript 4.0有着最前沿的新特性,这是一个更加对于开发者更加友好的Web API.3D的支持让你可以以更加炫酷的方式展示地理数据,而更加简洁明了的 ...
最新文章
- 【问链财经-区块链基础知识系列】 第三十课 区块链金融面临的四大挑战
- 矩阵快速幂 学习笔记
- java manager.apk_java实现静默安装apk
- JavaScript Promise对象
- Nginx解决403 forbidden
- PHPThumb处理图片
- dw实时视图与网页不一样_美团点评 Flink 实时数仓应用经验分享
- 告诉你一个真实的数字化
- 下列选项中非法的c语言转义字符,c语言练习题t答案
- 常用免费DEM数据汇总（含下载使用方法）
- 云数据中心容灾备份方案
- 配电室综合监控系统 实现实时监控和 智能控制
- div垂直居中的几种方法
- laravel 使用 vue 和 element
- 计算机专业的男生喜欢你,男生真心喜欢你的五个表现
- 如何改变图片尺寸？怎么调整图片大小？
- multiprocessing.pool详解
- x64dbg入门学习
- 【转帖】计算机编程语言
- 如何更换我的密钥对？