Cesium笔记 canvas定制billboard

Cesium 中label时,想要设置text的背景图片时,label没有backgroundimage属性。

如果使用label+billboard 的方式设置,会存在文本长短不一时,图片不能自适应等问题。

const showLabelFun = (dataMcInfo, backgroundcolor) => {var c = document.createElement('canvas')var settings = {canvas: c,canvasWidth: getTextWidth(dataMcInfo, "12px 'Microsoft Yahei'") + 20, //canvas的宽度canvasHeight: 36, //canvas的高度drawStartX: 10, //绘制字符串起始x坐标 距离左侧drawStartY: 22, //绘制字符串起始y坐标 距离顶部font: "12px 'Microsoft Yahei'", //文字样式text: dataMcInfo, //需要绘制的文本color: '#ffffff', //"#000000", //文字的颜色backgroundColor: backgroundcolor, //"#ffffff"//背景颜色innerGlowColor: '#00ff96'}function getTextWidth(text, font) {var canvas = document.createElement('canvas')var context = canvas.getContext('2d')context.font = fontvar metrics = context.measureText(text)return metrics.width}//绘制带有圆角的背景CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, fill, stroke) {if (typeof stroke == 'undefined') {stroke = false}if (typeof radius === 'undefined') {radius = 5}this.beginPath()this.moveTo(x + radius, y)this.lineTo(x + width - radius, y)this.quadraticCurveTo(x + width, y, x + width, y + radius)this.lineTo(x + width, y + height - radius)this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)this.lineTo(x + radius, y + height)this.quadraticCurveTo(x, y + height, x, y + height - radius)this.lineTo(x, y + radius)this.quadraticCurveTo(x, y, x + radius, y)this.fillStyle = settings.backgroundColorthis.closePath()if (stroke) {this.stroke()}if (fill) {this.fill()}}//获取2d的上线文开始设置相关属性var canvas = settings.canvascanvas.width = settings.canvasWidthcanvas.height = settings.canvasHeightvar ctx = canvas.getContext('2d')//绘制带有圆角的背景ctx.roundRect(0, 0, canvas.width, canvas.height, 15, true)//填充文字ctx.font = settings.fontctx.fillStyle = settings.colorctx.fillText(settings.text, settings.drawStartX, settings.drawStartY)//ctx.fillText('速度:30 km/h', settings.drawStartX, settings.drawStartY + 20)return canvas.toDataURL()//下载图片测试查看//var src = canvas.toDataURL();// var a = document.createElement('a');// var event = new MouseEvent('click');// a.download = (new Date()).getTime() + ".jpg"; // 指定下载图片的名称// a.href = src;// a.dispatchEvent(event); // 触发超链接的点击事件
}

使用

 viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(lng, lat, alt), //坐标billboard: {image: showLabelFun(projectName, color),pixelOffset: new Cesium.Cartesian2(0, -50),disableDepthTestDistance: Number.POSITIVE_INFINITY //被建筑物遮挡问题}})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/880543.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MacOS Catalina 从源码构建Qt6.2开发库之02: 配置QtCreator

安装Qt-creator-5.0.2 在option命令中配置Qt Versions指向 /usr/local/bin/qmake6 Kits选入CLang

SSM+Vue社区物业管理系统

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 spring-mybatis.xml3.5 spring-mvc.xml3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作…

leetcode721. 账户合并

给定一个列表 accounts,每个元素 accounts[i] 是一个字符串列表,其中第一个元素 accounts[i][0] 是 名称 (name),其余元素是 emails 表示该账户的邮箱地址。 现在,我们想合并这些账户。如果两个账户都有一些共同的邮箱地址&#x…

【cache】浅析四种常用的缓存淘汰算法 FIFO/LRU/LFU/W-TinyLFU

本文浅析淘汰策略与工作中结合使用、选取,并非针对算法本身如何实现的 文章目录 FIFOLFULRUW-TinyLFU实践与优化监控与调整 FIFO first input first output , 先进先出,即最早存入的元素最先取出, 典型数据结构代表:…

Elasticsearch使用Easy-Es + RestHighLevelClient实现深度分页跳页

注意!!!博主只在测试环境试了一下,没有发到生产环境跑。因为代码还没写完客户说不用弄了( •̩̩̩̩_•̩̩̩̩ ) 也好,少个功能少点BUG 使用from size的时候发现存在max_result_window10000的限制&…

TypeScript介绍和安装

TypeScript介绍 TypeScript是由微软开发的一种编程语言,它在JavaScript的基础上增加了静态类型检查。静态类型允许开发者在编写代码时指定变量和函数的类型,这样可以在编译时捕获潜在的错误,而不是等到运行时才发现问题。比如,你…

用systemd 来控制 qt 程序的启动, 停止 . 解决 qt.qpa.xcb: could not connect to display 问题

author: hjjdebug date: 2024年 09月 28日 星期六 15:49:51 CST description: 用systemd 来控制 qt 程序的启动&#xff0c;停止 解决 qt.qpa.xcb: could not connect to display 问题 1. 先写一个QT 的测试程序 basic, 让他不断打印数字. $ cat main.cpp #include <QAp…

生成式人工智能在软件开发中的角色

随着生成式人工智能&#xff08;AIGC&#xff0c;Artificial Intelligence Generated Content&#xff09;技术的飞速进步&#xff0c;软件开发领域的工作方式也在发生着革命性的变化。从代码生成、错误检测到自动化测试&#xff0c;AI工具正在成为开发者的得力助手。然而&…

基于STM32的无人驾驶车辆系统

目录 引言项目背景环境准备 硬件准备软件安装与配置系统设计 系统架构关键技术代码示例 传感器数据采集与处理路径规划与避障控制实时反馈与控制系统应用场景结论 1. 引言 随着无人驾驶技术的发展&#xff0c;嵌入式系统在无人驾驶车辆中的应用变得越来越重要。STM32作为高效…

Java SPI 原理、样例

在 Java 中&#xff0c;SPI&#xff08;Service Provider Interface&#xff09;全称为服务提供者接口&#xff0c;它是一种用于实现框架扩展和插件化的机制。 一、SPI 作用 允许在运行时动态地为接口查找服务实现&#xff0c;而不需要在代码中显式地指定具体的实现类。 这使得…

代码随想录算法训练营Day13

110.平衡二叉树 力扣题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 后序迭代 class Solution {public boolean isBalanced(TreeNode root) {return getHeight(root)!-1;}public int getHeight(TreeNode root){if(rootnull){return 0;}int leftheightgetHei…

【python】函数的定义

目录 函数介绍函数的定义函数的参数函数的返回值函数说明文档函数的嵌套调用变量的作用域综合案例 学习目标&#xff1a; 掌握函数的基础定义语法 函数的定义 函数的定义&#xff1a; def 函数名(传入参数):函数体return 返回值函数的调用&#xff1a; 函数名(参数)演示…

WordPress精选文章如何添加侧边栏和页面?

WordPress精选帖子是一项功能&#xff0c;可让用户在其网站主页或其他值得注意的部分突出显示特定帖子。这些精选帖子通常以视觉上独特的方式显示&#xff0c;例如以滑块、网格或轮播格式显示&#xff0c;以提高其可见性和对访问者的吸引力。 网站所有者可以手动选择他们想要推…

云计算Openstack

OpenStack是一个开源的云计算管理平台项目&#xff0c;由美国国家航空航天局&#xff08;NASA&#xff09;和Rackspace公司合作研发并发起&#xff0c;以Apache许可证授权。该项目旨在为公共及私有云的建设与管理提供软件支持&#xff0c;通过一系列相互协作的组件实现云计算服…

MMD模型及动作一键完美导入UE5-衣服布料模拟(四)

1、给角色刷布料 1、打开角色,通过Window->Clothing打开模型布料窗口 2、选中裙子右键,创建布料数据 3、选择裙子,右键->应用布料数据 4、激活布料画笔,就可以开始绘制布料了 5、调整画笔大小和布料值进行绘制,布料值为0表示刚体

高校教师成果管理小程序的设计与实现springboot(lw+演示+源码+运行)

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…

5分钟精通Excel在go中的使用

一些简单操作可以在官方文档中找到&#xff0c;应该足够无经验的朋友们入门 介绍 - 《Excelize v2.2 中文文档》 - 书栈网 BookStack 这里贴一个中文版的链接&#xff08;以excelize库为例&#xff0c;相对其他库来说&#xff0c;体验很不错&#xff09;&#xff0c;不过要注…

c++反汇编逆向还原——for循环(笔记)

c反汇编逆向还原代码for循环的实现&#xff0c;for循环和while循环在逆向还原的区别 一、汇编 mov &#xff1a;将源操作数复制到目的操作数 lea &#xff1a;与mov类似 mov a&#xff0c;b 表示将b赋值给a 若是 mov a&#xff0c;[b] 这是将b的地址赋值给a&#xff0c;相…

第一弹:llama.cpp编译

1.编译llama.cpp命令行&#xff08;电脑版本&#xff09;&#xff1b; 2.交叉编译安卓命令行版本。 一、Llama.cpp是什么&#xff1f; 二、Llama.cpp编译 首先我们尝试编译llama.cpp. 2.1 下载llama.cpp 项目的github地址&#xff1a; https://github.com/ggerganov/llama…

k8s pv(PersistentVolume) 状态含义

一、PV 状态含义 在Kubernetes中&#xff0c;PersistentVolume&#xff08;PV&#xff09;有几种不同的状态&#xff0c;这些状态反映了PV的生命周期和可用性。以下是主要的PV状态及其含义&#xff1a; Available: 表示该PV尚未被任何PersistentVolumeClaim (PVC)绑定&#xf…