openlayers 给数据点（散点）添加点击事件 和hover事件

前言：由于本人也是最近才开始学习openlayers，如说明的有所不对，请在评论区指出。

1、点击事件

/**
     * 捕捉点击事件
     */
    featureClick(callback) {
      let _this = this;
      let selectPointerClick = new PointerInteraction({
        handleDownEvent: function(ev){
          let pixel = ev.pixel;
          let feature = _this.map2d.map.forEachFeatureAtPixel(
          pixel,
          function (feature) {
            return feature;
          }
        );
        if (feature) {
          callback({ flag: true }); // do something
        } else {
          callback({ flag: false }); //do something
        }
        }
      });
      _this.map2d.map.addInteraction(selectPointerClick);
    },

代码中不写注释，我讲解一下流程，能让你有个大概的认识应该就能符合你业务去做自己的逻辑。

首先你最好对交互事件有一定的认识，这里推荐大佬写的博客，有一个初步的认识。
https://blog.csdn.net/weitaming1/article/details/87805287
这里为了保证文章的逻辑完善，我会把相关的给截图下来。


文档只有英文的，我粗略的解释一下，我们自定义的鼠标交互事件只需要点击，而实际上我实现的点击的方法是按下。但某种程度上而言，他们的效果是等同的。他的描述是如果handleDownEvent的这个函数返回了true说明一个拖拽队列已经开始，但我们并不需要拖拽，我们只是借着这个按下实现点击。

我们生成一个PointerInteraction对象，在这个回调参数中接受一个事件ev，通过map.forEachFeatureAtPixel，用当前位置的位置pixel去判断每一个feature的位置pixel，是否能够找到点击的那个feature，如果找到了，我们做某些事，如果没找到做某些事。接着把这个交互事件往地图实例上添加。

2、hover事件

/**
     * 捕捉滑过事件
     */
    featureHover(callback) {
      const _this = this;
      _this.map2d.map.on('pointermove',function(ev){
        let pixel = ev.pixel;
        let feature = _this.map2d.map.forEachFeatureAtPixel(pixel,function (feature) {
          return feature;
        });
        if (feature) {
          callback({flag: true }); //do something
        } else {
          callback({ flag: false });// do something
        }
      })
    },

在地图中监听pointermove 事件，这个是原生支持的。接受一个回调参数，如法炮制。找到点，做什么，找不到点做什么。

杂谈

对了。这个实例由于我是直接复制编辑器中的，所以map 实例 你们得自己搞定。照着这个思路，我不敢保证你能复制就用。思路是最主要的，预祝你顺利解决问题。

新增修改 来自2021年6月15日

视频内容

https://www.bilibili.com/video/BV1DM4y1M7aY

点击feature事件比较标准的写法

// 给地图添加点击事件
    featureClick: function (callback) {
      let _this = this;
      _this.map2d.on("singleclick", function (ev) {
        let pixel = ev.pixel;
        let feature = _this.map2d.forEachFeatureAtPixel(
          pixel,
          function (feature) {
            return feature;
          }
        );
        if (feature) {
        // dosth like next line
          _this.correctTypeAndFunction(callback, feature, pixel);
        } else {
        //do sth like next line
          _this.lastClickFactoryFeature = null;
        }
      });
    },