cesium实现动态创建广告牌
import { globalColorList, globalTextColorList } from "../js/positionTools.js";
/**
* 广告牌设备图标函数类
*/
export default class DeviceMarker {
constructor(arg) {}
/**
* 初始化广告牌
* @param {*} text 文字
* @param {*} iconType 图表类型
* @param {*} warningLevel 预警等级
* @param {*} config 样式属性配置 fontSize文字大小 lineHeight线高
* @param {*} posObj 经纬度高度对象
* @param {*} id 主机或传感器Id
* @param {*} targetData 整个节点的数据信息
* @param {*} deviceType 设备类型,主机或传感器
* @param {*} maxHeight 最大可见高度
*/
_initMarker(
text,
iconType,
warningLevel = 1,
config = { fontSize: 24, lineHeight: 150 },
posObj,
targetData,
deviceType,
maxHeight = 6500
) {
// 如果经纬度为空，则直接跳过
if (!posObj.lng || !posObj.lat) {
return;
}
let deviceImg = new Image();
// 背景图的url
deviceImg.src = `下面的第二张图片`;
deviceImg.crossOrigin = "Anonymous";
deviceImg.onload = () => {
// 获取设备图片属性
var deviceImagWidth = deviceImg.width;
var deviceImagHeight = deviceImg.height;
// 设置画布属性
var radius = 5;
var labelWidth = (config.fontSize + 2) * text.length;
var labelHeight = config.fontSize * 1.5;
let lineImg = new Image();
lineImg.src = "下面的第一张图片";
lineImg.crossOrigin = "Anonymous";
lineImg.onload = () => {
// 确定指标线的最低高度
if (!!!config.lineHeight) {
config.lineHeight = 20; // 最低高度默认为20px
} else if (config.lineHeight < 20) {
config.lineHeight = 20; // 最低高度默认为20px
}
// 获取指示线图片的属性
var lineImageWidth = lineImg.width;
var lineImageHeight = lineImg.height;
var lineHeight = Math.min(lineImageHeight, config.lineHeight);
// 重新计算画布大小
var canvasWidth = Math.max(deviceImagWidth, labelWidth);
canvasWidth = Math.max(canvasWidth, lineImageWidth);
var canvasHeight = deviceImagHeight + labelHeight + lineHeight;
// 创建画布
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// 绘制标签文字
var labelX = (canvasWidth - labelWidth) / 2;
// 设备文字-圆角矩形
var grad = ctx.createLinearGradient(0, 0, 0, labelHeight); // 创建一个渐变色线性对象
grad.addColorStop(0, globalColorList[warningLevel].start); // 定义渐变色颜色（开始）
grad.addColorStop(1, globalColorList[warningLevel].end); // 定义渐变色颜色（结束）
// 设置fillStyle为当前的渐变对象
ctx.fillStyle = grad;
// ctx.shadowColor = "#fff"; // 阴影颜色
// ctx.shadowBlur = shadowBlur; // 阴影的模糊范围
ctx.roundRect(labelX, 0, labelWidth, labelHeight, radius); // 设置圆角矩形
ctx.fill(); // 填充圆角矩形
// 设备文字-字体
ctx.font = "bold " + config.fontSize + "px lion";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillStyle = globalTextColorList[warningLevel];
ctx.shadowBlur = 0; //阴影的模糊范围
ctx.fillText(text, canvasWidth / 2, 10);
// 合成设备图标
var deviceImgX = (canvasWidth - deviceImagWidth) / 2;
var deviceImgY = labelHeight;
ctx.drawImage(deviceImg, deviceImgX, deviceImgY, deviceImagWidth, deviceImagHeight);
// 合成指示线
var lineImgHeight = Math.min(config.lineHeight, lineImageHeight);
var lineImgdX = Math.round((canvasWidth - lineImageWidth) / 2);
var lineImgdY = canvasHeight - lineImgHeight;
var lineImgsX = -1;
var lineImgsY = lineImageHeight - lineImgHeight;
var lineImgWidth = lineImageWidth;
ctx.drawImage(
lineImg,
lineImgsX,
lineImgsY,
lineImgWidth,
lineImgHeight,
lineImgdX,
lineImgdY,
lineImgWidth,
lineImgHeight
);
// 动画参数
let curScale = 1.0; // 当前缩放比例
let speed = 1.0; // 初始变化速率（从1倍开始）
let speedDelta = 0.005 * (warningLevel - 1); // 增量变化速率（速度越来越快）
var timestamp = new Date().valueOf(); // 记录动画开始时间戳
let base64 = canvas.toDataURL("image/png");
let position = Cesium.Cartesian3.fromDegrees(Number(posObj.lng), Number(posObj.lat), Number(posObj.height));
let entity = viewer.entities.add({
position: position,
targetData: targetData,
// 设备：host/device
deviceType: deviceType,
show: true,
billboard: {
image: base64,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 是否贴地
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 重直对齐
scaleByDistance: new Cesium.NearFarScalar(0, 1.0, 500, 0.3),
eyeOffset: new Cesium.Cartesian3(0, 0, 0),
scale:
warningLevel == 1
? 1.0
: new Cesium.CallbackProperty(function changeScale(time, result) {
let minScale = 1.0; // 最小缩放比例（默认1.0）
let maxScale = 1.05; // 最大缩放比例
let speedIntreval = 200; // 动画时间间隔（每隔100毫秒变换一次）
var curTimestamp = new Date().valueOf(); // 当次动画时间戳
if (curTimestamp - timestamp > speedIntreval) {
// 每隔100毫秒变换
speed += speedDelta; // 确定变化速率
curScale = speed ** 2; // 计算当前缩放比例（模拟重力加速度，speed相当(1/2)g(t^2)的时间t）
timestamp = curTimestamp; // 记录本次时间戳（用作计算动画时间间隔）
if (curScale >= maxScale) {
speedDelta *= -1; // 超过最大缩放比例，改为缩小
} else if (curScale <= minScale) {
speedDelta *= -1; // 低于最小缩放比例，改为放大
}
}
return curScale;
}, false),
// pixelOffset: new Cesium.Cartesian2(offsetX, offsetY), //设置偏移量
// pixelOffsetScaleByDistance: new Cesium.NearFarScalar(0, 1.0, 200, 0.3) //设置偏移量
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, maxHeight) // 设置最小和最大距离
}
});
globalEntity.push(entity);
};
};
}
// 创建主机和传感器广告牌函数
_createMarker(element, maxHeight, clampToGround) {
if (element.deviceHostList && element.deviceHostList.length > 0) {
element.deviceHostList.forEach(item => {
try {
let hostHeight = 0 == clampToGround ? item.height : 0;
// 主机的情况
this._initMarker(
item.deviceTypeDict,
item.deviceType,
item.warnLevel || 1,
{ fontSize: 24, lineHeight: item.lineHeight || 150 },
{ lng: item.lng, lat: item.lat, height: hostHeight },
item,
"host",
maxHeight - 100
);
item.deviceCollectorList.forEach(collectorItem => {
try {
// 传感器无经纬度高度信息，bimModelComponentList字段中取,bimModelComponentList有为空的情况
if (collectorItem.bimModelComponentList) {
let { lng, lat, height, lineHeight } = collectorItem.bimModelComponentList.find(
i => i.collectorId == collectorItem.id
);
// 如果clampToGround==0，则图标不贴地，否则将绘制贴地图标
height = 0 == clampToGround ? height : 0;
this._initMarker(
collectorItem.collectorTypeName,
collectorItem.deviceType,
collectorItem.warnLevel,
{ fontSize: 24, lineHeight: lineHeight || 150 },
{ lng: lng, lat: lat, height: height },
collectorItem,
"device",
maxHeight - 100
);
}
} catch (err) {
console.log(err);
}
});
} catch (err) {
console.log(err);
}
});
}
}
// 创建设备图标函数函数
createMarker(mointorPointInfo, clampToGround = 0) {
if (mointorPointInfo.children && mointorPointInfo.children.length > 0) {
mointorPointInfo.children.map(item => {
this._createMarker(item, mointorPointInfo.areaHeight, clampToGround);
});
}
}
// 删除设备图标函数函数
deleteMarker() {
// 清除全部实体
viewer.entities.removeAll();
}
}
// 预警颜色常量字段
export const globalColorList = {
5: { start: "#e21615", end: "#850000" },
4: { start: "#fe7600", end: "#a83300" },
3: { start: "#ffe045", end: "#eb8d00" },
2: { start: "#56a2eb", end: "#1756ae" },
1: { start: "#fdfffc", end: "#cbffe4" }
};
// 预警文字颜色常量字段
export const globalTextColorList = {
5: "#fff",
4: "#fff",
3: "#fff",
2: "#fff",
1: "#333"
};
代码中会用到的图片
