heatmap for arcgisjsapi

在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);
            }
        },

修改后的效果:

时间: 2024-08-05 11:05:51

heatmap for arcgisjsapi的相关文章

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

前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这里: http://www.oschina.net/p/heatmap-js 目前,对于热力图的开发,百度.高德开发平台上使用的都是这款JS开源库.当然,现在还有我们公司:P 百度示例:http://developer.baidu.com/map/jsdemo.htm#c1_15 高德示例:http

R实战之热点图(HeatMap)

快速实现是搜索帮助文档的首要目的,所以此处涉及实战的文章一概略去传统帮助文档的理论部分,直接上代码加注释! 本文将介绍R语言下利用ggplot2包制作heatmap的代码 -------------------------我是分割线------------------------------- 测试数据: 数据中的空白行.列用以分割heatmap,区别不同的数据处理,如不需要删除即可. 1.制作连续型 1 #引入包 2 library(ggplot2) 3 library(reshape) 4

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

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. 已有众多文章分享了生成Heatmap热图原理,可参考<How to make heat maps>和<How to make heat maps in Flex>,本文将介绍基于HTML5技术的实现方式,主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用,先上最终例子实现的界面效果和操作视频: 实现Heat

每R一点:层次聚类分析实例实战-dist、hclust、heatmap等(转)

聚类分析:对样品或指标进行分类的一种分析方法,依据样本和指标已知特性进行分类.本节主要介绍层次聚类分析,一共包括3个部分,每个部分包括一个具体实战例子. 1.常规聚类过程: 一.首先用dist()函数计算变量间距离dist.r = dist(data, method=" ") 其中method包括6种方法,表示不同的距离测度:"euclidean", "maximum", "manhattan", "canberra

construct a heatmap with matrix by HeatMap

HMobj = HeatMap(alldata,'RowLabels',{'JB1','JB2','JB3','JB4','JB5','JB6','JB7','JB8','JB9'}) alldata is a 9*253 matrix. Data range is [0 680]. 如何修改colorbar 显示的范围呢?

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

Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页,帮助您研究和可视化用户的行为. Heatmap.js V2.0 是目前网络上最先进的热图可视化库.新的2.0版本 Heatmap.js 更快,拥有更强的渲染模块,使用更方便,因此您可以快速掌握和扩展自定义功能. 插件下载     效果演示 下面是一个简单的调用示例: // mi

羽化效果的HeatMap

用采样点制作热力图是个非常常见的需求.热力图可以给地图的阅读者直观的信息,下面就看看如何在 ArcGIS Pro 中做一个漂亮的HeatMap. 1. 准备好采样点数据,当然是量大更优.我这里用了全球地震点数据,大约有 21W+ 的数据量.像这一类的数据可以从一些提供公开数据的网站获取,例如 USGS . 2. 使用 ArcGIS 中的密度分析工具可以从点数据直接生成密度栅格,工具位于 ArcToolbox -- Spatial Analyst -- Density 工具集下.这里我采用了 Ke

浅谈Heatmap

在自然界之中,蛇的眼睛有夜视功能,即便是茫茫黑夜,它也能轻而易举的找到猎物,这是因为任何物体都会辐射热红外,且辐射的高低和温度成正比,由于生命体的体温会明显高于周围环境的温度,所以在蛇眼面前便无处遁形.热红外成像被广泛应用于军事领域,士兵带上能识别热红外的眼镜后能轻而易举的发现藏匿的敌人. 热红外成像 唠叨了半天,听上去似乎有点跑题了,其实不然,对互联网从业者而言,同样需要有火眼金睛,以便识别网友的喜好,此时的衡量标准是点击,点击越多则表示越喜欢,此技术被称作Heatmap,已经有网站提供此类服

funsioncharts的图表操作heatmap

网址:http://www.fusioncharts.com/dev/chart-guide/heat-map-chart/introduction.html 以下只是假数据,目前还没有实现动态数据获取,哪位大神可以帮助我,那便是赶集不尽了. 注:HTML我是嵌套的,所以没有头文件,各位用的时候可以自己加 图表展示 第一种方法 后台假数据 StringBuilder stringBuilder = new StringBuilder(); 2 3 //标题 4 stringBuilder.app