Cesium-1.62 popupWindow 构造弹窗.html_cesium添加自定义popup,接收html

作者：小小林熬夜学编程 | 2024-05-13 15:07:57
踩
cesium添加自定义popup,接收html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description"
          content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
    <title>Cesium-1.62 popupWindow</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
        require.config({
            baseUrl: '../../../Source',
            waitSeconds: 60
        });
    </script>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: 15px/1.5 KaiTi, 'Microsoft Yahei';
        }

        .bx-popup-ctn {
            position: absolute;
            z-index: 999;
            background: #fff;
        }

        .bx-popup-tip-container {
            /*下边三角容器。*/
            width: 40px;
            height: 20px;
            position: absolute;
            left: 50%;
            margin-left: -20px;
            overflow: hidden;
            /*pointer-events: none;*/
            /*border: 1px dashed red;*/
        }

        .bx-popup-tip {
            /*下边三角。*/
            width: 17px;
            height: 17px;
            background: #fff;
            padding: 1px;
            margin: -10px auto 0;
            /*-webkit-transform: rotate(45deg);*/
            /*-moz-transform: rotate(45deg);*/
            /*-ms-transform: rotate(45deg);*/
            transform: rotate(45deg);
            border: 1px dashed red;
        }

        .bx-popup-header-ctn {
            /*标题*/
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            padding: 4px;
        }

        .bx-popup-content-ctn {
            /*内容*/
            padding: 10px;
            color: black;
            max-width: 400px;
            max-height: 400px;
            overflow: auto;
        }

        .leaflet-popup-close-button {
            /*右上角“X”*/
            user-select: auto;
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            cursor: pointer;
            padding: 3px;
        }
    </style>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
    /*参考：https://blog.csdn.net/u012632557/article/details/105204972*/
    function startup(Cesium) {
        'use strict';
        // Sandcastle_Begin
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg';
        // new Cesium.Viewer(container, options)
        let viewer = new Cesium.Viewer('cesiumContainer');

        // 1.创建弹窗对象的方法
        let Popup = function (info) {
            // console.log("this:", this);
            // // this: Popup {}
            this.constructor(info);
        };
        Popup.prototype.id = 0;
        Popup.prototype.constructor = function (info) {
            let _this = this;
            // console.log("this:", this);
            // // this: Popup {}
            _this.viewer = info.viewer;  // 弹窗创建的viewer
            _this.geometry = info.geometry;  // 弹窗挂载的位置
            _this.id = "popup_" + _this.__proto__.id++;
            _this.ctn = $("<div class='bx-popup-ctn' id =  '" + _this.id + "'>");
            $(_this.viewer.container).append(_this.ctn);

            /* //测试弹窗内容
             let testConfig = {
                 header: "测试数据",
                 content: "<div>测试窗口</div>",
             };
             _this.ctn.append(_this.createHtml(testConfig.header, testConfig.content));*/

            _this.render(_this.geometry);
            _this.eventListener = _this.viewer.clock.onTick.addEventListener(function (clock) {
                _this.render(_this.geometry);
            })
        };
        // 实时刷新
        Popup.prototype.render = function (geometry) {
            let _this = this;
            let position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene, geometry);
            if (position) {
                _this.ctn.css("left", position.x - _this.ctn.get(0).offsetWidth / 2);
                _this.ctn.css("top", position.y - _this.ctn.get(0).offsetHeight - 30);  // 垂直偏移距离。
            }
        };
        // 动态生成内容
        Popup.prototype.createHtml = function (header, content) {
            return '<div class="bx-popup-header-ctn">' +
                        header +
                    '</div>' +
                    '<div class="bx-popup-content-ctn" >' +
                        '<div class="bx-popup-content" >' +
                            content +
                        '</div>' +
                    '</div>' +
                    '<div class="bx-popup-tip-container" >' +
                        '<div class="bx-popup-tip" ></div>' +
                    '</div>' +
                    '<a class="leaflet-popup-close-button" οnclick="$(this).parent().remove();">X</a>';
        };
        // 关闭弹窗按钮
        Popup.prototype.close = function () {
            let _this = this;
            _this.ctn.remove();
            _this.viewer.clock.onTick.removeEventListener(_this.eventListener);
        };
        // 测试代码,点击地图后，在点击的位置创建弹窗
        let handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        let popupWindow;
        handler3D.setInputAction(function (event) {
            // console.log("event:", event);
            // console.log("popupWindow:", popupWindow);
            if (popupWindow) {
                popupWindow.close();
            }
            let pick = new Cesium.Cartesian2(event.position.x, event.position.y);
            if (pick) {
                // 获取点击位置坐标
                let cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);
                console.log("cartesian:", cartesian);
                if (cartesian) {
                    // 调用弹窗方法
                    popupWindow = new Popup({
                        viewer: viewer,
                        geometry: cartesian
                    });
                    popupWindow.ctn.append(popupWindow.createHtml("hello world!", 'hello China!'));
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // Sandcastle_End
        Sandcastle.finishedLoading();
    }

    if (typeof Cesium !== 'undefined') {
        startup(Cesium);
    } else if (typeof require === 'function') {
        require(['Cesium'], startup);
    }
</script>
</body>
</html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/564073