开发 数据可视化 JS API 可视化图层 PointCloudLayer 点云图层

PointCloudLayer 点云图层 最后更新时间: 2021年01月22日

用来展示大量点的密集程度,越密集的地方,高亮效果越大,支持 2D 和 3D。

2D 模式使用 canvas 绘制,理论绘制数量上限是 50 万级别,数量在 20 万以内有最佳体验。此外,由于使用了 canvas 绘制,并且使用 AMap 中的AMap.CustomLayer 作为容器,因此会在地图的每次移动和缩放中会进行计算经纬度和触发重绘。

3D 模式使用 AMap 中的 AMap.RoundPoints 绘制,理论绘制数量上限是百万级别。


示例代码:

const map = new AMap.Map('id');

const layer = new Loca.PointCloudLayer({
    map: map,
    visible: true
});

let datas = [
    {"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(datas, {
    lnglat: 'lnglat'
});

layer.setOptions({
    style: {
        radius: 1, 
        color: '#4FC2FF',
        opacity: 0.9,
    }
});

// 渲染
layer.render();


1. 构造函数

构造函数

说明

Loca.PointCloudLayer(<LayerOptions> options)

创建点云图层

未列出参数,同 Loca.Layer。


2. Visual Options 

点云图层没有事件监听机制,因此没有 selectStyle 属性,只有 style 属性。


3. Style Options

配置项

类型

默认值

说明

radius

number

0.6

每个点的半径,范围在 0~2 之间。超过 2 时将会自动取 2。

color

string

'rgba(150, 50, 50, 1)'

每个点的颜色,支持 rgba,rgb,十六进制颜色值,

不支持函数映射等类型,因为点云图层所有点只能是一种颜色。

opacity

number

1

每个点的透明度,会影响点云叠加效果。

3. 操作方法函数

操作点云图层的基本方法,setData、setOptions、show、hide、setzIndex,函数方法说明请参照 Loca.Layer。




返回顶部 示例中心 常见问题 智能客服 公众号
二维码