RoundPointLayer 点图层 最后更新时间: 2021年01月22日
使用圆形来表示点数据的图层,图形垂直于地面。
2D 模式(不开启事件)使用 canvas 绘制,理论绘制数量上限是 50 万级别,数量在 20 万以内有最佳体验。此外,由于使用了 canvas 绘制,并且使用 AMap 中的AMap.CustomLayer 作为容器,因此会在地图的每次移动和缩放中会进行计算经纬度和触发重绘。
3D 模式(不开启事件)使用 AMap 中的 AMap.RoundPoints 绘制,理论绘制数量上限是百万级别。
已下为示例代码:
const map = new AMap.Map('container');
const layer = new Loca.RoundPointLayer({
map: map
});
let citys = [
{"lnglat":[116.486409,39.921489],"name":"朝阳区","style":2},
{"lnglat":[116.286968,39.863642],"name":"丰台区","style":2},
{"lnglat":[116.195445,39.914601],"name":"石景山区","style":2},
{"lnglat":[116.310316,39.956074],"name":"海淀区","style":2},
{"lnglat":[116.105381,39.937183],"name":"门头沟区","style":2},
// ...
];
layer.setData(citys, {
lnglat: 'lnglat'
});
layer.setOptions({
style: {
// 默认半径单位为像素
radius: 10,
color: '#4FC2FF',
borderWidth: 1,
borderColor: '#FFFFFF',
opacity: 0.9,
}
});
// 渲染
layer.render();
1. 构造函数
构造函数 | 说明 |
---|---|
Loca.PointLayer(<LayerOptions> options) | 创建可视化图层 |
未列出参数,同 Loca.Layer。
2. 基本方法
操作可视化图层的基本方法,例如设置数据、设置样式、渲染、销毁等。
为列出接口,同 Loca.Layer。
Visual Options 样式配置
Options | 类型 | 默认值 | 说明 |
---|---|---|---|
unit | string | px | 图形长度单位,默认像素。支持 米 |
同 Loca.Layer 接口 |
Style Options
Options | Type | Default | Description |
---|---|---|---|
radius | number/Function/<Attr options> | 0 | 圆形半径,单位为像素。 |
同 Loca.Layer 接口 |