【Cesium】点击billboard弹出自定义气泡框

程序员不丑009

已于 2022-05-11 09:10:13 修改

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： SuperMap Cesium 文章标签：自定义弹出框

于 2019-06-04 16:04:31 首次发布

本文链接：https://blog.youkuaiyun.com/u013517229/article/details/90770608

SuperMap 同时被 2 个专栏收录

9 篇文章

订阅专栏

Cesium

9 篇文章

订阅专栏

本文介绍如何使用Cesium在地图上实现点击图标弹出自定义气泡框的功能，气泡框在地图缩放和移动时能保持与图标的相对位置不变。通过HTML、CSS和JavaScript代码，详细展示了气泡框的样式设计和交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能：

点击billboard图标，弹出自定义气泡框，并且在缩放、移动地图时保持气泡框和图标的相对位置不变。

实现效果：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>气泡框</title>
    <link href="../../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="../css/pretty.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../Build/Cesium/Cesium.js"></script>
    <script src="../js/config.js"></script>
    <style>
        #nlyjBubble {
            width: 20em;
            height: 10em;
            position: absolute;
            background: linear-gradient(180deg, rgba(5, 31, 72, 0.80) 0%, rgba(1, 12, 31, 0.80) 100%);
            border: 1px solid #2177f5;
        }

        .rightLine-1 {
            position: absolute;
            top: 0;
            background: #2177f5;
            width: 4em;
            right: -4em;
            height: 0.2em;

        }

        .rightLine-2 {
            position: absolute;
            top: 2.2em;
            right: -9em;
            background: #2177f5;
            width: 6em;
            height: 0.2em;
            transform: rotate(47deg);
            -ms-transform: rotate(47deg); /* IE 9 */
            -moz-transform: rotate(47deg); /* Firefox */
            -webkit-transform: rotate(47deg); /* Safari 和 Chrome */
            -o-transform: rotate(47deg);
        }

        .rightLine-3 {
            position: absolute;
            top: 4em;
            right: -9.5em;
            width: 2em;
            height: 2em;
            background: url("image/shiti_jiantou.png") no-repeat;
            background-size: 100% 100%;
        }


        .titleText {
            font-size: 1.1em;
            color: white;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: bold;
            color: #cfe8fb;
            line-height: 2.2em;
            margin-left: 1em;
        }

        .closeYjBubble {
            font-size: 1.7em;
            float: right;
            margin: 0 0.2em 0.6em 0;
            color: #cfe8fb;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>

<div id="nlyjBubble">
    <div class="rightLine-1"></div>
    <div class="rightLine-2"></div>
    <div class="rightLine-3"></div>
    <div class="bubbleTitle">
        <span class="titleText">标题</span>
        <span class="closeYjBubble" @click="closeyjBubble()">×</span>
    </div>
</div>


<script>
    var viewer;
    function onload(Cesium) {
        viewer = new Cesium.Viewer('cesiumContainer', {
                selectionIndicator: false,  // 设置绿色框不可见
                infoBox: false  // 右边Div不可见
            }
        );

        var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler3D.setInputAction(function (movement){
            var pick = viewer.scene.pick(movement.position);
            if (typeof (pick.id) != "undefined") {
                var postion = pick.id.position._value;
                viewer.scene.postRender.addEventListener(function () {
                    // 笛卡尔空间直角坐标（Cartesian3）转屏幕坐标（像素）
                    var changedEntity2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, postion);
                    positionPopup(changedEntity2);
                });

            }

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

        //纠正偏移位置
        function positionPopup(c) {
            if (typeof (c) != "undefined") {
                var x = c.x - 445;
                var y = c.y - 120;
                $("#nlyjBubble").css("left", x + "px");
                $("#nlyjBubble").css("top", y + "px");
            }
        }
        var entity = new Cesium.Entity({
            position: Cesium.Cartesian3.fromDegrees(120.910296, 41.321996),
            billboard: {
                image: "image/map_xuexiao@2x.png",
                width: 42,  
                height: 42,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            }
        });
        viewer.entities.add(entity);

        var ViewConfig = {
            heading: 6.181876610062452,
            pitch: -0.8623102447494362,
            roll: 6.283185307179586,
            x: -2730256.8730273987,
            y: 4455816.281338929,
            z: 4201949.904863519
        };

        viewer.camera.position = {x: ViewConfig.x, y: ViewConfig.y, z: ViewConfig.z};
        viewer.scene.camera.setView({
            orientation: {
                heading: ViewConfig.heading,
                pitch:  ViewConfig.pitch,
                roll:  ViewConfig.roll
            }
        });


        viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
            mapStyle : Cesium.TiandituMapsStyle["IMG_C"],
            maximumLevel: 17,
            token: "4a00a1dc5387b8ed8adba3374bd87e5e"
        }),1);

        $('#loadingbar').remove();

    }
    if (typeof Cesium !== 'undefined') {
        window.startupCalled = true;
        onload(Cesium);
    }

</script>
</body>
</html>