可视化图层通用接口最后更新时间: 2021年01月22日

本文档描述了所有图层的通用方法。

以下内容主要介绍 Loca 图层的创建、移除等基本功能。各个图层的特有属性请参考各自的文档，这里不做过多介绍。

1. 创建

和 JS API 的图层使用方法一样，创建实例添加至底图：

// 创建底图实例
const map = new AMap.Map('container');

// 以点图 PointLayer 为例，通过 new 函数创建图层
const layer = new Loca.RoundPointLayer({
    //1.通过构造函数 map 属性设置底图
    map:  map
});

// 2. 或者调用 setMap 添加至底图
layer.setMap(map);

2. 设置属性 / 绘制渲染

创建好的图层需要添加数据和样式才可以正确渲染，Loca 只需使用三个接口即可完成渲染：

setData(Array: arr, Object: options) 设置数据
setOptions(Object: options) 设置样式配置项（配置项请参考各类型图层文档）
render() 渲染数据

JavaScript

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();

3. 显示 / 隐藏 / 添加 / 移除图层

这部分功能和 JS API 图层的使用方式一致：

JavaScript

// 显示
layer.show();

// 隐藏
layer.hide();

// 添加至底图
layer.setMap(map);

// 移除
layer.setMap(null);

参考手册

1. 构造函数

注意： Loca.Layer 为抽象类，无法直接构造。创建具体类型请参考具体图层文档。

构造函数/工厂方法	说明
Loca.Layer(`<LayerOptions>` options)	创建可视化图层

LayerOptions 图层配置	类型	默认值	说明
map	Map	选填	指定要添加的地图实例。
eventSupport	boolean	false	对图层交互事件的响应，默认关闭。开启后可响应鼠标、触屏事件。如需 selectStyle 生效，也需要开启这里
fitView	boolean	false	每次渲染更新后，图形是否按照适合屏幕位置展现。也可以通过 setFitView() 主动调用。
zIndex	number	200	设置图层 zIndex 高度
visible	boolean	true	设置图层默认显示和隐藏，默认显示图层。

2. 基本方法

操作可视化图层的基本方法，例如设置数据、设置样式、渲染、销毁等。具体类型的接口使用请参对应文档。

方法	返回	说明
setData(`<Array>`data, `<DataOptions>`options?)	this	添加数据, options 中指定可是指定数据类型及其他配置
setOptions(`<VisualOptions>`options)	this	设置样式配置, 用于指定数据与视觉通道的映射配置
setMap(`Map`map)	this	添加至 Map 地图实例上，移除使用 setMap(null)
render()	this	立刻绘制
setFitView()	this	地图按照适合展示图层内数据的缩放等级展示
setzIndex(`<number>`zIndex)	this	设置图层层级
show()	this	显示图层
hide()	this	隐藏图层

Data Options 数据配置

Options	类型	默认值	说明
type	string	json	数据格式, 默认 JSON 格式, 支持格式有 CSV, TSV。
lnglat	string/Function	必填	坐标数据所在列名，或者通过自定义函数返回 [lng, lat] 格式坐标。

Visual Options 样式配置

注意： 具体 Options 配置项请参考具体图层文档。

Options	类型	默认值	说明
style	StyleOptions	必填	图形样式配置项，指定数据和样式的关联关系
selectStyle	StyleOptions	选填	选中态样式，鼠标悬浮时触发的样式，该属性会和 style 进行合并，因此只需设置需要变化的属性即可，无变化的属性无需设置。该属性的前提是需要设置 eventSupport 为 true，以保证鼠标事件可以被触发。

Style Options

StyleOptions	类型	默认值	说明
height	number/Function/Array.<number>	0	仅 3D 有效，设置 3D 模型高度。
altitude	number/Function/Array.<number>	0	3D 模型离地高度，viewMode = 3D 有效。不同于模型自身高度 height 属性，请注意区别。
color	string/<Attr options>		图形填充颜色
borderWidth	number/<Attr options>	0	图形边框宽度
borderColor	string/<Attr options>		图形边框颜色
opacity	number/<Attr options>	1	当类型type为 heatmap 时（除基础热力图 shape=normal 外），可以设置数组结构[min, max]。例如 [0.1, 0.7]，表示热力的透明度在热力区间的加成。其中 0.1 表示热度最小时透明度为 0.1，热力最大时，透明度为 0.7。中间数据线性过渡。

Attr Options

Option	Type	Default	Description
key	string	必填	当前属性所依赖数据的`key`值或者`列名`
value	Array.<*>	必填	属性输出范围，分别设置最大值和最小值区间。例如：[10, 25]表示数值在10-25之间(包含两端数值)
input	Array.<*>		属性输入范围，默认以当前这组数据最大值和最小值最为输入范围
scale	string	linear	数据和属性映射使用的比例尺名称，默认线性比例尺`linear`，支持比例尺：`linear`, `pow`, `sqrt`, `log`
default	*		比例尺为映射成功数据的默认值

可视化图层通用接口 最后更新时间: 2021年01月22日