Event.js

/*
 * @Author: 叶思铧(292184)
 * @Date: 2022-08-23 11:12:12
 * @Descripttion:5300临时事件类封装
 * @LastEditors: yesihua
 * @LastEditTime: 2022-08-29 11:27:24
 */

class Event {
    constructor(map) {
        this.map = map
    }

    //鼠标移动事件，作用于图层的
    /**
     *
     * @param {object} options
     * @param {Function} options.callBack 事件的回调函数
     * @param {Array} [options.layerNames = []] 需要生效的图层名称数组
     * @param {Array} [options.offset = []] dom节点的偏移量
     * @param {dom} [options.dom = undefined] dom节点 建议悬浮窗的样式如下
     * @param {arrowId} [options.arrowdom = undefined] 箭头domId
     * @param {isCluster} [options.isCluster = true] 聚合按钮是否响应
     * .video-map-hover-pop {
     *       width: 334px;
     *       height: 340px;
     *       z-index: 3;
     *       position: absolute;
     *       display: none;
     * }
     * @returns
     */
    move(options) {
        if (!options.layerNames) {
            options.layerNames = []
        }
        let map = this.map
        let ele = options.dom
        let that = this
        let key = map.on('pointermove', function (evt) {
            let arrowele = document.getElementById(options.arrowId)
            let pixel = map.getEventPixel(evt.originalEvent)
            let array = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
                if (!layer) {
                    return
                }
                let name = layer.get('name')
                if (options.layerNames.indexOf(name) != -1) {
                    return [feature, name]
                }
            })
            //console.log(evt, '鼠标移动事件')
            if (array) {
                if (options.callBack) {
                    let feature = array[0]
                    let data = feature.get('element')
                    if (options.isCluster === false) {
                        //这里与业务数据结构了产生关系了,容易出问题，需重构后端聚合部分代码，避免这个问题
                        if (data.size > 1) {
                            that._hide(options, ele)
                            return
                        }
                    }
                    let layerName = array[1]
                    if (ele) {
                        let centerPoint = feature.getGeometry().getCoordinates()
                        let pixel = map.getPixelFromCoordinate(centerPoint)
                        if (!ele.offsetWidth) {
                            //规避vue的dom节点异步导致定位异常
                            ele.style.left = -1000 + 'px'
                            ele.style.top = -1000 + 'px'
                        } else {
                            ele.style.left = pixel[0] - ele.offsetWidth / 2 + options.offset[0] + 'px'
                            ele.style.top = pixel[1] - ele.offsetHeight + options.offset[1] + 'px'
                            if (arrowele) {
                                arrowele.style.left = ele.offsetWidth / 2 - 10 + 'px'
                                arrowele.style.bottom = '-10px'
                                arrowele.style.transform = ''
                            }
                            let left = pixel[0] - ele.offsetWidth / 2 + options.offset[0]
                            //left  < 0 && top > 0
                            if (left < 0) {
                                ele.style.left = '10px'
                                if (arrowele) {
                                    arrowele.style.left = pixel[0] - 20 + 'px'
                                }
                            }
                            if (left + ele.offsetWidth > document.documentElement.clientWidth) {
                                ele.style.left = document.documentElement.clientWidth - ele.offsetWidth - 10 + 'px'
                                if (arrowele) {
                                    arrowele.style.left = pixel[0] - document.documentElement.clientWidth + ele.offsetWidth + 'px'
                                }
                            }
                            //top < 0
                            let top = pixel[1] - ele.offsetHeight + options.offset[1]
                            if (top < 0) {
                                ele.style.top = pixel[1] - ele.offsetHeight + options.offset[1] + ele.offsetHeight + 64 + 'px'
                                if (arrowele) {
                                    arrowele.style.bottom = ele.offsetHeight - 4 + 'px'
                                    arrowele.style.transform = 'rotate(180deg)'
                                }
                            }
                        }
                        ele.style.display = 'inline'
                    }
                    options.callBack({ feature: feature, data: data, layerName: layerName })
                }
            } else {
                that._hide(options, ele)
            }
        })
        return key
    }
    /**
     * 临时点击事件的编写，暂时只适配多边形图层使用,因为这个是旧项目，已经使用了就的点击事件
     * @param {object} options
     * @param {Array} options.layerNames = []
     * @param {Function} options.callBack 点击事件的回调函数
     */
    click(options) {
        if (!options.layerNames) {
            options.layerNames = []
        }
        let map = this.map
        //let that = this
        let key = map.on('click', function (evt) {
            let pixel = map.getEventPixel(evt.originalEvent)
            let array = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
                if (!layer) {
                    return
                }
                let name = layer.get('name')
                if (options.layerNames.indexOf(name) != -1) {
                    return [feature, name]
                }
            })
            //console.log(evt, '鼠标移动事件')
            if (array) {
                if (options.callBack) {
                    let feature = array[0]
                    let data = feature.get('element')
                    options.callBack({
                        feature: feature,
                        data: data,
                    })
                }
            } else {
                if (options.callBack) {
                    options.callBack(false)
                }
            }
        })
        return key
    }

    //隐藏
    _hide(options, ele) {
        if (options.callBack) {
            if (ele) {
                ele.style.display = 'none'
            }
            options.callBack(false)
        }
    }
}

export default Event