cesium 点击单一tile轮廓高亮

news/2024/7/10 2:54:30 标签: vue

 单击or悬浮事件

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      const _this = this
      handler.setInputAction(function (movement) {
        // debugger
        var pickedObject = viewer.scene.pick(movement.position)
        _this._logPosition(movement.position, viewer)
        console.log('当前视角:position:' + viewer.camera.position + ',heading:' + viewer.camera.heading + ',pitch:' + viewer.camera.pitch + ',roll:' + viewer.camera.roll)
        const orientation = { heading:viewer.camera.heading, pitch:viewer.camera.pitch, roll:viewer.camera.roll }
        const destination = viewer.camera.position
        const position_new = {
          orientation:orientation,
          destination:destination
        }
        _this.$emit('newposition', position_new)
        if (Cesium.defined(pickedObject)) {
          const entity = pickedObject.id ? pickedObject.id : pickedObject
          let eventName = ''
          if (Cesium.defined(entity)) {
            if (entity instanceof Cesium.Cesium3DTileFeature) {
              eventName = 'on-3dtile-click'
              console.log(entity)
              _this.$emit('on-3dtile-click', entity)
            } else {
              if (entity instanceof Cesium.Entity || entity instanceof Cesium.Billboard) {
                eventName = 'on-vector-click'
                _this.$emit('on-vector-click', entity)
              } else {
                eventName = 'on-primitive-click'
              }
            }
            _this.$emit(eventName, entity)
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

      // 悬浮事件
      handler.setInputAction(function (movement) {
        var pickedObject = viewer.scene.pick(movement.endPosition)
        if (Cesium.defined(pickedObject)) {
          const entity = pickedObject.id ? pickedObject.id : pickedObject
          let eventName = ''
          if (Cesium.defined(entity)) {
            if (entity instanceof Cesium.Cesium3DTileFeature) {
              eventName = 'on-3dtile-mousemove'
            } else {
              if (entity instanceof Cesium.Entity || entity instanceof Cesium.Billboard) {
                eventName = 'on-vector-mousemove'
              } else {
                eventName = 'on-primitive-mousemove'
              }
            }
            _this.$emit(eventName, entity)
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

父组件调用子组件

<viewer @on-viewer-completed="viewerCompletedHandler"
            @on-vector-click="viewVectorClick"
            @on-3dtile-click="onTileClick"></viewer>

单击方法

onTileClick(feature){
  this.clickEvent(feature)
}

调用高亮方法

clickEvent(pickedFeature) {
      debugger
      if (this.houetteStage) {
        viewer.scene.postProcessStages.remove(this.houetteStage)
        this.houetteStage = null
      }
        // 如果支持剪影,则鼠标上方的剪影功能为蓝色,鼠标单击的剪影功能为绿色
        // 如果不支持轮廓,请将特征颜色更改为鼠标悬停时为黄色,单击鼠标时为绿色
      if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
        // 支持轮廓 悬浮时
        // var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage()
        // silhouetteBlue.uniforms.color = Cesium.Color.BLUE// 蓝色
        // silhouetteBlue.uniforms.length = 0.01
        // silhouetteBlue.selected = []
        // 单击时
        var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage()
        silhouetteGreen.uniforms.color = new Cesium.Color(255 / 255, 114 / 255, 0, 1)
        silhouetteGreen.uniforms.length = 0.02
        silhouetteGreen.selected = [pickedFeature]
        this.houetteStage = Cesium.PostProcessStageLibrary.createSilhouetteStage([
          // silhouetteBlue,
          silhouetteGreen
        ])
        debugger
        viewer.scene.postProcessStages.add(this.houetteStage)
      }
    }


http://www.niftyadmin.cn/n/1205611.html

相关文章

东芝“解体重建”进行时:拟剥离国内核电业务

北京时间1月27日上午消息&#xff0c;据共同社报道&#xff0c;东芝考虑剥离国内核电业务&#xff0c;另立新公司对其进行重整&#xff0c;并打算将经营资源集中到开展海外业务的旗下美国核电子公司西屋电气(WH)手中&#xff0c;以在新兴市场国获得更多订单。 报道指出&#xf…

cesium BIM模型 根据scenetree.json分层加载

html (树) <div v-show"bimDataShow" class"bimStyle"><div class"bimStyle-title">图例</div><div class"bimStyle-tree"><el-tree:data"bimDataArr"show-checkboxnode-key"id"chec…

数学计算不精确的芯片能帮助解决难题

Singular Computing公司生产的芯片不能正确的执行数学运算。比如11会返回答案2.01或1.98。该芯片的研发得到了美国国防部高级研究计划署 (DARPA)的资助。公司CEO Joseph Bates说&#xff0c;硬件不怎么样不意味着软件结果也会如此。一个不能保证每次计算都精确的芯片在处理很多…

cesium实现测距测面

以下内容参考 Cesium开发工具篇 | 04量测工具与调试面板 - 简书 https://github.com/ls870061011/cesium_training/blob/main/examples/3_4_1measure.html 并做了一些简单的修改 定义 let measureFeature_line [] let measureFeature_polygon [] 测距测面清除代码如下 …

Facebook 究竟是怎么抄袭 Snapchat 的?

编者按&#xff1a;本文作者 Jacob Kastrenakes 是 The Verge 科技作者。Snapchat 自上线以来&#xff0c;Facebook 不在努力扳倒它&#xff0c;就在努力学习它。即便后者不会因为 Snapchat 的成功而倒闭&#xff0c;却还是无法阻止 Facebook 参考借鉴 Snapchat 的决心。本文依…

cesium之淹没分析

发现最近成长很多&#xff0c;之前测距测面于我来说&#xff0c;做起来遥不可及&#xff0c;现在不到半天的工作时间便做出了淹没分析&#xff0c;当然也是参考的了 参考&#xff1a;mumu122 - 博客园 前提地图要设置了地形~ 1、vue 前端代码 <div class"sub_ana_c…

微软宣布将推迟ASP.NET Core的发布日期

几周之前&#xff0c;微软对于新版本的ASP.NET发布了一篇声明。Jeffrey T. Fritz是微软的程序经理&#xff0c;他在这篇博客文章中解释了发布日期变化的原因&#xff0c;并提供了新版本的命名从ASP.NET 5转变为ASP.NET Core 1.0的一些细节信息。 几周之前&#xff0c;微软将下一…

印度选定首批20座智慧城市

印度政府日前公布了首批20座智慧城市名单&#xff0c;其中包括新德里、金奈等印度传统大城市。 印度城市住房开发、城市扶贫和议会事务部长卡亚奈杜表示&#xff0c;印度未来5年将会为这20座城市投资5080亿卢比&#xff08;约合75亿美元&#xff09;。据了解&#xff0c;全印度…