cesium中divPoint展示数据

cesium中divPoint展示数据

在用点击面获取位置信息的时候，会弹出一个divPoint框，用来展示这个面的属性信息；或者位置信息。

代码如下：

// 创建div弹出框

    createDIV (x, y, text) {

      var viewDivPoint = document.getElementById('viewDivPoint')

      var div = document.createElement('div')

      div.id = 'divPoint'

      div.style.top = y + 'px'

      div.style.left = x + 'px'

      div.style.height = '100px'

      div.style.width = '100px'

      div.style.border = '2px'

      div.style.fontSize = '20px'

      div.style.position = 'relative'

      div.style.background = 'pink'

      div.innerHTML = text

      viewDivPoint.appendChild(div)

    }

 

//点击事件

 var handler = new Cesium.ScreenSpaceEventHandler(

        this.viewer.scene.canvas

      )

      var that = this

      handler.setInputAction(function (movement) {

        // 获取屏幕坐标

        var pick = new Cesium.Cartesian2(

          movement.position.x,

          movement.position.y

        )

        // 调用

        var viewDivPoint = document.getElementById('viewDivPoint')

        var divPoint = document.getElementById('divPoint')

        if (divPoint) {

          viewDivPoint.removeChild(divPoint)

          that.createDIV(pick.x, pick.y, '我在做实验。')

        } else {

          that.createDIV(pick.x, pick.y, '我在做实验。')

        }

        // console.log(position.id.id, 'test')

      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

相关学习群：854184700