Cesium click绑定之后出现的穿透事件

2,255 阅读1分钟

在Vue中遇到Cesium

因为公司发展需要所以我们的项目中运用到了Cesium这个展示三维地图的js库

  1. 因为安装和运用可以在百度上找到我就不详细说了 也可以在Cesium中文网入门或者直接在github上的Issues上提问(最好用英文提问)
  2. 说一下我在Cesium上遇到的问题
  3. 最奇葩的一个问题就是Cesium的click绑定事件的穿透问题
  4. 问题可能: 具体说就是因为Cesium绑定了整个页面的click事件而且他会根据屏幕上的左边来判断经纬度所以整个click事件不光会和div进行交互而且还会和地图进行交互所以造成了事件穿透而且一般的办法还没解决
  5. 我的结局方案是 直接在Cesium的绑定事件上根据你需要的屏蔽模块和状态进行一个判断下面是我的代码
 if (mousePosition.endPosition.x < this.$refs.leftBoxSome.$el.offsetWidth) {
        this.State.CimOperate.showCommonInfo = false;
        return false
    } else if (this.State.otherData.rightShowBox) {
        this.State.CimOperate.showCommonInfo = false;
        return false
    }
  1. 上方代码第一个判断是根据div的宽度进行的一个区域穿透判断,第二个判断则是根据弹框的弹出状态进行判断 以此类推

我认为Cesiumn或者js上面绝对有比我这个方法更好的办法因为工期较紧所以只能用最快的方法赶出来 希望看到我文章的大佬可以解决一个这个问题

或者是页面结构出问题了...


    <!-- cesium绑定的div -->
    <div :class="[$style.nuclearFusionContainer]" id="nuclearFusionContainer"></div>
    <!-- 左侧的工具栏用position定位 -->
    <leftBox ref="leftBoxSome"></leftBox>

希望有人可以看看提提意见