Cesium单弹窗-多弹窗-附代码

原创

已于 2024-09-03 10:54:44 修改 · 934 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#cesium 多弹窗

于 2024-09-03 10:50:09 首次发布

cesium点击地图上要素，显示弹窗，一种是共用一个弹窗，一种是多个弹窗，两种方式用于不同需求

更多示例联系QQ：854138497

示例集合1
https://blog.youkuaiyun.com/qq_40820382/article/details/132493694
示例集合2
https://blog.youkuaiyun.com/qq_40820382/article/details/132594789

一个弹窗示例
在这里插入图片描述
代码，直接z在vscode 右键，选择【在浏览器中打开】

<!DOCTYPE html>
<html>
<head>
    <title>点击出现弹窗-拖动地图弹窗跟着走</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css">
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .modal {
            display: none;
            position: absolute;
            z-index: 1000;
            background-color: white;
            border: 1px solid #888;
            padding: 10px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <div id="modal-body"></div>
    </div>
    <div id="contentToPopUp">
        <p>这是要显示在弹窗中的内容。</p>
    </div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
            })
        });
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 10000000),
            duration: 0,
        });
        // 添加一些示例数据作为实体。点加载到中国区域了
        var entities = [
            viewer.entities.add({
                name : 'Example Entity 1',
                position : Cesium.Cartesian3.fromDegrees(121.4737, 31.2304), // 上海的经纬度
                point : {
                    pixelSize : 10,