便利贴--10{Cesium+js随地图弹窗}

使用

// 定制化窗体
      const popupsDom = new global.DC.mobileDivForms(state.mviewer, {
   
   
        domId: "mobilePopup",
        title: data.query.name || "成教楼  ",
        className: "mobilePopup",
        content: document.getElementById("mobile-map_content_content"),
        position: [data.position],
      });

构造函数主体

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)
        // 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;
        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

html展示页面–可查看上一篇–便利贴9有一部分

<template>
  <div
    ref="mobile-mapContent