zoukankan      html  css  js  c++  java
  • 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';
  • 相关阅读:
    计算机网络-TCP的三次握手与四次挥手
    计算机网络-XSS及CSRF攻击防御
    计算机网络-HTTP与HTTPS的区别
    装饰器模式和代理模式的区别
    23种设计模式总结
    单例模式详解
    常用设计模式总结
    PG-用户|角色管理
    PG-表空间管理
    TiDB-性能测试
  • 原文地址:https://www.cnblogs.com/maycpou/p/14606505.html
Copyright © 2011-2022 走看看