java热力图分布_热力图-自有数据图层-示例中心-JS API 示例 | 高德地图API

本文展示了如何使用高德地图API在网页中创建Java热力图分布。通过JavaScript示例代码,详细解释了如何初始化地图、设置热力图参数,并加载数据以显示热力图。同时,提供了检查浏览器是否支持canvas的功能,确保热力图能在兼容的浏览器中正常显示。
摘要由CSDN通过智能技术生成
热力图

html,

body,

#container {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

显示热力图

关闭热力图

var map = new AMap.Map("container", {

resizeEnable: true,

center: [116.418261, 39.921984],

zoom: 11

});

if (!isSupportCanvas()) {

alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')

}

//详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html

//参数说明如下:

/* visible 热力图是否显示,默认为true

* opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity

* radius 势力图的每个点的半径大小

* gradient {JSON} 热力图的渐变区间 . gradient如下所示

*{

.2:'rgb(0, 255, 255)',

.5:'rgb(0, 110, 255)',

.8:'rgb(100, 0, 255)'

}

其中 key 表示插值的位置, 0-1

value 为颜色值

*/

var heatmap;

map.plugin(["AMap.Heatmap"], function () {

//初始化heatmap对象

heatmap = new AMap.Heatmap(map, {

radius: 25, //给定半径

opacity: [0, 0.8]

/*,

gradient:{

0.5: 'blue',

0.65: 'rgb(117,211,248)',

0.7: 'rgb(0, 255, 0)',

0.9: '#ffea00',

1.0: 'red'

}

*/

});

//设置数据集:该数据为北京部分“公园”数据

heatmap.setDataSet({

data: heatmapData,

max: 100

});

});

//判断浏览区是否支持canvas

function isSupportCanvas() {

var elem = document.createElement('canvas');

return !!(elem.getContext && elem.getContext('2d'));

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值