Cesium热力图实现
转自原文 Cesium热力图实现
var _getColorPalette = function(config) {
  var gradientConfig = config.gradient || config.defaultGradient;
  var paletteCanvas = document.createElement('canvas');
  var paletteCtx = paletteCanvas.getContext('2d');
  paletteCanvas.width = 256;
  paletteCanvas.height = 1;
  var gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);
  for (var key in gradientConfig) {
    gradient.addColorStop(key, gradientConfig[key]);
  }
  paletteCtx.fillStyle = gradient;
  paletteCtx.fillRect(0, 0, 256, 1);
  return paletteCtx.getImageData(0, 0, 256, 1).data;
};
对于输入的点数据,会根据点坐标生成一个黑色圆阴影效果。
//生成一个阴影模板
var _getPointTemplate = function(radius, blurFactor) {
  var tplCanvas = document.createElement('canvas');
  var tplCtx = tplCanvas.getContext('2d');
  var x = radius;
  var y = radius;
  tplCanvas.width = tplCanvas.height = radius*2;
  if (blurFactor == 1) {
    tplCtx.beginPath();
    tplCtx.arc(x, y, radius, 0, 2 * Math.PI, false);
    tplCtx.fillStyle = 'rgba(0,0,0,1)';
    tplCtx.fill();
  } else {
    var gradient = tplCtx.createRadialGradient(x, y, radius*blurFactor, x, y, radius);
    gradient.addColorStop(0, 'rgba(0,0,0,1)');
    gradient.addColorStop(1, 'rgba(0,0,0,0)');
    tplCtx.fillStyle = gradient;
    tplCtx.fillRect(0, 0, 2*radius, 2*radius);
  }
var tpl;
  if (!this._templates[radius]) {
    this._templates[radius] = tpl = _getPointTemplate(radius, blur);
  } else {
    tpl = this._templates[radius];
  }
  // value from minimum / value range
  // => [0, 1]
  //根据value值设置阴影的alpha通道,后面可以通过alpha值获取value值
  var templateAlpha = (value-min)/(max-min);
  // this fixes #176: small values are not visible because globalAlpha < .01 cannot be read from imageData
  shadowCtx.globalAlpha = templateAlpha < .01 ? .01 : templateAlpha;
  shadowCtx.drawImage(tpl, rectX, rectY);
  // update renderBoundaries
  if (rectX < this._renderBoundaries[0]) {
      this._renderBoundaries[0] = rectX;
    }
    if (rectY < this._renderBoundaries[1]) {
      this._renderBoundaries[1] = rectY;
    }
    if (rectX + 2*radius > this._renderBoundaries[2]) {
      this._renderBoundaries[2] = rectX + 2*radius;
    }
    if (rectY + 2*radius > this._renderBoundaries[3]) {
      this._renderBoundaries[3] = rectY + 2*radius;
    }
}
首先呢,阴影是黑色的,所以接下来heatmap会进行一个像素点重新着色的过程,根据每个点的alpha值*4(rgba步长)得出一个offset,然后从调色板上取颜色。因为上面设置了阴影透明度效果是递减的,所以在获取颜色的时候,就能获得一个平滑的渐变效果。这样就得到了热力图。
_colorize: function() {
  var x = this._renderBoundaries[0];
  var y = this._renderBoundaries[1];
  var width = this._renderBoundaries[2] - x;
  var height = this._renderBoundaries[3] - y;
  var maxWidth = this._width;
  var maxHeight = this._height;
  var opacity = this._opacity;
  var maxOpacity = this._maxOpacity;
  var minOpacity = this._minOpacity;
  var useGradientOpacity = this._useGradientOpacity;
  if (x < 0) {
    x = 0;
  }
  if (y < 0) {
    y = 0;
  }
  if (x + width > maxWidth) {
    width = maxWidth - x;
  }
  if (y + height > maxHeight) {
    height = maxHeight - y;
  }
  var img = this.shadowCtx.getImageData(x, y, width, height);
  var imgData = img.data;
  var len = imgData.length;
  var palette = this._palette;
  for (var i = 3; i < len; i+= 4) {
    var alpha = imgData[i];
    var offset = alpha * 4;
    if (!offset) {
      continue;
    }
    var finalAlpha;
    if (opacity > 0) {
      finalAlpha = opacity;
    } else {
      if (alpha < maxOpacity) {
        if (alpha < minOpacity) {
          finalAlpha = minOpacity;
        } else {
          finalAlpha = alpha;
        }
      } else {
        finalAlpha = maxOpacity;
      }
    }
    imgData[i-3] = palette[offset];
    imgData[i-2] = palette[offset + 1];
    imgData[i-1] = palette[offset + 2];
    imgData[i] = useGradientOpacity ? palette[offset + 3] : finalAlpha;
  }
  img.data = imgData;
  this.ctx.putImageData(img, x, y);
  this._renderBoundaries = [1000, 1000, 0, 0];
},
'if(heightValue.r<1.0/255.0) heightValue.a= 0.0; ' +
在Openlayer中实现热力图起始是很方便的。具体可参考下面的几篇文章。


进一步学习的参考资料
至于绘制的过程和原理、及完整代码,可以参考
http://www.wangshaoxing.com/blog/how-to-draw-a-heatmap.html
code
https://github.com/wshxbqq/WebGL-HeatMap
Cesium热力图实现的更多相关文章
- cesium 热力图
 - Cesium专栏-热力图(附源码下载)
		
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
 - cesium 水面、淹没  效果
		
水面效果 参考: http://cesiumcn.org/topic/158.html http://api.rivermap.cn/cesium/rivermap/map.html https:// ...
 - Cesium学习系列汇总
		
内容比较多,完整看完需要大概10分钟,废话不多说,撸起袖子,加油干!!! 1.前言 按照套路,先介绍一下什么是Cesium. Cesium ['siːzɪəm]是JavaScript开源库,通过Ces ...
 - 将Cesium Tools用于更好的构建管理
		
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium技术正在给建筑业带来革命性的变化.我们与 partn ...
 - cesium自定义气泡窗口infoWindow
		
一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说 ...
 - cesium核心类Viewer简介
		
1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget fo ...
 - Cesium简介以及离线部署运行
		
Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...
 - 基于开源项目SharpMap的热力图(HeatLayer)实现。
		
当前公司需要一个用时较少的热力图呈现方案,在避免较底层的GDI开发和比较了多家GIS产品的实际效果之后,团队决定用sharpMap的API来实现,由于之前框架采用的是另外一个开源项目GMap.net, ...
 
随机推荐
- 在spring boot中使用webSocket组件(一)
			
最近在项目中使用到了spring的webSocket组件,在这里和大家分享下,如有错误,欢迎大家指正. 在这里我使用的IDE工具是Intellij idea,框架是spring boot.spring ...
 - 对java多线程的一些浅浅的理解
			
作为一名JAVA初学者,前几天刚刚接触多线程这个东西,有了些微微的理解想写下来(不对的地方请多多包涵并指教哈). 多线程怎么写代码就不说了,一搜一大堆.说说多线程我认为最难搞的地方,就是来回释放锁以及 ...
 - ghost模板总结
			
ghost模板的二次开发相对容易,附文档: http://themes.ghost.org/v0.6.0/docs/meta_title 这里有各行变量的说明. {{#is "home&qu ...
 - nginx的常用负载均衡算法,分别是
			
随机分配,hash一致性分配,最小连接数分配,主备分配 随机,轮训,一致性哈希,主备,https://blog.csdn.net/liu88010988/article/details/5154741 ...
 - Selenium WebDriver-通过ActionChains实现页面元素拖拽
			
#encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...
 - 大数据学习——scala集合练习
			
package com /** * Created by ZX on 2016/4/5. */ object ListTest { def main(args: Array[String]) { // ...
 - VMware Workstation 14 PRO 下安装Ubuntu 16.04 LTS教程
			
一.准备好安装的VMware Workstation 14 PRO 1.VMware Workstation 14 PRO下载链接:http://rj.baidu.com/soft/detail/13 ...
 - PostgreSQL 全文索引
			
-- 首先要创建自定义的词典,在不使用停用词文件的情况下创建自定义词典,例如: CREATE TEXT SEARCH DICTIONARY english_stem_nostop ( Template ...
 - poj 1734  Sightseeing trip判断最短长度的环
			
Sightseeing trip Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5590 Accepted: 2151 ...
 - c/c++内存泄露的检测方法
			
此文内容摘自 https://zhuanlan.zhihu.com/p/22664202 作为 从零开始的 JSON 库教程(三):解析字符串解答篇 的笔记 1A. Windows 下的内存泄漏 ...