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)