GridLayer 网格热力图层 最后更新时间: 2021年01月22日
使用网格热力图展示点数据,并通过热力颜色展示数据权重,半径单位:米。
以下为示例代码:
const map = new AMap.Map('container');
const layer = new Loca.GridLayer({
map: map
});
layer.setData(heatdata, {
lnglat: 'lnglat'
});
layer.setOptions({
style: {
// 网格热力半径,单位:米
radius: 300,
opacity: [0.1, 0.8],
// 热力聚合模式,count 为点数量加和
mode: 'count', // 聚合模式,可选值: sum(值求和)、max(最大值)、min(最小值)、mean(平均值)、median(中位数)、count(个数)
// 颜色范围
color: [
'#f0f9e8',
'#bae4bc',
'#7bccc4',
'#43a2ca',
'#0868ac',
],
text: {
content: '文字', // 文字内容
direction: 'center', // 文字方位
offset: [10, -10], // 偏移大小
fontSize: 16, // 文字大小
fillColor: '#E67E22', //文字颜色
strokeColor: "rgba(255,255,255,0.85)", // 文字描边颜色
strokeWidth: 1, // 文字描边宽度
}
}
});
// 渲染
layer.render();
1. 构造函数
构造函数 | 说明 |
---|---|
Loca.GridLayer(<LayerOptions> options) | 创建可视化图层 |
未列出参数,同 Loca.Layer
2. 基本方法
操作可视化图层的基本方法,例如设置数据、设置样式、渲染、销毁等。
未列出接口,同 Loca.Layer
DataSet Options 数据配置
Options | 类型 | 默认值 | 说明 |
---|---|---|---|
| string | 必填 | 指定热力映射的字段名 |
同 Loca.Layer 接口 |
Visual Options 样式配置
Options | 类型 | 默认值 | 说明 |
---|---|---|---|
| String | 'count' | 聚合模式,可选值: sum(值求和)、max(最大值)、min(最小值)、mean(平均值)、median(中位数)、count(个数) |
同 Loca.Layer 接口 |
Style Options
Options | Type | Default | Description |
---|---|---|---|
| number/Function/<Attr options> | 0 | 网格热力半径,单位:米 |
| number | 0 | 网格间距,单位:米 |
| Array/Function | 必填 | 热力颜色填充。数组或者函数回调, 例如: ['red', 'yellow', 'blue'] 或者 function(data){ return 'red'; } |
| Array | [0, 1] | 透明度范围,最冷到最热的透明度过度区间。 |
| Text Options | 无 | 四边形网格文字标注配置。 |
同 Loca.Layer 接口 |
Text Options 文字标注配置
Options | 类型 | 默认值 | 说明 |
---|---|---|---|
| String/Function | 无 | 文字内容 |
其他属性同 |