/*
|
* @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 mobileDivForms {
|
/**
|
* @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('mobile-map_popup_content').getElementsByTagName('div')
|
|
if (childs.length > 0) {
|
for (var i = 0; i < childs.length; i++) {
|
document.getElementById('mobile-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='mobiletitle'></div>").text(this._title)
|
var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)
|
|
// var titleDiv = $("<div class='mobiletitle'>楼</div>")
|
// var labelContent = $("<div class='mobilelabel-content'>内容</div>")
|
|
// 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.append(titleDiv)
|
el.append(labelContent)
|
|
el.attr('id', id)
|
|
el.addClass(className || '')
|
|
$('#mobile-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 wx = document.getElementById('app').clientWidth;
|
const x = windowCoord.x - (wx / 100 * 35);
|
const y = windowCoord.y - document.getElementById(id).offsetHeight - 15;
|
// x = windowCoord.x - document.getElementById(id).offsetWidth
|
|
// document.getElementById(id).style.cssText = `
|
document.getElementById(id).style.cssText = `
|
visibility:visible;
|
z-index:98;
|
transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
|
`
|
}
|
}
|
|
export default mobileDivForms
|
