在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基础(十二)IO输入输出

    一.IO 概述 1.IO 概念 IO:I 代表 Input 输入:O 代表 Output 输出. Java 中 IO 是以流为基础进行输入输出,所有的数据被串行化(保存)写入输出流,或者从输入流读入. ...

  2. java读取txt文件,对字符串进行操作后导出txt文件

    嘿嘿,代码略为简单,不再多做解释,直接上码! package org.lq.com.util; import java.io.File; import java.io.InputStreamReade ...

  3. node.js之内存机制特性

    Node.JS的V8引擎具有垃圾回收机制与内存限制的特性,V8的内存限制:64位系统约为1.4GB.32位系统约为0.7GB:V8采用基于分代式垃圾回收机制,堆内存结构分为新生代和老生代,新生代达到一 ...

  4. 如何正确实现 IDisposable 接口

    MSDN建议按照下面的模式实现IDisposable接口: public class Foo: IDisposable { public void Dispose() { Dispose(true); ...

  5. H5安卓端浏览器如何去除select的边框?

    H5安卓端浏览器如何去除select的边框? android下没有问题,在apple下无三角号. -webkit-appearance:none; border-radius:0

  6. ArrayList的使用方法详解(转)

    1.什么是ArrayList    ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和I ...

  7. 【阿里云产品公测】云引擎ACE公测感受

    听说阿里云ACE开始公测了,怀着激动的心情赶紧试用了一下. 这是我用ACE做出来的效果:http://haoyuming.aliapp.com/ 大家点点看看啊 A*W/Q<~I   :eSwX ...

  8. 【Machine Learning】决策树之简介(1)

    Content 1.decision tree representation 2.ID3:a top down learning algorithm 3.expressiveness of data ...

  9. 【Python】猜数小游戏(文件操作)

    人生苦短,我用Python 关键词 1.多用户 2.字典记录所有成绩 3.每次游戏轮数&总游戏次数&平均每次游戏需要多少轮 字典Dictionary.列表List.元组Tuple差异化 ...

  10. SQL Server ->> 利用CONVERT/STR/FORMAT函数把浮点型数据格式化/转换成字符串

    在SQL Server下想把数字(包括浮点型和整型)转换成字符串,保留数据原本的样子或者根据需要转换成另外指定的格式可能就不仅仅是一条CAST(XXXX AS NVARCHAR)这么简单的事情了. 无 ...