/*
|
* @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' // 核心包
|
|
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()
|
this.isOpen = true
|
}
|
|
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) {
|
const dom = document.getElementById('mobile-map_popup_content')
|
dom.style.display = 'block'
|
|
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 el = document.createElement('div')
|
|
// var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
|
// var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)
|
|
// el.append(titleDiv)
|
// el.append(labelContent)
|
el.appendChild(this._content)
|
|
el.setAttribute('id', id)
|
|
el.setAttribute('class', className || '')
|
|
document.getElementById('mobile-map_popup_content').appendChild(el)
|
// let time;
|
// function cons(e) {
|
// time = setTimeout(() => {
|
// console.log(e)
|
// console.log(e.sun._drawingBufferHeight)
|
// console.log("roll: ", e.camera.roll)
|
// console.log("pitch: ", e.camera.pitch)
|
// console.log("heading: ", e.camera.heading)
|
// clearTimeout(time);
|
// time = "";
|
// }, 2000);
|
// }
|
|
this._viewer.scene.postRender.addEventListener(function (e) {
|
if (!self.isOpen) {
|
return
|
}
|
const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
self._viewer.scene,
|
position
|
)
|
// time || cons(e);
|
self.positionPopUp(windowCoord, id)
|
})
|
}
|
|
positionPopUp (windowCoord, id) {
|
if (!windowCoord) {
|
return
|
}
|
// console.log(windowCoord)
|
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);
|
`
|
}
|
|
closeOur () {
|
this.isOpen = false
|
const dom = document.getElementById('mobile-map_popup_content')
|
dom.style.display = 'none'
|
// 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])
|
// }
|
// }
|
}
|
}
|
|
export default mobileDivForms
|
