cesium 点击单一tile轮廓高亮

置顶我就是你的语法糖️

已于 2022-04-20 14:14:27 修改

阅读量1.4k

点赞数 2

分类专栏： TANG的 Cesium 文章标签： vue

于 2022-04-11 11:30:13 首次发布

本文链接：https://blog.csdn.net/qq_43274430/article/details/124094833

版权

TANG的 Cesium 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

单击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)
      }
    }