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';


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM