export class MapTooltip {
|
constructor(viewer, options = {}) {
|
this.viewer = viewer
|
this.options = options
|
this.container = viewer?.container || null
|
this.tooltipEl = null
|
this.isVisible = false
|
this.init()
|
}
|
|
init() {
|
if (!this.container || this.tooltipEl) return
|
const el = document.createElement('div')
|
el.style.position = 'absolute'
|
el.style.pointerEvents = 'none'
|
el.style.padding = '6px 8px'
|
el.style.background = 'rgba(0, 0, 0, 0.65)'
|
el.style.color = '#fff'
|
el.style.fontSize = '12px'
|
el.style.borderRadius = '4px'
|
el.style.whiteSpace = 'nowrap'
|
el.style.zIndex = '1000'
|
el.style.display = 'none'
|
this.container.appendChild(el)
|
this.tooltipEl = el
|
}
|
|
show(text, position) {
|
if (!this.tooltipEl) return
|
this.tooltipEl.textContent = text || ''
|
this.tooltipEl.style.display = 'block'
|
this.isVisible = true
|
if (position) this.move(position)
|
}
|
|
move(position) {
|
if (!this.tooltipEl || !position) return
|
const offset = this.options.offset || { x: 12, y: 12 }
|
this.tooltipEl.style.left = `${position.x + offset.x}px`
|
this.tooltipEl.style.top = `${position.y + offset.y}px`
|
}
|
|
hide() {
|
if (!this.tooltipEl) return
|
this.tooltipEl.style.display = 'none'
|
this.isVisible = false
|
}
|
|
destroy() {
|
this.hide()
|
if (this.tooltipEl && this.container) {
|
this.container.removeChild(this.tooltipEl)
|
}
|
this.tooltipEl = null
|
this.container = null
|
this.viewer = null
|
}
|
}
|
