Class: HeatmapOverlay

HeatmapOverlay

热点图绘制类，结合heatmap.js完成热点图绘制。

const points =[
  {"lng":116.418261,"lat":39.921984,"count":50},
  {"lng":116.423332,"lat":39.916532,"count":51},
  {"lng":116.419787,"lat":39.930658,"count":15},
  {"lng":116.418455,"lat":39.920921,"count":40},
  {"lng":116.418843,"lat":39.915516,"count":100},
  {"lng":116.42546,"lat":39.918503,"count":6},
  {"lng":116.423289,"lat":39.919989,"count":18},
  {"lng":116.418162,"lat":39.915051,"count":80},
  {"lng":116.422039,"lat":39.91782,"count":11},
  {"lng":116.41387,"lat":39.917253,"count":7},
  {"lng":116.41773,"lat":39.919426,"count":42},
  {"lng":116.421107,"lat":39.916445,"count":4},
  {"lng":116.417521,"lat":39.917943,"count":27},
  {"lng":116.419812,"lat":39.920836,"count":23},
  {"lng":116.420682,"lat":39.91463,"count":60},
  {"lng":116.415424,"lat":39.924675,"count":8},
  {"lng":116.419242,"lat":39.914509,"count":15},
  {"lng":116.422766,"lat":39.921408,"count":25},
  {"lng":116.421674,"lat":39.924396,"count":21},
  {"lng":116.427268,"lat":39.92267,"count":1},
  {"lng":116.417721,"lat":39.920034,"count":51},
  {"lng":116.412456,"lat":39.92667,"count":7}];

const heatOverlay = new HeatmapOverlay({
  map: this.$map,
  radius: 20
});
heatOverlay.setData({
  max: 100,
  data: points
});

new HeatmapOverlay(options)

overlay/HeatmapOverlay.js, line 49

构造热点图覆盖物，通过HeatmapOptions设置热点图

Name Type Description
options HeatmapOptions

通过HeatmapOptions设置热点图相关样式

Name Type Default Description
map Map

热点图所在的map对象
radius Number 20 optional

每个数据点将具有的半径
opacity Number 0.6 optional

整个热图的全局不透明度。
blur Number 0.85 optional

将应用于所有数据点的模糊因子。 模糊因子越高，渐变将越平滑.
gradient Object { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"} optional

An object that represents the gradient (syntax: number string [0,1] : color string)

Classes

HeatmapOverlay

Methods

addData(data)

overlay/HeatmapOverlay.js, line 169

使用此功能仅用于动态添加数据点，而不用于数据初始化！功能将单个或多个数据点添加到热图的数据存储中。

Name Type Description
data Object | Array

需要动态添加的数据点,可以为单对象或者对象数组

Name Type Description
lng Number

经度(当data为单对象时)
lat Number

纬度(当data为单对象时)
count Number

点位对应的值(当data为单对象时)

clear()

overlay/HeatmapOverlay.js, line 237

清除热力图结果

getData(){Object}

overlay/HeatmapOverlay.js, line 229

返回热力图点位数据

Returns:
Type Description
Object 热力图点位数据

getOptions(){Object}

overlay/HeatmapOverlay.js, line 151

返回热力图的样式属性数据

Returns:
Type Description
Object 热力图的样式属性数据

hide()

overlay/HeatmapOverlay.js, line 256

隐藏热力图结果

setData(objData)

overlay/HeatmapOverlay.js, line 200

从热图实例中删除所有先前存在的点，然后重新初始化数据存储.

Name Type Description
objData Object

热力图数据对象

Name Type Description
max Number

count 的最大值用于计算权重值
data Array

热力图点位数据，具体格式参照实例数据

setOptions(options)

overlay/HeatmapOverlay.js, line 117

设置热力图的样式属性

Name Type Description
options Object

热力图属性对象

Name Type Description
radius Number

每个数据点将具有的半径
opacity Number

整个热图的全局不透明度。
blur Number

将应用于所有数据点的模糊因子。 模糊因子越高，渐变将越平滑.
gradient Object

{ 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}] An object that represents the gradient (syntax: number string [0,1] : color string)

show()

overlay/HeatmapOverlay.js, line 248

显示热力图结果