openlayers 为元素添加点击和鼠标悬停事件

 let clickSelect = new Select({

        condition: click,

        hitTolerance: 5,

      });

      clickSelect.layerName = 'dangerRiver';

      var _this = this;

      clickSelect.on('select', function (e) {

        if (e.selected.length > 0) {

          let layerName = e.target.getLayer(e.selected[0]).layerName;

          if (layerName == 'evacuationroute') {

            this.getFeatures().clear();

          } else {

            _this.mapComponent.showPopup(e.selected[0], layerName);

            this.getFeatures().clear();

          }

        }

      });

      this.mapComponent.map.addInteraction(clickSelect);

      let pointerMoveSelect = new Select({

        condition: pointerMove,

        hitTolerance: 5,

      });

      pointerMoveSelect.on('select', function (e) {

        let features = e.target.getFeatures().array_;

        if (features.length > 0) {

          let layerName = e.target.getLayer(e.selected[0]).layerName;

          if (layerName == 'evacuationroute') {

            this.getFeatures().clear();

          } else {

            _this.mapComponent.map.getTargetElement().style.cursor = 'pointer';

          }

          //this.getFeatures().clear();

        } else {

          _this.mapComponent.map.getTargetElement().style.cursor = 'auto';

        }

      });

      this.mapComponent.map.addInteraction(pointerMoveSelect);

 

引入：

import { click, pointerMove } from 'ol/events/condition.js';

import Select from 'ol/interaction/Select';

import Point from 'ol/geom/Point';

import Feature from 'ol/Feature';