vue cesium 集成 echarts 和 mapv 示例

 

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)