开发 数据可视化 JS API 可视化图层 可视化图层通用接口

可视化图层通用接口 最后更新时间: 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 只需使用三个接口即可完成渲染:

  1. setData(Array: arr, Object: options) 设置数据
  2. setOptions(Object: options) 设置样式配置项 (配置项请参考各类型图层文档)
  3. render() 渲染数据
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 图层的使用方式一致:

// 显示
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(Mapmap)

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

*


比例尺为映射成功数据的默认值


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