hightopo

代码实现

绘制电子围栏

``````G.makeShapes = function (data, typeName, color, lastColor, g3dDm) {
//data是包含电子围栏图形信息的json对象数组
let shapes = data;
for (let i = 0; i < shapes.length; i++) {
let shape = shapes[i];
let type = Number(shape['type']);
let x = Number(shape['x']);
let y = Number(shape['y']);
let z = Number(shape['z']);
let width = Number(shape['width']);
let height = Number(shape['height']);
let tall = Number(shape['tall']);
let vertexX = shape['vertexX'];
let vertexY = shape['vertexY'];
let nodePoints = [];
let p3 = [];
let s3 = [];
let centerX = 0;
let centerY = 0;
let centerZ = 0;
let node = new ht.Node();
node.setTag(typeName + i);
switch (type) {
//第一种形状：圆柱
case 1:
p3 = [-x, tall / 2, -y];
//定义电子围栏样式
node.s({
"shape3d": "cylinder",
"shape3d.color": color,
"shape3d.transparent": true,
"shape3d.reverse.color": color,
"shape3d.top.color": color,
"shape3d.top.visible": false,
"shape3d.bottom.color": color,
"shape3d.from.color": color,
"shape3d.to.color": color
});
node.p3(p3);    //设置三维坐标
node.s3(s3);    //设置形状信息
break;
//第二种形状：长方体
case 2:
centerX = x - width / 2;
centerY = y - height / 2;
centerZ = z + tall / 2;
p3 = [-Number(centerX) - width, Number(centerZ), -Number(centerY) - height];
s3 = [width, tall, height];
node.s({
"all.color": color,
"all.reverse.color": color,
"top.visible": false,
"all.transparent": true
});
node.p3(p3);
node.s3(s3);
break;
//第三种形状：底部为不规则形状的等高体
case 3:
let segments = [];
for (let i = 0; i < vertexX.length; i++) {
let x = -vertexX[i];
let y = -vertexY[i];
let newPoint = { x: x, y: y };
nodePoints.push(newPoint);
//1: moveTo，占用1个点信息，代表一个新路径的起点
if (i === 0) {
segments.push(1);
}
else {
//2: lineTo，占用1个点信息，代表从上次最后点连接到该点
segments.push(2);
if (i === vertexX.length - 1) {
//5: closePath，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点
segments.push(5);
}
}
}
node = new ht.Shape();
node.setTag(typeName + i);
node.s({
'shape.background': lastColor,
'shape.border.width': 10,
'shape.border.color': lastColor,
'all.color': lastColor,
"all.transparent": true,
'all.opacity': 0.3,
});
p3 = [nodePoints[0]['x'], tall / 2, nodePoints[0]['y']];
node.p3(p3);
node.setTall(tall);
node.setThickness(5);
node.setPoints(nodePoints); //node设置点集位置信息
node.setSegments(segments); //node设置点集连接规则
break;
}
}
}``````

``````g3dDm.each((data) => {
if (data.getTag() && data.getTag().substring(0, 4) === fenceName) {
if (data.s('all.opacity') === '0') {
data.s('all.opacity', '0.3');
}
else {
data.s('shape3d.visible', true);
data.s('all.visible', true);
data.s("2d.visible", true);
data.s("3d.visible", true);
}
}
});``````

人物模型实时定位

``````// 刷新数据的人物结点与原来的人物节点标签相同，则存在做位置更新
if (realInfoData.tagId === tag.getTag()) {
//计算位置朝向偏移参数
let angleNumber = Math.atan2(((-p3[2]) - (-tag.p3()[2])), ((-p3[0]) - (-tag.p3()[0])));
//如果在原地就不转向，判断人物在平面位置是否发生变化
if (p3[0] !== tag.p3()[0] || p3[2] !== tag.p3()[2]) {
if (angleNumber > 0) {
angleNumber = Math.PI - angleNumber;
} else {
angleNumber = -Math.PI - angleNumber;
}
//设置人物朝向
tag.setRotation3d(0, angleNumber + Math.PI / 2, 0);
}
//设置人物位置
tag.p3(p3);
}``````

人物触发警报

``````switch(obj.alarmType){
case null:
if(panel){//无警报
panel.a('alarmContent','');
panel.a('bg','rgba(6,13,36,0.80)');
}
break;
case '0':
panel.a('alarmContent','进入围栏');
panel.a('bg','rgb(212,0,0)');
break;
case '1':
panel.a('alarmContent','SOS');
panel.a('bg','rgb(212,0,0)');
break;
case '2':
panel.a('alarmContent',''); //离开围栏
panel.a('bg','rgba(6,13,36,0.80)');
break;
case '3':
panel.a('alarmContent','长时间未动');
panel.a('bg','rgb(212,0,0)');
break;
}``````

``````data.a('text', info);

轨迹图轨迹实现原理

``````//生成轨迹
this.ployLines[i] = new ht.Polyline();
this.ployLines[i].setParent(node);
this.points[i] = [];
this.points[i].push({ x: p3[0], y: p3[2], e: p3[1] -50 });
this.ployLines[i].setPoints(this.points[i]);
this.ployLines[i].s({
'shape.border.color': 'red'
});

hightopo
HT for Web - Everything you need to create cutting-edge 2D and 3D visualization

HT for Web

5.3k 声望
2.9k 粉丝
0 条评论