# heatmap-amap.js

**Repository Path**: zjzhome/heatmap-amap.js

## Basic Information

- **Project Name**: heatmap-amap.js
- **Description**: 基于高德地图JS API的热力图实现
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 23
- **Forks**: 7
- **Created**: 2014-07-27
- **Last Updated**: 2025-02-27

## Categories & Tags

**Categories**: webui, gis

**Tags**: None

## README

高德地图JS API V1.3的热力图实现，基于第三方库heatmap.js（官网地址：http://www.patrick-wied.at/static/heatmapjs/）。

##使用方法：

* 先后引入高德地图api和heatmap-amap.js。

``` html
<script src="http://webapi.amap.com/maps?v=1.3&key=yourkey"></script>
<script src="heatmap-amap.js"></script>
```

* 初始化高德热力图对象

``` javascript
    /*
    * map：地图对象
    * opts：可选参数，其中
    *   radius：热力图每个点的半径
    *   visible：热力图是否显示
    *   opacity：热力图的透明度，取值范围0~100
    *   gradient：热力图的渐变区间
    * 可参考heatmap.js的文档：https://github.com/pa7/heatmap.js/blob/master/README.md
    */
    var config =  {
        radius: 30,
        visible: true,
        opacity: 40,
        gradient: { 0.45: 'rgb(0,0,255)', 0.55: 'rgb(0,255,255)', 0.65: 'rgb(0,255,0)', 0.95: 'yellow', 1.0: 'rgb(255,0,0)' }
    };
    var heatmap = new AMap.Heatmap(map, config);
```
    
* 调用start方法

``` javascript
    heatmap.start();
```

* 设置数据。

``` javascript
	var obj = {
		max: 90, //权重最大值
        //lng为精度值，lat为纬度值，count为权重
		data: [
			{lng:114.169922, lat:30.606004, count: 80},
			{lng:114.322357, lat:30.640275, count: 60},
			{lng:114.33197, lat:30.556348, count: 90},
            ...
		]
	};
    
    //调用setDataSet()方法即可显示。
    heatmap.setDataSet(obj);
```   
## 效果图
![Screenshot](http://git.oschina.net/zjzhome/heatmap-amap.js/attach_files/download?i=3621&u=http%3A%2F%2Ffiles.git.oschina.net%2Fgroup1%2FM00%2F00%2F25%2FcHwGbFPU4wmAab1RAAQst7nU3wY734.png%3Ftoken%3D09a48867658f1014a86714a04c6a4922%26ts%3D1406464610%26filename%3Ddemo.png)  

## API说明
heatmap-amap.js还暴露了一些方法。

* setDataSet，见使用方法
* addDataPoint(lng, lat, count)，添加一组数据显示在热力图中。
* toggle()，切换热力图的显示与隐藏。
* clear()，清除热力图。