开发 数据可视化 JS API 可视化图层 IconLayer 图标图层

IconLayer 图标图层 最后更新时间: 2021年01月22日

使用图标来表示点数据的图层,图形垂直于地面。

图标支持使用 http 或者 base64URI 字符串设置。

已下为示例代码:

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

const layer = new Loca.IconLayer({
    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({
    source: 'data:image/svg+xml;base64,xxxxx',  // base64 格式图片
    // 可以使用函数回调的形式
    // source: function(res) {
    //         var value = res.value;
    //         var typecode = value.typecode;
    //         var src = 'http://a.amap.com/Loca/static/manual/banks/'+ bankMap[typecode] + '.png';
    //        return src;
    //     },
    style: {
        // 默认半径单位为像素
        size: 10,
        opacity: 0.9,
    }
});

// 渲染
layer.render();

1. 构造函数

构造函数

说明

Loca.IconLayer(<LayerOptions> options)

创建可视化图层

未列出参数,同 Loca.Layer。

2. 基本方法

操作可视化图层的基本方法,例如设置数据、设置样式、渲染、销毁等。

为列出接口,同 Loca.Layer。


Visual Options 样式配置

Options

类型

默认值

说明

source

string/Image/Canvas/Function


用于指定图片的路径、base64URI 或者 Image DOM 对象



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