首页 > 其他分享 >Cesium加载带有背景图(包含多个背景图,图标和文字并排)的billboard

Cesium加载带有背景图(包含多个背景图,图标和文字并排)的billboard

时间:2024-07-29 12:07:56浏览次数:15  
标签:canvas img Cesium context billboard bgImg 背景图

思路:如果是简单的背景加文字,背景图会把文字挡住,又或者是背景图要有图标加文字,这时需要用canvas将背景图,图标和文字合并成一张图片,加载billboard的时候直接加载合成之后的图片即可。

let canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 30;
let context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
let bgImg = new Image();
bgImg.src = require("../img/bg.png"); // 背景图的url
bgImg.crossOrigin = "Anonymous";
bgImg.onload = () => {
    context.fillStyle = '#ffffff'; // 设置文字的填充颜色
    context.font = 'italic 15px Georgia'; // 设置文字的填充样式
    context.fillText("文本内容", 10, 20);
    context.drawImage(bgImg, 0, 0, 100, 30);
    let img = new Image();
    img.src = require("../img/icon.png");; // 需要合进去的图片url
    img.crossOrigin = "Anonymous";
    img.onload = () => {
        context.drawImage(img, 0, 0, 16, 16);
        let base64 = canvas.toDataURL("image/png");
        this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), 0),
            billboard: {
                  image: base64,
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
                  pixelOffset: new Cesium.Cartesian3(0, 0),   //偏移量
            }
        });
    };    
}

 

标签:canvas,img,Cesium,context,billboard,bgImg,背景图
From: https://www.cnblogs.com/webgis-ling/p/18329808

相关文章

  • Cesium实战功能教程之3dtiles操作(移动+旋转)
    在平常的工作中,难免会用到倾斜摄影,当加载倾斜摄影的时候,最头疼的就是倾斜摄影的偏移问题,在代码中进行修改加载倾斜摄影的偏移参数,虽然简单但过于麻烦,也耽误开发的效率,因此我就本着能不能在三维场景中对倾斜摄影进行手动操作,无需再改代码并可将倾斜摄影放在较为正确的位置。......
  • 五分钟学会 调整 Gradio 运行界面 WEB UI 的背景图 和 添加 Html 标签
    场景我在调整gradio运行界面的组件的CSS样式时,我又再想,能不能给这个运行界面添个背景图或者其他HTML元素上去呢?如果可以那就真的太棒了吧~问题如何给gradio运行界面添加其他HTML元素和背景图?解决✨通过Markdown()方法:添加HTML标签通过g......
  • 易优CMS模板标签uibackground背景图片在模板文件index.htm中调用uibackground标签,实现
    【基础用法】标签:uibackground描述:背景图片上传标签,使用时结合html一起才能完成可视化布局,只针对具有可视化功能的模板。用法:<divclass="eyou-edit"e-id="文件模板里唯一的数字ID"e-page='文件模板名'e-type="background"style="background-image:url({eyou:uibackgrounde......
  • Cesium雷达扫描线效果
    更多精彩内容尽在dt.sim3d.cn,关注公众号【sky的数孪技术】,技术交流、源码下载请添加VX:digital_twin123源码如下:varviewer=newCesium.Viewer("cesiumContainer");varscene=viewer.scene;varmatGLSL="#defineLlength(c-.1*......
  • Cesium 实战 - 自定义纹理材质系列之 - 半球雷达效果(预警)
    Cesium实战-自定义纹理材质系列之-半球雷达效果(预警)核心代码完整代码在线示例Cesium给实体对象(Entity)提供了很多实用的样式,基本满足普通项目需求;但是作为WebGL引擎,肯定不够丰富,尤其是动态效果样式。对于实体对象(Entity),可以通过自定义材质,实现各种动......
  • 实现Cesium中的第一视角漫游功能:路径设置、飞行、暂停、继续、退出与删除
    实现Cesium中的第一视角漫游功能:路径设置、飞行、暂停、继续、退出与删除在现代地理信息系统(GIS)应用中,三维地球浏览器如Cesium.js已经成为不可或缺的工具。今天,我们将深入探讨如何在Cesium中实现第一视角漫游功能,包括路径设置、飞行、暂停、继续、退出和删除路径。本文将通过详细......
  • 【Qt Designer用Frame设置背景图片】不影响其它组件小技巧,控件层级设置,组件的继承
    QtDesigner用Frame设置背景图片、颜色不影响其它组件小技巧,控件层级设置,组件的继承在设置背景时,遇到一个问题,例如用frame当最后一层设置背景,加载资源图片后,会使frame内部组件继承相同格式,很麻烦。原语句用法border-image:url(:/images/login.png);内部组件会出现父......
  • CesiumJS【Basic】- #088 去掉对entity的默认行为
    文章目录去掉对entity的默认行为1目标2代码去掉对entity的默认行为1目标去掉一下3种对entity的默认行为出现信息提示框出现绿色定位框双击锁定entity2代码import*asCesiumfrom'cesium';varviewer=newCesium.Viewer......
  • 什么是山海鲸Cesium?一文带你了解!
    Cesium与山海鲸CesiumCesium是一个能够让我们以全新的视角探索地球、分析数据的强大平台,无论是山川湖海、城市建筑,还是气候变化、自然灾害,Cesium都能以三维模型的形式生动呈现在我们的面前。山海鲸Cesium——山海鲸可视化软件与CesiumJS的结合体,适用于各种需要三维GIS渲染和数字......
  • Cesium 点选Entity泛光
    Cesium选中Entity泛光原理:1.鼠标选中实体获取pickId2.生成选中的ID纹理3.后处理:①模糊处理:通过多次模糊操作来扩散选中实体的边缘②颜色叠加:将模糊后的结果与原始场景进行颜色叠加效果......