鼠标拾取

鼠标交互行为，支持hover与click

示例

动手试试

1
2
3
4
5
6
7
8
9
10
11

var pointLayer = new mapvgl.PointLayer({
    size: 100,
    color: '#ac3370aa',
    enablePicked: true, // 是否可以拾取
    selectedIndex: -1, // 选中数据项索引
    selectedColor: '#ff0000', // 选中项颜色
    autoSelect: true, // 根据鼠标位置来自动设置选中项
    onClick: (e) => { // 点击事件
        console.log(e);
    },
});

options参数

enablePicked

解释：是否开启鼠标事件，开启后支持鼠标onClick与onMousemove事件，同时支持改变拾取物体颜色。

类型： Boolean

默认值：false

selectedIndex

解释：手动指定选中数据项索引，使该条数据所表示物体变色，-1表示没选中任何元素

类型：number

默认值：-1

依赖：enablePicked=true

selectedColor

解释：选中态颜色

类型：string

默认值：’rgba(20, 20, 200, 1)’

依赖：enablePicked=true

autoSelect

解释：根据鼠标位置来自动设置选中项selectedIndex，使选中物体变色，设置为true后selectedIndex失效

类型：boolean

默认值：false

依赖：enablePicked=true

onClick

描述：onClick({Object}pickObject)

解释：点击事件，如果点击在可选中物体上，则返回对应数据

类型：function

依赖：enablePicked=true

返回参数对象：pickObject同下面pick方法返回对象

onDblClick

描述：onDblClick({Object}pickObject)

解释：双击事件，如果双击在可选中物体上，则返回对应数据

类型：function

依赖：enablePicked=true

返回参数对象：pickObject同下面pick方法返回对象

onRightClick

描述：onRightClick({Object}pickObject)

解释：右键事件，如果右键在可选中物体上，则返回对应数据

类型：function

依赖：enablePicked=true

返回参数对象：pickObject同下面pick方法返回对象

onMousemove

描述：onMousemove({Object}pickObject)

解释：鼠标指针移动事件，如果指针悬浮在在可选中物体上，则返回对应数据

类型：function

依赖：enablePicked=true

返回参数对象：pickObject同下面pick方法返回对象

方法

pick

描述：pick({Number}x, {Number}y)

解释：根据屏幕像素坐标获取元素

依赖：enablePicked=true

返回类型：{Object}pickObject

返回对象格式：

1
2
3
4

{
    dataIndex: -1, // 返回点击的数据元素索引
    dataItem: {}, // 返回点击的数据元素
}

使用示例

1

var index = pointLayer.pick(10, 10);