前言
熟悉cesium 的知道,框架提供的label配置就那么多,在真实的项目中这些样式并不能满足ui需求。那么我们就需要自定义或者画布绘制billboard来实现,本文介绍的是画布绘制方法。
label: {
text: '显示的标注文字',
font: '16px "微软雅黑", Arial, Helvetica, sans-serif, Helvetica',
fillColor: Cesium.Color.WHITE,//文字的填充颜色
outlineColor: Cesium.Color.BLACK,//文字的描边
style: Cesium.LabelStyle.FILL_AND_OUTLINE,//设置描边的风格,上面的参数才会起效果
outlineWidth: 4.0,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
showBackground: true,//显示背景颜色
backgroundColor:Cesium.Color.fromCssColorString('#24a4fe').withAlpha(0.6),
scaleByDistance: new Cesium.NearFarScalar(1.0e2, 1, 1.0e3, 0.2),//随着距离改变标注尺寸
pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.0e2, 1.0, 1.0e3, 0.2), //随着距离改变偏移量
},
一、canvasLabel是什么?
封装canvasLabel类,接受三个参数,viewer,position,option(text本文,color文本颜色),原理是,通过canvas画布提供的内置方法toDataUrl,canvas.toDataURL(“image/png”);转成图片,供billboard使用。canvas具体用法请查阅相关文档
export default class CanvasLabel {
constructor(viewer, position,option) {
this.viewer = viewer
this.position = position
this.image = require('./xxx.png')
this.height = 50
this.width = 120
this.text = option.text
this.color = option.color
this.loadBillboard()
}
canvasImage(fun) {
let canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
let context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
let bgImg = new Image();
bgImg.src = this.image; // 背景图的url
bgImg.crossOrigin = "Anonymous";
bgImg.onload = () => {
context.drawImage(bgImg, 0, 0,this.width,this.height);
context.lineWidth = 1; //线宽
context.strokeStyle = 'black'; //描边颜色
context.font = '20px 宋体'
context.fillStyle = this.color //文本填充颜色
context.textAlign = "center"; //文本居中
context.textBaseline = "middle";
const xPos = canvas.width / 2; // 计算文本左边距
const yPos = canvas.height / 2; // 计算文本基线位置
context.fillText(this.text, xPos, yPos); //文字填充
let base64 = canvas.toDataURL("image/png");
if (fun) fun(base64);
};
}
loadBillboard() {
this.canvasImage((newImg) => {
this.a = this.viewer.entities.add({
position: this.position, //此处为广告牌的笛卡尔坐标
billboard: {
image: newImg, // 此处为广告牌图标
scaleByDistance: new Cesium.NearFarScalar(1200, 1, 5200, 0.4), //设置随图缩放距离和比例
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000), //设置可见距离 10000米可见
pixelOffset: new Cesium.Cartesian2(0,5),
disableDepthTestDistance: 5000,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 不进行遮挡检测
show: true,
}
});
})
}
remove() {
this.viewer.entities.remove(this.a);
}
}
billboard配置顺便贴一下
billboard: {
id:id //获取或设置拾取广告牌时返回的用户定义对象
image: ‘xxxx, // 此处为广告牌图标
scale:1 //获取或设置与广告牌图像大小相乘的统一比例(以像素为单位)。 1.0 的比例不会改变广告牌的大小;大于 1.0 的比例会放大广告牌;小于 1.0 的正比例会缩小广告牌。
scaleByDistance: new Cesium.NearFarScalar(1200, 1, 5200, 0.4), //设置随图缩放距离和比例
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000), //设置可见距离 10000米可见
pixelOffset: new Cesium.Cartesian2(0,5), //获取或设置屏幕空间中相对于该广告牌原点的像素偏移量。这通常用于在同一位置对齐多个广告牌和标签,例如图像和文本。屏幕空间原点是画布的左上角; x 从左到右增加, y 从上到下增加。
disableDepthTestDistance: 5000, //获取或设置与相机的距离,在该距离处禁用深度测试,例如,防止对地形进行裁剪。当设置为零时,始终应用深度测试。当设置为 Number.POSITIVE_INFINITY 时,永远不会应用深度测试。
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //获取或设置此广告牌的水平原点,确定广告牌是在其锚点位置的左侧、中心还是右侧。
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
rotation:60 //获取或设置以弧度为单位的旋转角度。
show: true,
}
二、使用步骤
1.初始化
let position2 = {x: -1573676.5756299559, y: 5327855.33868422, z: 3123014.496239442}
let p2 = new CanvasLabel(viewer,position2,{
text:"温度:10℃",
color:'#34E073'
});
2.删除实体
p2,remove()
三.效果展示
总结
例如:自定义label也是项目中经常用到的功能,,主要涉及canvas的语法知识 ,有其他的想法的可以私信沟通,下文会介绍通过html 自定义label。这是更为常见的一种方式。