在arcgis for js api 环境下使用heatmap插件。

由于最新的heatmap没有提供 for arcgisjsapi  插件,懒得研究新版本代码,所以这里用的还是老版本的heatmap。

但是老的版本插件有个问题,就是在点聚合计算的时候是按照原坐标点分组的,这就造成当坐标值的精度很高时,所有的点都会单独作为一组,无论两个点相距多近。最终的结果就是地图上的每一个点都会是最高值,地图看起来是这样的。

解决方法就是 在 parseHeatmapData 方法中做干预,让其按照屏幕坐标分组而不是更为精确的经纬度(如果希望容差更大,还可以对屏幕坐标做四舍五入,容差增大十倍)。

修改后的parseHeatmapData  方法

parseHeatmapData: function (dataPoints) {
// variables
var i, parsedData, dataPoint;
// if data points exist
if (dataPoints) {
// create parsed data object
parsedData = {
max: 0,
data: []
};
if (!this.config.useLocalMaximum) {
parsedData.max = this.globalMax;
} // for each data point
for (i = 0; i < dataPoints.length; i++) {
// create geometry point
vdataPoint = esri.geometry.Point(dataPoints[i].geometry);
dataPoint = esri.geometry.toScreenGeometry(this._map.extent, this._map.width, this._map.height, vdataPoint);
//dataPoint
// if array value is undefined
if (!parsedData.data[dataPoint.x]) {
// create empty array value
parsedData.data[dataPoint.x] = [];
}
// array value array is undefined
if (!parsedData.data[dataPoint.x][dataPoint.y]) {
// create object in array
parsedData.data[dataPoint.x][dataPoint.y] = {};
// if count is defined in datapoint
if (dataPoint.hasOwnProperty('count')) {
// create array value with count of count set in datapoint
parsedData.data[dataPoint.x][dataPoint.y].count = dataPoint.count;
} else {
// create array value with count of 0
parsedData.data[dataPoint.x][dataPoint.y].count = 0;
}
}
// add 1 to the count
parsedData.data[dataPoint.x][dataPoint.y].count += 1;
// store dataPoint var
parsedData.data[dataPoint.x][dataPoint.y].dataPoint = vdataPoint;
// if count is greater than current max
if (parsedData.max < parsedData.data[dataPoint.x][dataPoint.y].count) {
// set max to this count
parsedData.max = parsedData.data[dataPoint.x][dataPoint.y].count;
if (!this.config.useLocalMaximum) {
this.globalMax = parsedData.data[dataPoint.x][dataPoint.y].count;
}
}
}
// convert parsed data into heatmap plugin formatted data
this.convertHeatmapData(parsedData);
}
},

修改后的效果:

heatmap for arcgisjsapi的更多相关文章

  1. 基于HTML5实现3D热图Heatmap应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...

  2. 【JS】heatmap.js v1.0 到 v2.0,详细总结一下:)

    前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...

  3. funsioncharts的图表操作heatmap

    网址:http://www.fusioncharts.com/dev/chart-guide/heat-map-chart/introduction.html 以下只是假数据,目前还没有实现动态数据获 ...

  4. 用Excel制作热图(heatmap)的方法

    http://jingyan.baidu.com/article/64d05a0240ec75de55f73bd8.html 利用Excel 2010及以上版本的"条件格式"--& ...

  5. Heatmap.js v2.0 – 最强大的 Web 动态热图

    Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...

  6. R实战之热点图(HeatMap)

    快速实现是搜索帮助文档的首要目的,所以此处涉及实战的文章一概略去传统帮助文档的理论部分,直接上代码加注释! 本文将介绍R语言下利用ggplot2包制作heatmap的代码 -------------- ...

  7. 基于HTML5实现的Heatmap热图3D应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. 已有众多文章分享了生成Heatmap热图原 ...

  8. 网页热力图 heatmap js

    HBuilder +js 实现网页热力图 废话不多说,上代码 <!DOCTYPE html> <html> <head> <title>111</ ...

  9. heatmap.2

    heatmap.2 {gplots} R Documentation Enhanced Heat Map Description A heat map is a false color image ( ...

随机推荐

  1. Java生成验证码(一)

    一.为什么要使用验证码     我们要通过验证码,由用户肉眼识别其中的验证码信息,从而区分用户是人还是计算机.    二.什么是验证码     验证码:是一种区分用户是计算机还是人的公共全自动程序. ...

  2. .net core 填坑记之—格式转换问题

    最近在将项目从.net 迁移到.net core环境中,迁移完成后,发布于Windows平台上进行测试,所有功能均能正常运行. 为了项目能够在正式环境也能正常运行,提前进行Linux环境部署(Cent ...

  3. Java基础(9)——数组

    难点儿的已经过去啦,现在又开始基础了哈~ 之前讲变量的时候,变量是一个个的呀~,那我要搞一串变量该啷个办呢?Java给我们出了个好东西叫数组(*^▽^*) 数组呢,就是将变量一组一组的存起来,这个也是 ...

  4. Java 基础(8)——流程控制

    上次的运算符都消化好了吗?每一天都要用到一些哦~ 以前有提到过一嘴,程序执行都是从上到下执行的,emm,学到这里,感觉这句话是对的也是错的了…… 如果都是一行一行执行下去的话,上节课的例子: 今天不上 ...

  5. AngularJs动态添加元素和删除元素

    动态添加元素和删除元素 //通过$compile动态编译html var html="<div ng-click='test()'>我是后添加的</div>" ...

  6. 003客户端负载均衡Ribbon & 短路器Hystrix

    1.POM配置 和普通Spring Boot工程相比,仅仅添加了Eureka.Ribbon.Hystrix依赖和Spring Cloud依赖管理 <dependencies> <!- ...

  7. 安装配置postgreSQL+pgcli+pgadmin3

    记录了postgreSQL数据库的完整的安装配置过程,以及postgreSQL的pgcli命令行智能提醒扩展,pgadmin3图形化管理客户端的配置安装.此postgresql是bigsql版安装详情 ...

  8. Perl学习笔记(1)----入门

    在UNIX/Linux 系统上,打开命令终端,输入 'rpm -q perl' 查看系统是否安装了 perl ---- 在自己的CentOS7 系统上,默认自带了 perl 软件: root@javi ...

  9. hdu 1102 Constructing Roads (Prim算法)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1102 Constructing Roads Time Limit: 2000/1000 MS (Jav ...

  10. 如何定位 Node.js 的内存泄漏

    基础知识 Node.js 进程的内存管理,都是有 V8 自动处理的,包括内存分配和释放.那么 V8 什么时候会将内存释放呢? 在 V8 内部,会为程序中的所有变量构建一个图,来表示变量间的关联关系,当 ...