开发 数据可视化 JS API v1.2 参考手册 VisualLayer 通用配置

VisualLayer 通用配置 最后更新时间: 2021年01月22日

VisualLayer 是用于存储数据、绘制图形的图层。一个图层只允许绘制一种类型的图形。  

本文档介绍图层的创建、销毁、设置数据、绘制等通用配置,具体类型的接口使用请查看对应的文档。


1. 构造函数

初始化图层,关联 Loca 容器,配置基本属性。


使用范例

两种方式创建可视化图层实例:

// 工厂方法构造
var layer = Loca.visualLayer({
    // 指定 Loca 容器
    container: locaMap,
    // 显示指定数据类型
    type: 'point',
    // 显示指定显示类型
    shape: 'circle'
});

// new 函数构造
var layer = new Loca.VisualLayer({
    container: locaMap,
    type: 'point',
    shape: 'circle'
});


参考手册


构造函数/工厂方法

说明

new Loca.VisualLayer(<LayerOptions> options)

创建可视化图层

Loca.visualLayer(<LayerOptions> optitons)

LayerOptions 

图层配置

类型

默认值

说明

container

Loca


指定当前图层所属容器。可选,可使用 addTo() 添加到容器。

type

string

必填

坐标解析类型,支持:点point、线line、面polygon、热力图heatmap、等高线contour

shape

string

必填

图层显示的形状类型,具体形状和 type 类型有关联。

typepoint 时,支持的形状有:圆形 circle、图片 image、棱柱体 prism。其中 prism 仅支持 3D 模式。

typeline 时,支持的形状为 line

typepolygon 时,支持的形状为 polygon

typeheatmap 时,支持的形状有:普通热力 normal、矩形(正方形)热力 rectangle、蜂窝(六边形)热力 hexagon、行政区分级统计图 district

typecontour 时,支持的形状为: 等高面 isoband 、等高线 isoline


不同类型的文档请查看对应的文档。

eventSupport

boolean

false

交互事件开关,默认关闭。可控制当前图层的鼠标、触摸事件。对图层交互事件的响应,默认关闭。开启后可响应鼠标、触屏事件。 

如需 selectStyle 生效,也需要开启这里。

fitView

boolean

false

每次渲染更新后,图形是否按照适合屏幕位置展现。也可以通过 setFitView() 主动调用。

zIndex

number

200

设置图层 zIndex 高度。


2. 基本方法

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


使用范例

为已创建好的图层添加数据、设置样式、执行渲染绘制。

var data =  [
    { 'name': '北京市', 'center': [116.407394,39.904211] },
    { 'name': '天津市', 'center': [117.200983,39.084158] },
    { 'name': '河北省', 'center': [114.530235,38.037433] }
    // ...
];

// 添加数据
layer.setData(data, {
    // 指定地理坐标所在列名
    lnglat: 'center',
    // 指定数据类型,支持 json、csv、tsv 格式
    type: 'json'
});

// 设置样式
layer.setOptions({
    style: {
        radius: 10,
        color: 'skyblue',
        borderWidth: 0.5,
        borderColor: '#ffffff'
    }
});

// 执行绘制
layer.render();


参考手册


方法

返回

说明

setData(<Array> data,

 <DataOptions> options?)

this

添加数据,options 中指定可是指定数据类型及其他配置。

不同类型的数据结构,请参考教程以及对应的文档。

setOptions(<VisualOptions> options)

this

设置可视化配置,用于指定数据与视觉通道的映射配置。

render()

this

立刻绘制

setFitView()

this

地图按照适合展示图层内数据的缩放等级展示

setZIndex(<number> zIndex)

this

设置图层层级

addTo(<Loca> map)

this

添加至指定容器

remove()

this

从当前容器移除图层

destroy()


析构函数,销毁所有图层及事件。

DataOptions

数据属性

类型

默认值

说明

lnglat

string

Function

必填

指定坐标数据所在的列名,或者通过自定义函数返回符合格式要求的坐标。

具体坐标格式请参考各数据类型对应的文档。

type

string

json

数据格式,默认 JSON 格式,支持格式还有 CSV,TSV。

VisualOptions

可视化属性

类型

默认值

支持该属性的类型

说明

style

StyleOptions

必填

通用

图形显示样式配置项,具体属性请看下表的 StyleOptions。

selectStyle

StyleOptions

选填

除了线类型(line)和

基础热力(normal)外,

其他类型都支持。

选中态样式,鼠标悬浮时触发的样式,该属性会和 style 进行合并,因此只需设置需要变化的属性即可,无变化的属性无需设置。

该属性的前提是需要设置 eventSupport 为 true,以保证鼠标事件可以被触发。

selectStyle 仅支持固定样式,不支持AttrOptions类型动态样式。

另外,「基础热力」和 「3D 线」暂时不支持选中样式设置。

参考示例

StyleOptions  

样式配置

类型

默认值

支持该属性的类型

(type / shape)

说明

radius

number

Function

AttrOptions

0

type=heatmap

shape=circle

shape=prism

当类型type为点 point,且形状shapecircle 时,为圆形半径。参考示例

当类型type为热力 heatmap 时,为热力半径。其中形状shape为正方形rectangle时为边长的一半,蜂窝热力hexagon时为六边形边长。参考示例

当形状shape为棱柱体 prism 时,用于指定棱柱体多边形半径。参考示例

height

number

Function

AttrOptions

0

type=heatmap

shape=prism

3D 模型自身高度,viewMode = 3D 有效。生效 参考示例

color

string

Function

AttrOptions


通用

图形填充颜色,不设置则不填充颜色。

对应 1.1.3 以前的版本属性为 fill,fill 已弃用。建议使用 color 属性代替。

borderColor

string

Function


type=point

图形边框颜色,不设置则不填充颜色。

注意:3D 类型中除了 circle 外,都不支持边框绘制。因此这个属性仅对 circle 有影响。

对应 1.1.3 以前的版本属性为 stroke,stroke 已弃用。建议使用 borderColor 属性代替。

borderWidth

number

Function

0

type=point

type=line

图形边框宽度,或者 2D 模式下 line 类型的线宽。

3D 模式下 line 类型暂时不支持设置宽度。

对应 1.1.3 以前的版本属性为 lineWidth,lineWidth 已弃用。建议使用 borderWidth 属性代替。

opacity

number

1

通用

图形透明度,透明度范围 0 至 1。

AttrOptions
属性映射

类型

默认值

说明

key

string

必填

当前属性所依赖数据的列名。

value

Array

必填

性输出范围,分别设置最大值和最小值区间。

例如:[10, 25] 表示数值在 10-25 之间(包含两端数值)。

input

Array


数据的输入范围。默认以当前这组数据最小值和最大值最为输入范围。

scale

string

linear

数据和属性映射使用的比例尺名称,默认线性比例尺  linear

支持比例尺:linearpowsqrtlog

AttrOptions 属性的用法,请参考 样式自动配置教程

3. 图层事件

图层事件包含鼠标、触摸等作用于 VisualLayer 上的图形的交互事件。



事件绑定/解绑

方法

说明

on(<string> type, <Function> handler, <*> context?)

事件绑定

off(<string> type?, <Function> handler?, <*> context?)

事件解绑

once(<string> type, <Function> handler, <*> context?)

事件绑定,执行后解绑

交互事件

事件

类型

说明

click

Event

单击事件

dblclick

Event

双击事件

mouseenter

Event

覆盖物间移入

mouseleave

Event

覆盖物间移出

mousemove

Event

鼠标移动

contextmenu

Event

鼠标激活菜单事件(通常为鼠标右键)

touchstart

Event

触摸事件

touchend

Event

触摸事件

touchmove

Event

触摸移动事件

touchcancel

Event

取消触摸事件


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