heatmap-amap.js: 基于高德地图JS API的热力图实现

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

##使用方法：

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

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

初始化高德热力图对象

    /*
    * 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方法

    heatmap.start();

设置数据。

	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

API说明

heatmap-amap.js还暴露了一些方法。

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

ZJZHOME / heatmap-amap.js

效果图

API说明

简介

发行版

贡献者

近期动态

ZJZHOME / heatmap-amap.js .gitee-modal { width: 500px !important; }

效果图

API说明

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

ZJZHOME / heatmap-amap.js