zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue cesium 集成 echarts 和 mapv 示例

Vue集成echarts 示例 Cesium
2023-09-11 14:16:38 时间

 

https://github.com/dragon8github/vue-cesium-echarts

 

 

 

 

 

如何实现点击功能?

我采用模拟点击的方式触发。具体代码参考:
https://github.com/dragon8github/vue-cesium-echarts-mapv/blob/master/src/cesium/EchartsLayer_v1.js#L63
https://github.com/dragon8github/vue-cesium-echarts-mapv/blob/master/src/cesium/utils.js

 export const mockClickChart = (event, chart) => {
      const evmousedown = document.createEvent('HTMLEvents')
      evmousedown.initEvent('mousedown', false, true)
      const evmouseup = document.createEvent('HTMLEvents')
      evmouseup.initEvent('mouseup', false, true)
      const evmouseclick = document.createEvent('HTMLEvents')
      evmouseclick.initEvent('click', false, true)
  
      for(const key in event) {
          try {
              evmouseclick[key] = event[key]
              evmousedown[key] = event[key]
              evmouseup[key] = event[key]
          } catch (err) { /* event 对象中部分属性是只读,忽略即可 */ }
      }
  
      // 事件触发的容器,即不是 #app 也不是 canvas,而是中间这个 div
      const container = chart._dom.firstElementChild
      
      container.dispatchEvent(evmousedown)
      container.dispatchEvent(evmouseup)
      container.dispatchEvent(evmouseclick)
  }

 

    const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
    handler.setInputAction(() => mockClickChart(event, this._chart), Cesium.ScreenSpaceEventType.LEFT_CLICK)