ol-helper

Appearance

选择事件 ​

创建点击事件 ​

js
    //创建点击事件,如果存在同名点击事件则移除已存在的点击事件
    // 此处的点击事件可以点击任意图层
    _olHelper.useSelect('test');
    // 此处的点击事件只能点击名为test1的图层的要素
    let test1Select =  _olHelper.useSelect('test1', {
      layers: (layer) => layer.get('name') === 'test1',
    });
    // 设置回调函数,以获取点击后的要素
    test1Select.setEventFunc((event)=>{
        //  do something
    })

多选模式切换 ​

js
    // 随时切换多选和单选
    test1Select.setSelectMod('multiSelect')
    test1Select.setSelectMod('click')

自由设置select状态 ​

js

    // 业务中经常需要只能点击某些图层,此时可以使用setSelectActive来设置
    
    // 只激活test1事件,禁止其他所有点击事件
    setSelectActive(['test1'])
    // 激活test1事件,对其他事件不操作
    setSelectActive(['test1'],[])
    // 只禁用test1事件,对其他事件不操作
    setSelectActive([],['test1'])
    // 禁用test1事件,对其他事件不操作
    setSelectActive(undefined,['test1'])

示例 ​

点击事件名称test1(蓝色)
操作
点击事件名称test2(黄色)
操作

相关函数 ​

useSelect(name,options)

创建选择事件,会将创建的实例放入selectHandles属性中,以方便管理(考虑到会存在多个选择事件,并且多个图层可能会有同一个点,需要实现互斥)

名称详情类型默认
name选择事件的名称string-
optionsopenlayers的ol/interaction/Select实例配置OlSelectOptions{}

返回:

名称详情类型
setSelectMod设置选择类型'click' | 'multiSelect'
getSelectMod获取选择类型'click' | 'multiSelect'
setEventFunc设置事件回调函数function
remove移除绘制事件function
selectInstanceol原生点击实例Select

setSelectActive(activeLayerNameArray,inactiveLayerNameArray)

根据业务自由设置select状态

名称详情类型默认
activeLayerNameArray可点击的图层名数组string-
inactiveLayerNameArrayopenlayers的ol/interaction/Select实例配置OlSelectOptions{}

clearAllSelect() 移除所有选择要素