/*
|
* @Descripttion:
|
* @version: 0.01
|
* @Author: Morpheus
|
* @Date: 2020-10-22 11:05:09
|
* @LastEditors: Morpheus
|
* @LastEditTime: 2020-10-22 13:48:22
|
*/
|
|
import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
|
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包
|
|
var $ = window.$
|
|
DC.use(DcCore) // 安装DC核心库
|
|
class divForms {
|
/**
|
* @popup 存放 dom 相关
|
*
|
*/
|
constructor (viewer, popup) {
|
this._viewer = viewer
|
this._popup = popup
|
this._position = popup.position
|
this._title = popup.title
|
this._content = popup.content
|
this.appendPopup()
|
}
|
|
get viewer () {
|
return this._viewer
|
}
|
|
get title () {
|
return this._title
|
}
|
|
get content () {
|
return this._content
|
}
|
|
get popup () {
|
return this._popup
|
}
|
|
get position () {
|
return this._position
|
}
|
|
appendPopup () {
|
/**
|
* @domId 存放 dom 的id, 多个数组，单个字符串
|
*/
|
|
this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
|
}
|
|
// 创建元素并追加
|
createVideoWindowAll (id, className, position) {
|
var childs = document.getElementById('map_popup_content').getElementsByTagName('div')
|
|
if (childs.length > 0) {
|
for (var i = 0; i < childs.length; i++) {
|
document.getElementById('map_popup_content').removeChild(childs[i])
|
}
|
}
|
|
var self = this
|
|
var el = $("<div class=''></div>")
|
|
var divBig = $("<div style='width: 100%; height: 100%;' class=''></div>")
|
|
var divForms = $("<div class='divForms divForms-theme'></div>")
|
|
var divFormsWrap = $("<div class='divForms-wrap'></div>")
|
|
var area = $("<div class='area'></div>")
|
|
var arrowLt = $("<div class='arrow-lt'></div>")
|
var bT = $("<div class='b-t'></div>")
|
var bR = $("<div class='b-r'></div>")
|
var bB = $("<div class='b-b'></div>")
|
var bL = $("<div class='b-l'></div>")
|
var arrowRb = $("<div class='arrow-rb'></div>")
|
|
var labelWrap = $("<div class='label-wrap'></div>")
|
var titleDiv = $("<div class='title'></div>").text(this._title)
|
var labelContent = $("<div class='label-content'></div>").append(this._content)
|
|
labelWrap.append(titleDiv)
|
labelWrap.append(labelContent)
|
|
var bTL = $("<div class='b-t-l'></div>")
|
var bBR = $("<div class='b-b-r'></div>")
|
|
var arrow = $("<div class='arrow'></div>")
|
|
area.append(arrowLt)
|
area.append(bT)
|
area.append(bR)
|
area.append(bB)
|
area.append(bL)
|
area.append(arrowRb)
|
area.append(labelWrap)
|
|
divFormsWrap.append(area)
|
divFormsWrap.append(bTL)
|
divFormsWrap.append(bBR)
|
|
divForms.append(divFormsWrap)
|
divForms.append(arrow)
|
|
divBig.append(divForms)
|
el.append(divBig)
|
|
el.attr('id', id)
|
|
el.addClass(className || '')
|
|
$('#map_popup_content').append(el)
|
|
this._viewer.scene.postRender.addEventListener(function () {
|
const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
self._viewer.scene,
|
position
|
)
|
|
self.positionPopUp(windowCoord, id)
|
})
|
}
|
|
positionPopUp (windowCoord, id) {
|
const x = windowCoord.x
|
const y = windowCoord.y - document.getElementById(id).offsetHeight
|
// x = windowCoord.x - document.getElementById(id).offsetWidth
|
|
document.getElementById(id).style.cssText = `
|
visibility:visible;
|
z-index:1;
|
transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
|
`
|
}
|
}
|
|
export default divForms
|
