弹框完善

shuishen

2021-12-17 b5f8881176bcb44928758e25d7d7a6fc140840c5

 src/divForms/divForms.js

@@ -10,11 +10,9 @@
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 {
class DivForms {
    /**
     * @popup 存放 dom 相关
     *
@@ -23,21 +21,11 @@
        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 () {
@@ -53,97 +41,47 @@
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll (id, className, position) {
        var childs = document.getElementById('map_popup_content').getElementsByTagName('div')
    createVideoWindowAll (id) {
        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

        if (childs.length > 0) {
            for (var i = 0; i < childs.length; i++) {
                document.getElementById('map_popup_content').removeChild(childs[i])
            }
        }

    movePopup (id) {
        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 () {
        return function () {
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                position
                self._position[0]
            )

            self.positionPopUp(windowCoord, id)
        })
        }
    }

    clearMove (id) {
        this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
    }

    positionPopUp (windowCoord, id) {
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x)) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            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
export default DivForms