您的位置:首页 > 娱乐 > 八卦 > 项目网上公示是什么意思_公众号制作技巧_关键词挖掘ppt_郑州网站公司哪家好

项目网上公示是什么意思_公众号制作技巧_关键词挖掘ppt_郑州网站公司哪家好

2024/12/23 4:57:58 来源:https://blog.csdn.net/qq_40216244/article/details/142597315  浏览:    关键词:项目网上公示是什么意思_公众号制作技巧_关键词挖掘ppt_郑州网站公司哪家好
项目网上公示是什么意思_公众号制作技巧_关键词挖掘ppt_郑州网站公司哪家好

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 //被建筑物遮挡问题}})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com