sakitam-fdd / ol3Echarts

:earth_asia: :bar_chart: ol3Echarts | a openlayers extension to echarts

Home Page:https://sakitam-fdd.github.io/ol3Echarts/#/index

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

echarts不会不能触发默认的事件

changqingom opened this issue · comments

ol-echarts存在echarts自身事件不触发情况

ol3-echarts正常

鼠标移入饼图和点击图例不处罚对应事件
地址:https://codesandbox.io/s/ol-echarts-example-vqtn5?autoresize=1&fontsize=14&theme=dark

@changqingom 这个看起来是新版ol引发的问题,我抽空看下

@sakitam-fdd 我自己尝试解决,但是卡在了echarts自身事件交互的逻辑这,希望您处理后可以分享下思路 :)

@changqingom 刚刚查了一下,应该是 openlayer的事件处理这边有些变化,事件捕获到 ol-overlaycontainer-stopevent 就终止了。临时解决的话可以暂时继承 Map:

class OMap extends Map {
  handleMapBrowserEvent(mapBrowserEvent) {
    if (!this.frameState_) {
      // With no view defined, we cannot translate pixels into geographical
      // coordinates so interactions cannot be used.
      return;
    }
// 注释掉事件阻止
    // let target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target);
    // while (target) {
    //   if (target.parentElement === this.overlayContainerStopEvent_) {
    //     return;
    //   }
    //   target = target.parentElement;
    // }
    mapBrowserEvent.frameState = this.frameState_;
    const interactionsArray = this.getInteractions().getArray();
    if (this.dispatchEvent(mapBrowserEvent) !== false) {
      for (let i = interactionsArray.length - 1; i >= 0; i--) {
        const interaction = interactionsArray[i];
        if (!interaction.getActive()) {
          continue;
        }
        const cont = interaction.handleEvent(mapBrowserEvent);
        if (!cont) {
          break;
        }
      }
    }
  }
}

并且开启

{
    stopEvent: true,
    insertFirst: true,
}

示例:https://codesandbox.io/s/ol-echarts-example-sfzvh

目前没办法从插件本身处理,如果可能的话可以去mock所有的鼠标事件,可以尝试一下

@sakitam-fdd ok! 谢谢分享

维护项目的时候也遇到了这个问题. 看了下代码. ol-overlaycontainer 现在不在事件分发路径上了. 感觉更改 ol-overlaycontainer-stopevent 的约定不好. 只能 mock 了, zrender 监听的事件, 只有 mousemove 这个事件比较重要, 又没有 mock.

示例: https://codesandbox.io/s/ol-echarts-example-hs7c5

@kyleinfo 感谢! 那我就写个交互扩展去做这块的派发了