OpenLayers点击查询

直接上代码,可以作为参考

/**
 * 监听地图单击事件
 * @param flag
 */
const mapOn = (flag: boolean, code) => {
  if (flag) {
    map.getTargetElement().style.cursor = flag ? 'pointer' : ''
    singleclick = map.on('singleclick', event => {
      const point = map.getEventCoordinate(event.originalEvent)
      //获取地图放大比例，作为点击查询的虚拟范围 作用：增加点击选择范围
      const zoom = 22.5 - map.getView().getZoom()
      //扩大点的范围，这样容易找到要素，1度约等于111千米
      const bufferDistance = zoom / 111000
      const points = [
        {
          x: Number(point[0]) + bufferDistance,
          y: Number(point[1]) + bufferDistance
        }, {
          x: Number(point[0]) + bufferDistance,
          y: Number(point[1]) - bufferDistance
        }, {
          x: Number(point[0]) - bufferDistance,
          y: Number(point[1]) + bufferDistance
        }, {
          x: Number(point[0]) - bufferDistance,
          y: Number(point[1]) - bufferDistance
        }
      ]
      const geometries = [{ // 查询点对象
        x: Number(point[0]),
        y: Number(point[1])
      }]
      //属性查询的函数
      spatialQueryByPoint(code, points)
    })
  } else {
    overlay.setPosition(undefined)
    map.getTargetElement().style.cursor = flag ? 'pointer' : ''
    tempSource.clear()
    //去除点击查询事件
    ol.Observable.unByKey(singleclick)
  }
}

附：鼠标事件

/**
 * @module ol/MapBrowserEventType
 */
import EventType from './events/EventType.js';
/**
 * Constants for event names.
 * @enum {string}
 */
export default {
    /**
     * A true single click with no dragging and no double click. Note that this
     * event is delayed by 250 ms to ensure that it is not a double click.
     * @event module:ol/MapBrowserEvent~MapBrowserEvent#singleclick
     * @api
     */
    SINGLECLICK: 'singleclick',
    /**
     * A click with no dragging. A double click will fire two of this.
     * @event module:ol/MapBrowserEvent~MapBrowserEvent#click
     * @api
     */
    CLICK: EventType.CLICK,
    /**
     * A true double click, with no dragging.
     * @event module:ol/MapBrowserEvent~MapBrowserEvent#dblclick
     * @api
     */
    DBLCLICK: EventType.DBLCLICK,
    /**
     * Triggered when a pointer is dragged.
     * @event module:ol/MapBrowserEvent~MapBrowserEvent#pointerdrag
     * @api
     */
    POINTERDRAG: 'pointerdrag',
    /**
     * Triggered when a pointer is moved. Note that on touch devices this is
     * triggered when the map is panned, so is not the same as mousemove.
     * @event module:ol/MapBrowserEvent~MapBrowserEvent#pointermove
     * @api
     */
    POINTERMOVE: 'pointermove',
    POINTERDOWN: 'pointerdown',
    POINTERUP: 'pointerup',
    POINTEROVER: 'pointerover',
    POINTEROUT: 'pointerout',
    POINTERENTER: 'pointerenter',
    POINTERLEAVE: 'pointerleave',
    POINTERCANCEL: 'pointercancel',
};
/***
 * @typedef {'singleclick'|'click'|'dblclick'|'pointerdrag'|'pointermove'} Types
 */
//# sourceMappingURL=MapBrowserEventType.js.map