Bootstrap

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;
        }
      });
    },
;