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( | 创建可视化图层 |
Loca.visualLayer( |
LayerOptions 图层配置 | 类型 | 默认值 | 说明 |
---|---|---|---|
container | Loca | 指定当前图层所属容器。可选,可使用 addTo() 添加到容器。 | |
type | string | 必填 | 坐标解析类型,支持:点 |
shape | string | 必填 | 图层显示的形状类型,具体形状和
不同类型的文档请查看对应的文档。 |
eventSupport | boolean | false | 交互事件开关,默认关闭。可控制当前图层的鼠标、触摸事件。对图层交互事件的响应,默认关闭。开启后可响应鼠标、触屏事件。 如需 selectStyle 生效,也需要开启这里。 |
fitView | boolean | false | 每次渲染更新后,图形是否按照适合屏幕位置展现。也可以通过 |
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( | this | 添加数据,options 中指定可是指定数据类型及其他配置。 不同类型的数据结构,请参考教程以及对应的文档。 |
setOptions( | this | 设置可视化配置,用于指定数据与视觉通道的映射配置。 |
render() | this | 立刻绘制 |
setFitView() | this | 地图按照适合展示图层内数据的缩放等级展示 |
setZIndex( | this | 设置图层层级 |
addTo( | 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 仅支持固定样式,不支持 另外,「基础热力」和 「3D 线」暂时不支持选中样式设置。 |
StyleOptions 样式配置 | 类型 | 默认值 | 支持该属性的类型 (type / shape) | 说明 |
---|---|---|---|---|
radius | number Function AttrOptions | 0 | type=heatmap shape=circle 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 模式下 3D 模式下 对应 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 | 数据和属性映射使用的比例尺名称,默认线性比例尺 支持比例尺: |
AttrOptions 属性的用法,请参考 样式自动配置教程
3. 图层事件
图层事件包含鼠标、触摸等作用于 VisualLayer 上的图形的交互事件。
事件绑定/解绑
方法 | 说明 |
---|---|
on( | 事件绑定 |
off( | 事件解绑 |
once( | 事件绑定,执行后解绑 |
交互事件
事件 | 类型 | 说明 |
---|---|---|
click | Event | 单击事件 |
dblclick | Event | 双击事件 |
mouseenter | Event | 覆盖物间移入 |
mouseleave | Event | 覆盖物间移出 |
mousemove | Event | 鼠标移动 |
contextmenu | Event | 鼠标激活菜单事件(通常为鼠标右键) |
touchstart | Event | 触摸事件 |
touchend | Event | 触摸事件 |
touchmove | Event | 触摸移动事件 |
touchcancel | Event | 取消触摸事件 |