前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下。

本文主要有以下几部分内容:

  1. 部分源码理解
  2. 如何迁移到v2.0
  3. v2.0官方文档译文

 

关于heatmap.js介绍,请看这里: http://www.oschina.net/p/heatmap-js

目前,对于热力图的开发,百度、高德开发平台上使用的都是这款JS开源库。当然,现在还有我们公司:P

百度示例:http://developer.baidu.com/map/jsdemo.htm#c1_15

高德示例:http://lbs.amap.com/api/javascript-api/example/layers/heatmap/

PS:本人对JS只能算是初级水平,刚开始写热力图插件的时候,真是一头雾水。充分利用搜索引擎后,在百度的开源库发现了这个(示例源文件),总算有点眉目了。替换了地图实例对象,剩下的难点是图层处理和像素坐标转换,删删改改,也弄出了插件的1.0版。v2.0版本的内容与v1.0相比还是有很多不同的,经过大半天废寝忘食的努力,终于迁移到了2.0(准确的说是v2.0.5),也算对得起忘吃的午饭。

 

部分源码理解

参数max

经过源码阅读和测试,数据集合中的max参数表示热力点权值的最大值,用于热力颜色渐变的计算。其本质是热力区域内部填充颜色的透明度。

使用到max的算式: