旅游网站网页设计报告,金坛做网站的,长沙企业网站建设报价,seo关键词排名怎么优化Cesium 中label时#xff0c;想要设置text的背景图片时#xff0c;label没有backgroundimage属性。
如果使用labelbillboard 的方式设置#xff0c;会存在文本长短不一时#xff0c;图片不能自适应等问题。
const showLabelFun (dataMcInfo, backgroundcolor) {var…Cesium 中label时想要设置text的背景图片时label没有backgroundimage属性。
如果使用labelbillboard 的方式设置会存在文本长短不一时图片不能自适应等问题。
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 //被建筑物遮挡问题}})
