三维简易弹框

最新推荐文章于 2022-12-21 19:45:00 发布

Da6668_lei

最新推荐文章于 2022-12-21 19:45:00 发布

阅读量357

点赞数 1

分类专栏： cesium 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Da6668_lei/article/details/127015158

版权

cesium 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在Cesium三维视图中创建一个弹窗组件，包括关闭功能、位置更新以及与Vue子组件的交互。通过监听场景渲染事件实现实时更新标签位置，并在相机高度变化时控制显示。Vue子组件包含详细信息展示，支持关闭操作。

摘要由CSDN通过智能技术生成

使用

import PopupWindow from "@/utils/cesiumTool/PopupWindow.js";
              pWindow && pWindow.windowClose();
              pWindow = new PopupWindow(
                window.viewer,
                Cesium.Cartesian3.fromDegrees(
                  pick.id.obj.coordinates[0],
                  pick.id.obj.coordinates[1]
                ),
                {
                  field: ["监控", "ipkk", "测试", "lll"],
                  value: [12, 23, 34, 34],
                }
              );

js数据

import Vue from "vue";
import WindowVue from "./window.vue";
let WindowVm = Vue.extend(WindowVue);
export default class PopupWindow {
    constructor(viewer, position, data) {
        console.log(viewer, position, data)
        this.vmInstance = new WindowVm().$mount();
        this.vmInstance.detail = data
        this.viewer = viewer;
        this.position = position;

        //点击窗口上的关闭按钮
        this.vmInstance.closeEvent = e => {
            this.windowClose();
        };

        viewer.cesiumWidget.container.appendChild(this.vmInstance.$el);
        this.addPostRender(position);
    }


    //添加场景事件
    addPostRender() {
        this.viewer.scene.postRender.addEventListener(this.postRender, this);
    }

    //场景渲染事件 实时更新标签的位置 使其与笛卡尔坐标一致
    postRender() {
        if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
        const canvasHeight = this.viewer.scene.canvas.height;
        const windowPosition = new Cesium.Cartesian2();
        Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position, windowPosition);
        this.vmInstance.$el.style.bottom = canvasHeight - windowPosition.y + 70 + "px";
        const elWidth = this.vmInstance.$el.offsetWidth;
        this.vmInstance.$el.style.left = windowPosition.x + 20 + "px";

        // if (this.viewer.camera.positionCartographic.height > 4000) {
        //     this.vmInstance.$el.style.display = "none";
        // } else {
        //     this.vmInstance.$el.style.display = "block";
        // }
    }

    windowClose() {
        this.viewer.selectedEntity = null
        this.vmInstance.show = false; //删除dom
        this.viewer.scene.postRender.removeEventListener(this.postRender, this); //移除事件监听
    }
}

pop的vue文件

<template>
    <div class="popup3d-container" v-if="show">
        <div class="popup3d-header">
            <span class="popup3d-header-title">详细信息</span>
            <span class="popup3d-close" @click="handleClose" title="关闭">×</span>
        </div>
        <div class="popup3d-body">
            <div style="display: flex" v-for="(item, index) in detail.field" :key="index">
                <div>{{item}}：</div>
                <div>{{detail.value[index]}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "PopupWindow2",
        data() {
            return {
                show: true,
                detail: {}
            };
        },
        props: {
            id: {
                type: Number,
                default: -1
            }
        },
        methods: {
            handleClose() {
                if (this.closeEvent) {
                    this.closeEvent();
                }
            }
        }
    };
</script>

<style   scoped>
    .popup3d-container {
        width: 350px;
        height: 200px;
        background: #14193399;
        position: absolute;
        left: 0px;
        bottom: 0px;
        cursor: default;
    }

    .popup3d-container::before {
        content: "";
        width: calc(100% + 22px);
        height: 39px;
        position: absolute;
        bottom: -39px;
        left: -22px;
        background: url('./popup3d.png') 0px 0px no-repeat;
    }

    .popup3d-header {
        height: 30px;
        color: white;
        background: #1f3f8e;
        line-height: 30px;
    }

    .popup3d-header-title {
        display: inline-block;
        height: 100%;
        margin-left: 5px;
    }

    .popup3d-close {
        position: absolute;
        right: 1px;
        font-size: 25px;
        cursor: pointer;
        width: 29px;
        text-align: center;
    }

    .popup3d-close:hover {
        color: #88aacc;
    }

    .popup3d-body {
        padding: 10px;
        color:white;
    }
</style>