vue cesium 集成 echarts 和 mapv 示例
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)
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue_(Router路由)-vue-router路由的基本用法
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- [Vue] Get up and running with vue-router
- vue表单校验必填项
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- 一个典型的Vue应用的App.vue
- 常用网络js链接大全(jQuery(3.4.1)、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
- vue iframe跳转 从父级重定向,不从当前页
- vue 常用语法糖
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Vue模板语法
- Vue——模板和样式
- Vue中vue-i18n结合vant-ui实现国际化
- 201:vue+openlayers:加载geojson文件形成围栏,可添加、修改、删除feature,导出geojson
- 200:vue+openlayers 添加删除多边形,modify feature,双向互动颜色显示
- 192:vue+openlayers: 选择feature,弹窗操作,删除所选feature
- 151:vue+openlayers 使用图片来标识不同地图,点击更换底图
- 097:vue+openlayers: 非4326,3857的投影方法 (示例代码)
- 066:vue+openlayers画各种图形并获取feature信息( 示例代码 )
- 【前端领域高频笔试面试】—— Vue相关
- Vue.js中 watch 的高级用法
- ant-design-vue中a-table列表数据根据点击的表头进行升/降排序
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue实现简易备忘录
- Vue: vue-router路由