10-Cesium鼠标移动提示框

CSS样式

.tooltip{
    
    max-width: 150px;

    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: fixed;
    z-index: 100;
    font-size: .875rem;
    line-height: 20px;
    padding: 0 5px;
    
}
.tooltip::after{
    position: absolute;
    content: "";
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;

    border-style: solid;
    border-width: 5px 8.7px 5px 0;
    border-color: transparent  rgba(0, 0, 0, 0.5) transparent transparent;

}

封装提示框

export class ToolTip {
  constructor(viewer) {
    this.viewer = viewer
    this.div = document.createElement('div')
    this.div.className = 'tooltip'
    this.viewer.container.appendChild(this.div)
  }

  setVisible(visible) {
    this.div.style.display = visible ? 'block' : 'none'
  }
  setPosition(position, innerHtml) {
    this.div.innerHTML = innerHtml

    this.div.style.left = position.x + 20 + 'px'
    this.div.style.top = position.y - this.div.clientHeight / 2 + 'px'
  }
}

调用

let toolTip = new ToolTip(viewer)
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

handler.setInputAction((click) => {
 let toolTip = new ToolTip(viewer)
 toolTip.setPosition(click.position, '鼠标点击')
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
handler.setInputAction((click) => {
 toolTip.setPosition(
   click.endPosition,
   '鼠标移动鼠标移动鼠标移动鼠标移动鼠标移动'
 )
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)