Cesium：点击实体后在实体上方添加div，并随地球转动不断更新位置

最新推荐文章于 2024-03-26 13:50:08 发布

KaiSarH

最新推荐文章于 2024-03-26 13:50:08 发布

阅读量4.9k

点赞数 1

分类专栏：第三方框架

本文链接：https://blog.csdn.net/KaiSarH/article/details/105945759

版权

第三方框架专栏收录该内容

148 篇文章 22 订阅

订阅专栏

需求：点击某实体后，添加div，并在实体上方位置显示。转动地球后，div位置不断更新。

运行效果

初始

在这里插入图片描述

点击圆点实体后

在这里插入图片描述

转动地球

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Cesium-1.66/Build/Cesium/Widgets/widgets.css">
    <style>
        #map3d {
            height: 400px;
            width: 600px;
            margin: 0 auto;
            position: relative;
        }

        .info {
            height: 50px;
            width: 50px;
            background-color: yellow;
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div id="map3d">
    <div id="info" class="info">自行设置样式</div>
</div>
</body>
<script src="Cesium-1.66/Build/Cesium/Cesium.js"></script>
<script src="jQuery.js"></script>
<script>
    viewer = new Cesium.Viewer('map3d', {
        selectionIndicator: false,
        animation: false,
        baseLayerPicker: false,
        timeline: false,
        sceneModePicker: true,
        navigationHelpButton: false,
        useDefaultRenderLoop: true,
        showRenderLoopErrors: true,
        fullscreenButton: false,
        infoBox: false,
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
        })
    });
    // 分辨率调整函数
    let adjustmentPixel = function () {
        // 判断是否支持图像渲染像素化处理
        var supportsImageRenderingPixelated = viewer.cesiumWidget._supportsImageRenderingPixelated;
        if (supportsImageRenderingPixelated) {
            // 直接拿到设备的像素比例因子 - 如我设置的1.25
            var vtxf_dpr = window.devicePixelRatio;
            // 这个while我们在后面会做一个说明，但不是解决问题的说明
            while (vtxf_dpr >= 2.0) {
                vtxf_dpr /= 2.0;
            }
            // 设置渲染分辨率的比例因子
            viewer.resolutionScale = vtxf_dpr;
        }
    };
    adjustmentPixel();
    viewer.scene.postProcessStages.fxaa.enabled = false;
    //viewer.scene.globe.depthTestAgainstTerrain = true;
    viewer.scene.fxaa = false;
    viewer._cesiumWidget._creditContainer.style.display = "none";
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 10000000.0),
    }); // 设置初始位置
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    viewer.entities.add(new Cesium.Entity({
        id: `点`,
        name: '点',
        show: true,
        position: Cesium.Cartesian3.fromDegrees(115.253333, 39.26111),
        point: new Cesium.PointGraphics({
            show: true,
            pixelSize: 5,
            heightReference: Cesium.HeightReference.NONE,
            color: new Cesium.Color(255, 255, 0, 1),
            outlineColor: new Cesium.Color(0, 0, 0, 0),
            outlineWidth: 0,
            scaleByDistance: new Cesium.NearFarScalar(0, 1, 5e10, 1),
            translucencyByDistance: new Cesium.NearFarScalar(0, 1, 5e10, 1),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 4.8e10),
        })
    }));
    handler.setInputAction(function (event) {
        let $info = $('#info');
        let pick = viewer.scene.pick(event.position);
        let c = new Cesium.Cartesian2(event.position.x, event.position.y);

        function update(c) {
            let x = c.x - ($info.width()) / 2;
            let y = c.y - ($info.height()) - 5;
            $info.css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
        }

        viewer.scene.postRender.addEventListener(function () {
            let changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pick.primitive._actualPosition);
            if (c && changedC && c.x && changedC.x && c.y && changedC.y) {
                if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
                    update(changedC);
                    c = changedC;
                }
            }
        });
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
</html>