cesium双击导致的bug
正常情况描述
点击标记图标(billboard),camera飞到定位点缩放地图至某固定值,并弹出自定义弹窗,再次点击同类billboard时,camera平移至某定位点。
点击智能灯杆7camare飞到定位点,再次点击其他定位图标,地图平移至该定位点。
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已初始化。
原因分析
因为我在这里添加标注用的是billboard,在获取点击事件时会触发多次,所以会多次调用绘制echarts的方法。
解决办法
添加防抖,让他在一定时间段内只调用一次。
首先,在函数外 var time = null 然后创建settimeout定时任务,800ms内只调用一次渲染echarts的方法,调用完后记得清除定时任务。