cesium点击billboard广告牌相关bug

880 阅读1分钟

cesium双击导致的bug

image.png

正常情况描述

点击标记图标(billboard),camera飞到定位点缩放地图至某固定值,并弹出自定义弹窗,再次点击同类billboard时,camera平移至某定位点。

点击智能灯杆7camare飞到定位点,再次点击其他定位图标,地图平移至该定位点。

image.png

const handleClick = () => {
            const handler = new BlendApi.Cesium.ScreenSpaceEventHandler(BlendApi.viewer.scene.canvas)
            handler.setInputAction(function (click) {
                var pick = BlendApi.viewer.scene.pick(click.position)
                if (pick && pick.id && pick.id.name) {
                    let list = state.tableData1
                    var arr = list.filter((item) => {
                        return item.place == pick.id._name
                    })
                    state.videoInfo = arr[0]
                    if (arr.length > 0) {
                        let arr1 = state.videoInfo.location.split(',')
                        BlendApi.viewer.camera.flyTo({
                            destination: BlendApi.Cesium.Cartesian3.fromDegrees(arr1[0], arr1[1], 500.0), // 可见矩形
                            duration: 1, //飞行时间
                        });
                        state.dialogShow1 = true;
                        state.dialogShow = false;
                    }
                }
            }, BlendApi.Cesium.ScreenSpaceEventType.LEFT_CLICK)
        }

bug复现

双击过某个标记图标(billboard)后,再次点击其他标记图标,摄像头飞到很高(视角为地球全景),从地球全景切换到该定位点。

解决方案

屏蔽左键双击事件,后续熟悉cesium后考虑继续优化,用其他办法渲染定位图标

      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

echarts相关bug

echarts加载报错

提示Initialize failed: invalid dom.

解决办法

确保dom有高度宽度且已经加载出来后再调用echarts渲染办法初始化。

echarts渲染告警

提示当前dom已初始化。

image.png

原因分析

因为我在这里添加标注用的是billboard,在获取点击事件时会触发多次,所以会多次调用绘制echarts的方法。

解决办法

添加防抖,让他在一定时间段内只调用一次。

首先,在函数外 var time = null 然后创建settimeout定时任务,800ms内只调用一次渲染echarts的方法,调用完后记得清除定时任务。

image.png