/**
|
* 气泡窗类
|
* @class
|
*
|
*/
|
import * as Cesium from 'cesium'
|
import "./prompt.css"
|
class Prompt {
|
/**
|
* @param {Cesium.Viewer} viewer 地图viewer对象
|
* @param {Object} opt
|
* @param {Cesium.Cartesian3 | Array} [opt.position] 弹窗坐标 （type=2时生效）
|
* @param {Boolean} opt.show 是否显示
|
* @param {Function} [opt.success] 创建成功的回调函数
|
* @param {Number} [opt.type=1] 1~位置变化提示框 / 2~固定坐标提示框
|
* @param {Cesium.Cartesian3 | Array} opt.position 固定坐标提示框的坐标（ cartesian3 / [101,30] ），type为1时，可不设置此参数
|
* @param {Boolean} [opt.anchor=true] 是否显示锚点
|
* @param {Boolean} [opt.closeBtn=true] 是否显示关闭按钮
|
* @param {String} opt.className 自定义class
|
* @param {String} opt.content 弹窗内容
|
* @param {Function} [opt.close] 关闭弹窗时的回调函数
|
* @param {Object} [opt.offset] 偏移参数
|
* @param {Number} [opt.offset.x] 横坐标偏移像素单位
|
* @param {Number} [opt.offset.y] 纵坐标偏移像素单位
|
* @param {Object} [opt.style] 弹窗面板样式
|
* @param {String} [opt.style.background='white'] 背景色
|
* @param {String} [opt.style.boxShadow] 弹窗阴影（css属性）
|
* @param {String} [opt.style.color] 弹窗颜色
|
*
|
*/
|
constructor(viewer, opt) {
|
this.viewer = viewer
|
if (!this.viewer) return
|
this.type = "prompt"
|
// 默认值
|
opt = opt || {}
|
const promptType = opt.type == undefined ? 1 : opt.type
|
let defaultOpt = {
|
id: (new Date().getTime() + "" + Math.floor(Math.random() * 10000)),
|
type: promptType,
|
anchor: promptType == 2 ? true : false,
|
closeBtn: promptType == 2 ? true : false,
|
offset: promptType == 2 ? { x: 0, y: -20 } : { x: 10, y: 10 },
|
content: "",
|
show: true,
|
style: {
|
background: "rgba(0,0,0,0.5)",
|
color: "white"
|
}
|
}
|
|
this.opt = Object.assign(defaultOpt, opt)
|
|
/**
|
* @property {Object} attr 相关属性
|
*/
|
this.attr = this.opt
|
// ====================== 创建弹窗内容 start ======================
|
const mapid = this.viewer.container.id
|
|
/**
|
* @property {Boolearn} isShow 当前显示状态
|
*/
|
this.isShow = this.opt.show == undefined ? true : this.opt.show // 是否显示
|
let anchorHtml = ``
|
let closeHtml = ``
|
const background = this.opt.style.background
|
const color = this.opt.style.color
|
if (this.opt.anchor) {
|
anchorHtml += `
|
<div class="prompt-anchor-container">
|
<div class="prompt-anchor" style="background:${background} !important;">
|
</div>
|
</div>
|
`
|
}
|
if (this.opt.closeBtn) { // 移动提示框 不显示关闭按钮
|
closeHtml = `<a class="prompt-close" attr="${this.opt.id}" id="prompt-close-${this.opt.id}">x</a>`
|
}
|
let boxShadow = this.opt.style.boxShadow
|
const promptId = "prompt-" + this.opt.id
|
const promptConenet = `
|
<!-- 文本内容 -->
|
<div class="prompt-content-container" style="background:${background} !important;color:${color} !important;box-shadow:${boxShadow} !important">
|
<div class="prompt-content" id="prompt-content-${this.opt.id}">
|
${this.opt.content}
|
</div>
|
</div>
|
<!-- 锚 -->
|
${anchorHtml}
|
<!-- 关闭按钮 -->
|
${closeHtml}
|
`
|
// 构建弹窗元素
|
this.promptDiv = window.document.createElement("div")
|
this.promptDiv.className = `easy3d-prompt ${this.opt.className}`
|
this.promptDiv.id = promptId
|
this.promptDiv.innerHTML = promptConenet
|
let mapDom = window.document.getElementById(mapid)
|
mapDom.appendChild(this.promptDiv)
|
const clsBtn = window.document.getElementById(`prompt-close-${this.opt.id}`)
|
let that = this
|
if (clsBtn) {
|
clsBtn.addEventListener("click", (e) => {
|
that.hide()
|
if (that.opt.close) that.opt.close()
|
})
|
}
|
|
/**
|
* @property {Object} promptDom 弹窗div
|
*/
|
this.promptDom = window.document.getElementById(promptId)
|
|
this.position = this.transPosition(this.opt.position)
|
// ====================== 创建弹窗内容 end ======================
|
|
if (promptType == 2) this.bindRender() // 固定位置弹窗 绑定实时渲染 当到地球背面时 隐藏
|
if (this.opt.show == false) this.hide()
|
this.containerW = this.viewer.container.offsetWidth
|
this.containerH = this.viewer.container.offsetHeight
|
this.containerLeft = this.viewer.container.offsetLeft
|
this.containerTop = this.viewer.container.offsetTop
|
|
/**
|
* @property {Number} contentW 弹窗宽度
|
*/
|
this.contentW = Math.ceil(Number(this.promptDom.offsetWidth)) // 宽度
|
|
/**
|
* @property {Number} contentH 弹窗高度
|
*/
|
this.contentH = this.promptDom.offsetHeight // 高度
|
|
if (this.opt.success) this.opt.success()
|
}
|
|
/**
|
* 销毁
|
*/
|
destroy () {
|
if (this.promptDiv) {
|
window.document.getElementById(this.viewer.container.id).removeChild(this.promptDiv)
|
this.promptDiv = null
|
}
|
if (this.rendHandler) {
|
this.rendHandler()
|
this.rendHandler = null
|
}
|
}
|
// 实时监听
|
bindRender () {
|
let that = this
|
this.rendHandler = this.viewer.scene.postRender.addEventListener(function () {
|
if (!that.isShow && that.promptDom) {
|
that.promptDom.style.display = "none"
|
return
|
}
|
if (!that.position) return
|
if (that.position instanceof Cesium.Cartesian3) {
|
let px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.viewer.scene, that.position)
|
if (!px) return
|
const occluder = new Cesium.EllipsoidalOccluder(that.viewer.scene.globe.ellipsoid, that.viewer.scene.camera.position)
|
// 当前点位是否可见 是否在地球背面
|
const res = occluder.isPointVisible(that.position)
|
if (res) {
|
if (that.promptDom) that.promptDom.style.display = "block"
|
} else {
|
if (that.promptDom) that.promptDom.style.display = "none"
|
}
|
that.setByPX({
|
x: px.x,
|
y: px.y
|
})
|
} else {
|
that.setByPX({
|
x: that.position.x,
|
y: that.position.y
|
})
|
}
|
|
}, this)
|
}
|
|
/**
|
*
|
* @param {Cesium.Cartesian3 | Object} px 弹窗坐标
|
* @param {String} html 弹窗内容
|
*/
|
update (px, html) {
|
if (px instanceof Cesium.Cartesian3) {
|
this.position = px.clone()
|
|
px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, px)
|
}
|
this.contentW = Math.ceil(Number(this.promptDom.offsetWidth)) // 宽度
|
this.contentH = this.promptDom.offsetHeight // 高度
|
if (px) this.setByPX(px)
|
if (html) this.setContent(html)
|
}
|
|
// 判断是否在当前视野内
|
isInView () {
|
if (!this.position) return false
|
let px = null
|
if (this.position instanceof Cesium.Cartesian2) {
|
px = this.position
|
} else {
|
px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position)
|
}
|
const occluder = new Cesium.EllipsoidalOccluder(this.viewer.scene.globe.ellipsoid, this.viewer.scene.camera.position)
|
// 是否在地球背面
|
const res = occluder.isPointVisible(this.position)
|
let isin = false
|
if (!px) return isin
|
if (
|
px.x > this.containerLeft &&
|
px.x < (this.containerLeft + this.containerW) &&
|
px.y > this.containerTop &&
|
px.y < (this.containerTop + this.containerH)
|
) {
|
isin = true
|
}
|
return res && isin
|
}
|
|
/**
|
* 是否可见
|
* @param {Boolean} isShow true可见，false不可见
|
*/
|
setVisible (isShow) {
|
let isin = this.isInView(this.position)
|
if (isin && isShow) {
|
this.isShow = true
|
if (this.promptDom) this.promptDom.style.display = "block"
|
} else {
|
this.isShow = false
|
if (this.promptDom) this.promptDom.style.display = "none"
|
}
|
}
|
|
showTip () {
|
if (this.promptDom) this.promptDom.style.display = "block"
|
}
|
|
hideTip () {
|
if (this.promptDom) this.promptDom.style.display = "none"
|
}
|
|
/**
|
* 显示
|
*/
|
show () {
|
this.setVisible(true)
|
}
|
|
/**
|
* 隐藏
|
*/
|
hide () {
|
this.setVisible(false)
|
}
|
|
/**
|
* 设置弹窗内容
|
* @param {String} content 内容
|
*/
|
setContent (content) {
|
let pc = window.document.getElementById(`prompt-content-${this.opt.id}`)
|
pc.innerHTML = content
|
}
|
|
/**
|
* 设置弹窗坐标
|
* @param {Object} opt 屏幕坐标
|
*/
|
setByPX (opt) {
|
if (!opt) return
|
if (this.promptDom) {
|
const contentW = this.promptDom.offsetWidth // 宽度
|
const contentH = this.promptDom.offsetHeight // 高度
|
|
if (this.opt.type == 1) {
|
this.promptDom.style.left = ((Number(opt.x) + Number(this.opt.offset.x || 0))) + "px"
|
this.promptDom.style.top = ((Number(opt.y) + Number(this.opt.offset.y || 0))) + "px"
|
} else {
|
this.promptDom.style.left = ((Number(opt.x) + Number(this.opt.offset.x || 0)) - Number(this.contentW) / 2) + "px"
|
this.promptDom.style.top = ((Number(opt.y) + Number(this.opt.offset.y || 0)) - Number(this.contentH)) + "px"
|
}
|
}
|
}
|
|
// 坐标转换
|
transPosition (p) {
|
let position
|
if (Array.isArray(p)) {
|
const posi = Cesium.Cartesian3.fromDegrees(p[0], p[1], p[2] || 0)
|
position = posi.clone()
|
} else if (p instanceof Cesium.Cartesian3) {
|
position = p.clone()
|
} else { // 像素类型
|
position = p
|
}
|
return position
|
}
|
}
|
|
export default Prompt
|
