IconLayer

用来展示大数据量的简单点图层，继承自Layer

可使用鼠标拾取Pick

示例

动手试试

1
2
3
4
5
6
7
8
9
10
11
12
13

var layer = new mapvgl.IconLayer({
    width: 100 / 2,
    height: 153 / 2,
    offset: [0, - 153 / 2 / 2],
    icon: 'images/marker.png',
    enablePicked: true, // 是否可以拾取
    selectedIndex: -1, // 选中项
    selectedColor: '#ff0000', // 选中项颜色
    autoSelect: true, // 根据鼠标位置来自动设置选中项
    onClick: (e) => { // 点击事件
        console.log(e)
    },
});

options属性

icon

解释：icon图标

类型：object(canvas dom) 、string(图片url地址)

类型：string

width

解释：设置icon图标宽度

类型：number

默认值：传入icon图标宽度

height

解释：设置icon图标高度

类型：number

默认值：传入icon图标高度

unit

解释：绘制大小的方式，即指定width和height属性的单位

类型：string

默认值：’px’

可选值：

• px，默认值，按像素绘制
• m，按米来绘制

scale

解释：设置icon缩放

类型：number

默认值：1

angle

解释：设置icon按顺时针旋转角度

类型：number

默认值：0

opacity

解释：图层的透明度，值为0-1

类型：number

默认值：1

flat

解释：icon是否随地图倾斜，即平躺在地图上

类型：boolean

默认值：false

offset

解释：icon图标偏移值，基于图标中心点偏移，[{number}x, {number}y]

类型：array

默认值：[0, 0]

padding

解释：生成icon雪碧图时，图标间的空隙

类型：array

默认值：[0, 0]

data内容

数据格式内容：

1
2
3
4
5
6

[{
    geometry: {
        type: 'Point',
        coordinates: [116.403748, 39.915055]
    }
}]