+

liuyg

2021-12-15 b7c39e4ccd65249dc385d76d08ed59834f83ad97

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/*
 * @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 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.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) {
        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);
        `
    }
}
 
export default mobileDivForms