Cesium气泡广告牌的实现方案

原创 于 2026-03-05 00:45:54 发布 · 526 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#cesium

存稿：
又是被Leader折磨的一天，要我给无人机任务轨迹详情里加上飞行过程中拍摄的照片，嗯，具体效果嘛，就是下面的样子
在这里插入图片描述
好家伙，这是真能整活，这图片质感确定没自写材质？要我短时间搞定，那我肯定上阉割版啊，谁家好人陪你玩这么大。

Step 0：

思路：按照写广告牌div窗的方式，我写了一个div，专门用来放图片，然后将其计算屏幕坐标固定在坐标位置。

简直so easy，两个小时就搞定。
在这里插入图片描述
部分代码：

drawpictures(item){
      var viewer = this.viewer
      function convertToScreenCoordinates(lng, lat) {
          const position = Cesium.Cartesian3.fromDegrees(lng, lat);
          const screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);

          return screenPosition;
      }

      const locations = [
          { lng: item.lng, lat: item.lat, imgUrl: item.fileUrl },
          { lng: item.lng + 0.001, lat: item.lat, imgUrl: item.fileUrl },
      ];

      locations.forEach(location => {
          const div = document.createElement('div');
          div.id = `popup-${location.lng}-${location.lat}`; 
          div.style.position = 'absolute';
          div.style.width = '100px';
          div.style.height = '100px';
          div.style.borderRadius = '50%'; // 圆形的边框
          div.style.border = '3px solid white'; // 边框颜色
          div.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
          div.style.backgroundImage = `url(${location.imgUrl})`;
          div.style.backgroundSize = 'cover';
          div.style.backgroundPosition = 'center';

          document.body.appendChild(div);

          const screenPos = convertToScreenCoordinates(location.lng, location.lat);

          div.style.left = `${screenPos.x - div.offsetWidth / 2}px`; // 居中定位
          div.style.top = `${screenPos.y - div.offsetHeight / 2}px`;

          const arrowDiv = document.createElement('div');
          arrowDiv.id = `arrow-${location.lng}-${location.lat}`; 
          arrowDiv.style.position = 'absolute';
          arrowDiv.style.width = '0';
          arrowDiv.style.height = '0';
          arrowDiv.style.borderLeft = '5px solid transparent';
          arrowDiv.style.borderRight = '5px solid transparent';
          arrowDiv.style.borderTop = '10px solid white'; // 箭头样式
          arrowDiv.style.left = `${screenPos.x - 5}px`;
          arrowDiv.style.top = `${screenPos.y + div.offsetHeight / 2}px`; // 箭头放在 div 的底部
          document.body.appendChild(arrowDiv);
      });


      viewer.scene.preRender.addEventListener(function () {
          locations.forEach(location => {
              const div = document.getElementById(`popup-${location.lng}-${location.lat}`);
              const arrowDiv = document.getElementById(`arrow-${location.lng}-${location.lat}`);

              // 检查 div 是否存在
              if (div && arrowDiv) {
                  // 计算屏幕坐标
                  const screenPos = convertToScreenCoordinates(location.lng, location.lat);
                  
                  // 更新 div 和箭头的位置
                  div.style.left = `${screenPos.x - div.offsetWidth / 2}px`;
                  div.style.top = `${screenPos.y - div.offsetHeight / 2}px`;
                  arrowDiv.style.left = `${screenPos.x - 5}px`;
                  arrowDiv.style.top = `${screenPos.y + div.offsetHeight / 2}px`;
              }
          });
      });
}

然而，突然发现有个无法跨越的bug，人家的图片广告牌随便挪动视角，位置都是在三维空间中相对不动的。
但我这个会根据经纬度计算屏幕坐标，一直存在于屏幕中，就很拉胯。

放弃，改用画布放置图片，然后一步步完善。

Step 1:

难点：广告牌不能同时加载两张图片让其重叠显示，也没有属性能直接加边框的，直接放入图片就只是一张图片。

思路：创建一张画布，将图片加入进去，加入白色边框，再生成一张新图片，这样一张带有白色边框图片就出来了。

在这里插入图片描述

部分代码：

drawpictures(item) {
        function createBillboardImageWithWhiteBorderAndArrow(imageUrl, borderSize) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            const imageWidth = 45;  // 图片宽度
            const imageHeight = 45; // 图片高度
            const borderPadding = 5;  // 边框内边距，留出空间
            const arrowHeight = 10;   // 小三角形的高度

            // 设置 canvas 尺寸，确保边框和三角形有足够的空间
            const canvasSize = imageWidth + borderPadding * 2; // 总大小 = 图片大小 + 边框内边距
            canvas.width = canvasSize;
            canvas.height = canvasSize + arrowHeight; // 增加三角形的高度

            // 先绘制白色边框
            ctx.lineWidth = borderSize; // 设置边框宽度
            ctx.strokeStyle = 'white';  // 设置边框颜色
            ctx.strokeRect(borderSize / 2, borderSize / 2, canvasSize - borderSize, canvasSize - borderSize); // 绘制矩形边框

            // 创建 Image 对象并加载图片
            const img = new Image();
            img.crossOrigin = 'anonymous';  // 开启跨域

            // 设置图片链接
            img.src = imageUrl;

            return new Promise((resolve, reject) => {
                img.onerror = function () {
                    reject('图片加载失败');
                };

                img.onload = function () {
                    const offsetX = (canvasSize - imageWidth) / 2;
                    const offsetY = (canvasSize - imageHeight) / 2;

                    // 绘制图片到 canvas 中，确保图片在边框内居中
                    ctx.drawImage(img, offsetX, offsetY, imageWidth, imageHeight);

                    // 绘制小白色三角形指向底部
                    ctx.beginPath();
                    ctx.moveTo(canvasSize / 2, canvasSize + arrowHeight); // 三角形顶点位置 (底部中央)
                    ctx.lineTo(canvasSize / 2 - 10, canvasSize); // 左下角
                    ctx.lineTo(canvasSize / 2 + 10, canvasSize); // 右下角
                    ctx.closePath();
                    ctx.fillStyle = 'white';  // 设置三角形填充颜色
                    ctx.fill();

                    resolve(canvas); // 图片加载完成后，返回已绘制的 canvas
                };
            });
        }

        // 创建带白色边框和小三角形的 Billboard 图片并添加到视图
        createBillboardImageWithWhiteBorderAndArrow(item.fileUrl, 5)
            .then((canvas) => {
                // 图片加载并绘制完成后，创建 Billboard
                this.viewer.entities.add({
                    name: 'guiji-picture',
                    position: Cesium.Cartesian3.fromDegrees(item.lng, item.lat, item.alt),
                    billboard: {
                        image: canvas, // 使用绘制完成的 canvas 作为图像
                        color: Cesium.Color.WHITE.withAlpha(0.8),
                        height: 45,
                        width: 45,
                        sizeInMeters: false,
                        verticalOrigin: Cesium.VerticalOrigin.CENTER,
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                        pixelOffset: new Cesium.Cartesian2(-22.3, 1),
                        scale: 1.0,
                        show: true,
                    }
                });
            })
            .catch((error) => {
                console.error('图片加载失败:', error);
            });
    },

效果挺好，虽然美观上比不上人家，但我这么快就搞定了你还要什么飞机？

Step 2:

既然是预览图，直接用原图未免浪费性能，给它整上缩略图

// 创建缩略图
function createThumbnail(imageUrl, width, height) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = 'anonymous';  // 开启跨域
        img.src = imageUrl;

        img.onload = () => {
            // 创建canvas元素
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas的尺寸为目标缩略图的尺寸
            canvas.width = width;
            canvas.height = height;

            // 在canvas上绘制图像，自动调整为目标尺寸
            ctx.drawImage(img, 0, 0, width, height);
            
            // 获取缩略图
            canvas.toBlob((blob) => {
                resolve(URL.createObjectURL(blob)); // 返回缩略图的Blob URL
            }, 'image/jpeg', 0.6);  // 设置图片质量（0.6为60%质量）
        };

        img.onerror = () => reject('图片加载失败');
    });
}

Step 3:

一张图片搞定了，我想要更多图片怎么办？

思路：使用 Promise.all 批量处理，等待上一张图片变成带边框的缩略图然后通过广告牌绘制步骤全部完整，再开始处理下一张。

在这里插入图片描述

部分代码：

// 批量绘制广告牌
    drawMultiplePictures(items) {
        // 前置方法
        // ...
        
        // 使用 Promise.all 批量处理
        const promises = items.map(item => {
            // 创建缩略图并获取其 URL
            return createThumbnail(item.fileUrl, 45, 45) // 缩略图大小为 45x45
                .then((thumbnailUrl) => {
                    // 创建带白色边框和小三角形的 Billboard 图片并添加到视图
                    return createBillboardImageWithWhiteBorderAndArrow(thumbnailUrl, 5, 45, 45); // 使用缩略图 URL
                })
                .then((canvas) => {
                    // 图片加载并绘制完成后，创建 Billboard
                    this.viewer.entities.add({
                        name: 'guiji-picture',
                        position: Cesium.Cartesian3.fromDegrees(item.lng, item.lat, item.alt),
                        billboard: {
                            image: canvas, // 使用绘制完成的 canvas 作为图像
                            color: Cesium.Color.WHITE.withAlpha(0.8),
                            height: 45,
                            width: 45,
                            sizeInMeters: false,
                            verticalOrigin: Cesium.VerticalOrigin.CENTER,
                            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                            pixelOffset: new Cesium.Cartesian2(-22.3, 1),
                            scale: 1.0,
                            show: true,
                        }
                    });
                })
                .catch((error) => {
                    console.error('图片加载失败:', error);
                });
        });

        // 等待所有 Promise 完成
        Promise.all(promises).then(() => {
            console.log('所有广告牌已成功创建');
        }).catch((error) => {
            console.error('批量处理时出错:', error);
        });
    },

Step 4:

加入点击方法
在这里插入图片描述
部分代码：

// 批量绘制广告牌
    drawMultiplePictures(items) {
        // ...
        
        // 等待所有 Promise 完成
        Promise.all(promises).then(() => {
            console.log('所有广告牌已成功创建');
        }).catch((error) => {
            console.error('批量处理时出错:', error);
        });

        if (this.clickPicturesBillboard) {
            this.clickPicturesBillboard.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }

        // 创建新的事件监听器
        this.clickPicturesBillboard = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
        this.clickPicturesBillboard.setInputAction((click) => {
            const pickedObject = this.viewer.scene.pick(click.position);
            if (Cesium.defined(pickedObject)) {
                const entity = pickedObject.id;
                if (entity && entity.properties) {
                    handleImageClick(entity.properties); 
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // 处理点击事件的回调方法
        function handleImageClick(properties) {
            console.log('点击广告牌的信息:', properties);
            alert(`点击了广告牌：\n图片URL: ${properties.fileUrl}\n经度: ${properties.lng}\n纬度: ${properties.lat}\n高度: ${properties.alt}`);
        }
    },

Step 5:

优化项：白色边框不参与缩略图处理；视角移动广告牌闪烁问题；鼠标悬浮在广告牌上缩略图变清晰；

完善后如下：
在这里插入图片描述
在这里插入图片描述

Step 5.1:

使用者习惯于同一个位置拍摄多张不同类型图片，需要我优化一下逻辑，不让广告牌重叠难以选中。

思路：设置同一位置广告牌加载时偏移高度；不同类型图片设置对应显隐控件；
在这里插入图片描述

解决完需求后，我又去看了一下人家的效果是否完美，发现同样存在一些疏漏。

  1. 高度线贴近模型（未穿模）就会连在模型上；
  2. 同一位置拍摄多张图片有微小偏移处理，但通过鼠标移动显然无法选中想要的那张。

由此，我这短期粗制滥造的功能也算够用了
在这里插入图片描述
在这里插入图片描述

Cesium功能集合——广告牌（DEJA_VU3D）
AbjCommon_Lisp的博客
09-17 1538
其中，DEJA_VU3D是Cesium中的一个功能集，它提供了广告牌（Billboard）功能，使开发人员能够在地图中添加各种标记、图标和文本。其中，DEJA_VU3D是Cesium中的一个功能集，它提供了广告牌（Billboard）功能，使开发人员能够在地图中添加各种标记、图标和文本。在上述代码中，通过创建一个Cesium Viewer实例，我们可以在HTML页面中嵌入一个Cesium地图。方法创建了一个广告牌实例，并设置了广告牌的各种属性，如图像Cesium功能集合——广告牌（DEJA_VU3D）
Cesium 实战 15 - 气泡框跟随飞行
非科班Java出身GISer的博客
06-13 2339
本文介绍了在实际应用中，展示移动中模型的信息，实现气泡框跟随飞行。
Cesium实现自定义的广告牌效果
专注GIS开发
01-25 1万+
Cesium使用自定义的广告牌效果进行POI的立体标绘
Cesium实现自定义立体广告牌效果
dengkexin123456的博客
12-21 1063
cesium结合vue在三维模型中实现自定义广告牌视觉立体显示
Cesium功能实现（一）创建billboard广告牌
bingbingbling的博客
06-16 1万+
Cesium功能实现（一）创建billboard广告牌Cesium可实现功能之billboard广告牌Cesium官方API成员变量及中文释义案例js和css代码实现给billboard添加label广告牌被底图遮盖无法显示完全设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Cesium可实现功能之billboard广告牌 最近在学习cesium，试着实现了
cesium学习之路（十一）在地图中绘制广告牌
m0_63701303的博客
11-17 971
在地图中绘制广告牌
Cesium(六) 三维地图点位标记、自定义气泡弹窗实现
棋鬼王的博客
02-25 331
本文介绍了一种基于Vue3+Cesium+天地图WMTS的三维GIS弹窗实现方案。该方案通过自定义弹窗解决了原生InfoWindow样式丑陋、定制困难的问题，实现了点位标记、点击拾取、弹窗跟随和高颜值UI等功能。核心包括：Cesium实体添加与拾取、三维坐标转屏幕坐标、postRender事件实现弹窗跟随等技术要点。文章提供了完整代码实现，涵盖天地图加载、点位标记、弹窗交互和毛玻璃UI样式等，并强调了GIS开发中的关键细节如坐标转换、内存管理等。该方案可直接用于智慧城市、数字孪生等三维GIS项目，支持后续扩
Cesium 入坑记
weixin_46214844的博客
03-28 954
对 Cesium简单做了介绍，对倾斜摄影，视频投影，漫游巡航做了应用场景介绍
cesium 经纬度绘制点_Cesium常用地图操作(二)
weixin_31861055的博客
12-31 1029
1. 地图添加广告牌广告牌示例.jpgviewer.entities.add({id: 'billboard', // feature的idname: '广告牌', // feature 的名字position: Cesium.Cartesian3.fromDegrees(120, 30, 100), // 广告牌在地图上的位置,@params(经度{Number},维度{Number},高度{N...
Cesium实战专栏14.自定义html标注图层
xt3d的博客
11-04 3640
Cesium实战专栏14.自定义html标注图层前言实现效果实现思路关键代码 前言 在Cesium中可以通过entity的Lebel属性来实现文本标注的功能，但是原始的标注功能样式往往达不到我们想要的效果，比如我们需要像html元素那样可以通过css来自由的设置样式。我们可以通过自定义html标注的方式来实现可以自由定义样式的标注功能。 实现效果 实现思路 自定义html标注图层功能与自定义气泡弹框功能思路相似，通过笛卡尔坐标转为屏幕坐标，实时更新DOM元素的坐标使其保持正确的位置即可。 关键代码 /
[cesium] | 自定义个性化气泡框
啊嘞嘞的博客
10-14 1892
效果 支持自定义css样式创建 `<div> <div style="width: 200px; height: 150px; border: 1px solid #fff; border-radius: 5px; background: #1a90c587; color:.
告别单调Label！Cesium+Canvas实现高颜值动态标签教程
最新发布
weixin_29274337的博客
03-05 63
本文详细介绍了如何利用Canvas为Cesium.js创建高颜值动态标签，突破原生Label的样式限制。通过Canvas绘制自定义标签（如圆角背景、多行文本、状态图标），并结合Billboard将其集成到三维场景中，实现数据驱动的动态更新与交互，大幅提升三维地理信息可视化效果。
基于cesium的智慧地铁三维可视化管控平台；GIS开发特训营实战项目拆解
GIS前端嘉欣的博客
06-05 568
功能说明：选择左侧的查询方式，选中周边查询，点击站点，展示雷达图进行扫描，延迟2s后，展示周边的重点建筑，使用cesium广告牌将重点建筑标出来，并弹出界面，展示周边建筑信息（开发中），功能参考高德的周边查询。点击菜单，弹出选项框，选项框中包含所有地铁线路的选项，选中地铁线路，可以在地图中展示地铁线路的轨道线网布局。站控措施：点击左侧的站控措施，可以展示每个站点的站控措施信息，同时，点击查询的站点详细信息中，也会新增。点击站点管理功能，视角跳转全局，并展示全部的地铁线路，下方面板也发生变化。
MapGIS Client for JavaScript要素拾取高亮、弹窗
qq_33224313的博客
10-21 506
view.hitTest目前支持common层的IGSFeatureLayer、GeoJSONLayer、IGSSceneLayer以及M3DModelCacheLayer、Cesium3DtilesCacheLayer接口添加的图层。通过Cessium原生接口方式添加的不能使用view.hitTest方法拾取，可尝试使用cesium中的pick方法。view.popup不支持修改样式，不支持同时添加多个弹窗。如果需要自定义样式或有更复杂的需求，可以获取要素的位置后，通过气泡弹窗或广告牌等接口添加弹窗。
Cesium中级开发教程之十七：自定义广告牌
Cesium开发工程师
12-01 478
通过Cesium的billboard广告牌的图元方式来绘制，首先需要创建canvas，设置宽高，颜色，填充，文字内容，文字位置等，也可以用矩形或者圆形的方式添加。教程示例网站：https://thomaz529.github.io。
优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
热门推荐
weixin_42508580的博客
09-19 1万+
项目之前的设计，billboard 广告牌是绑在 entityCollection 集合下的，为了能够在获取单个实体（entity）时能够获取更多数据信息（entity 能够注入除了它本身的属性之外的属性信息）entityCollection 集合加上集群聚合功能，数据量临界点在 3w~4w 左右，就会出现界面卡顿。fps 低于 20 并且波动很大，延迟保持在 100ms 左右。数据量低于临界点时，entity 的方式呈现页面还是比较奈斯的。
cesium-广告牌billboard
挣钱花388的博客
11-04 1155
广告牌简单理解就是图片。跟html不一样的是，广告牌有随球转动的效果。
Cesium-广告牌
地理信息的专栏
02-29 1402
使用自定义Primitive对象构建，自定义Primitive主要方法为update,其余的内容就是如何构建一个渲染队列进行数据的渲染。本案例中由两个渲染对象构成一个渲染队列，一个是柱体，另外一个是长方体
Cesium 点击广告牌（Billboard）显示自定义文字信息展示弹框（vue项目记录）
weixin_42508580的博客
11-24 1万+
Vue中Cesium 点击广告牌（Billboard）展示广告牌信息内容功能 原理 实现原理与显示经纬度信息一致，在cesium挂载的dom嵌套children，通过控制子元素的display，控制显隐，主要点在于使用scene.postRender事件监听渲染改变，改变子元素的left和top来实现球面转动后子元素的位置跟随移动的功能 译：获取场景呈现后将立即引发的事件。事件的订阅者接收场景实例作为第一个参数，当前时间作为第二个参数。 1、嵌套子元素、样式（绑定点击事件 ，点击子元素时隐藏弹框） &lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值