/*
|
* @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();
|
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) {
|
let 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 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.append(this._content)
|
|
el.attr('id', id)
|
|
el.addClass(className || '')
|
|
$('#mobile-map_popup_content').append(el)
|
|
this._viewer.scene.postRender.addEventListener(function () {
|
if (!self.isOpen) {
|
return;
|
}
|
const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
self._viewer.scene,
|
position
|
)
|
|
self.positionPopUp(windowCoord, id)
|
})
|
}
|
|
positionPopUp(windowCoord, id) {
|
if (!windowCoord) {
|
return;
|
}
|
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;
|
let 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
|
