Cesium气泡窗口样式

最新推荐文章于 2024-08-09 15:10:52 发布

xt3d

最新推荐文章于 2024-08-09 15:10:52 发布

阅读量1.1k

点赞数

文章标签： webgl vue js

本文链接：https://blog.csdn.net/xietao20/article/details/111500830

版权

Cesium 专栏收录该内容

86 篇文章 87 订阅

订阅专栏

Cesium气泡窗口样式

效果
关键代码

效果

在这里插入图片描述

关键代码

        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";
        }