MMSDT.createCableLine()
对IoT设备，或者其上附加的子设备，进行线路拓扑连接。
构造函数
MMSDT.createCableLine()
属性
.visible( id, Boolean )
对指定ID的线段隐藏或显示
id - 字符串，指定线段id
Boolean - 布尔值，true显示，false隐藏
.remove( id )
删除指定ID的线段
id - 字符串，指定线段id
.addLine( config )
添加新的线段，json对象
id - 字符串，为该段线条赋予一个新的id号
type - 线条类型，字符串0、1、2（"0"实线、"1"长虚线、"2"短虚线）
color - RGB颜色，线条颜色
devId - 数组，该线条所连接的设备ID号，数组内字符串
pattern - 字符串，线条的折线方向，字符串1~6，表示不同的转折方向（1~4为水平的四个方向，5~6为上方的两个方向）
distance - 数字,折线厚度距离
skew - 数组，折线的相对中心位置的偏移[x,y,z]（防止多种线条路径相同的情况下的重叠）
speed -数字,光点流动速度
scale - 数字，光点的大小
代码示例
var MMS3D_exceptionMesh = []; //需要材质拆分的网格
var MMS3D_instancingMesh = []; //合并实例化网格
//初始化场景
MMSDT.initScene( false, MMS3D_exceptionMesh, MMS3D_instancingMesh );
//设置第3人称鼠标控制器
controls3.maxPolarAngle = Math.PI*0.49; //向下，最大角度限制
controls3.maxDistance = 1000; //最远距离限制
controls3.screenSpacePanning = false; //右键平移是否上下移动
controls3.enableDamping = true; //是否开启惯性阻尼
controls3.dampingFactor = 0.1; //惯性阻尼系数
controls3.autoRotateSpeed = 2; //自动旋转速度
//使用json文件让场景还原
MMSDT.onloadScene( "models/mms3D_cangku1.json", function(progress){
if( progress == 'done' ){
//加载完成,播放动画
for( var i=0; i<actions[0].length; i++ ){
actions[0][i].play();
actions[0][i].timeScale = 0.5;
}
}else if( progress == 'ok' ){
//渲染完成
onloadDone();
}else{
//显示进度条数字
document.getElementById("loadNum").innerHTML = Math.round( progress )+'%';
}
});
//读取json设备信息并加载
MMSDT.getJson( "models/equip_cangku1.json", function(dataJson){
//加载IOT设备模型
var config1 = {
dirUrl: 'models/equip/', //String（安装目录）
scale: 2.5, //Number（设备模型大小缩放，在已编辑的大中小基础上)
height: 0, //相对高度
visible: true, //Boolean（默认是否显示，true显示，false隐藏）
}
MMSDT.addModel(dataJson, config1, function(){ //载入IoT设备
console.log("IOT设备加载完成");
//IOT设备加载完成，开始连线
for( let i=0; i<lineJson.length; i++ ){
connectCable( lineJson[i] );
}
});
//添加IoT设备图标
var config2 = {
dirUrl: 'models/equip/', //安装目录
scale: 1, //缩放比例
height: 18, //相对高度
visible: true, //默认显示
animate: true, //上下浮动
flash: false, //张弛闪动
lookAt: true, //是否垂直约束
color: 0xffff00, //默认颜色
}
MMSDT.addIcon( dataJson, config2);
});
//场景加载完成
function onloadDone(){
//移入场景模型
var onMove = function(name){}
//移出场景模型
var outMove = function(){}
//移入设备图标
var onIot = function(icon){
MMSDT.superposition(icon.id,0xff0000); //指定图标变色
document.getElementsByClassName("infoBox")[0].style.display = "block";
document.getElementsByClassName("infoBox")[0].style.top = event.pageY - 110 + "px";
document.getElementsByClassName("infoBox")[0].style.left = event.pageX - 90 + "px";
document.getElementsByClassName("infoBox")[0].innerHTML = "该设备id：
"+icon.id;
}
//移出设备图标
var outIot = function(){
MMSDT.superposition(); //移出图标变色恢复
document.getElementsByClassName("infoBox")[0].style.display = "none";
}
MMSDT.mouseMoveEvent( onMove, outMove, onIot, outIot ); //初始化鼠标移入移出事件
}
//连线配置（测试数据）
var lineJson = [
{
type: "0", //线条类型
devId: ["H01","H02","H03"], //线条连接的设备ID号
pattern: "4", //线条转折方向
lineId: "一号红外线" //线条ID号
},{
type: "0", //线条类型
devId: ["H03","H04","H05"], //线条连接的设备ID号
pattern: "2", //线条转折方向
lineId: "二号红外线" //线条ID号
},{
type: "0", //线条类型
devId: ["H05","H06"], //线条连接的设备ID号
pattern: "4", //线条转折方向
lineId: "三号红外线" //线条ID号
},{
type: "0", //线条类型
devId: ["H06","H07","H08"], //线条连接的设备ID号
pattern: "2", //线条转折方向
lineId: "四号红外线" //线条ID号
},{
type: "1", //线条类型
devId: ["S01","S02","S04","S03"], //线条连接的设备ID号
pattern: "5", //线条转折方向
lineId: "一类摄像头" //线条ID号
},{
type: "2", //线条类型
devId: ["H09","H10","H13","H12","H11"], //线条连接的设备ID号
pattern: "6", //线条转折方向
lineId: "二类红外线" //线条ID号
},{
type: "1", //线条类型
devId: ["H09","H10","H13","H12","H11"], //线条连接的设备ID号
pattern: "5", //线条转折方向
lineId: "三类红外线" //线条ID号
},{
type: "0", //线条类型
devId: ["H09","H10","H13","H12","H11"], //线条连接的设备ID号
pattern: "6", //线条转折方向
lineId: "四类红外线" //线条ID号
}
]
var cableLine = new MMSDT.createCableLine(); //初始化线条函数
function connectCable(jsonData){
var color = 0xff0000; //根据线条类型的不同设置不同的颜色
var skewing = [0,0,0]; //不同类型线条的偏移量
if( jsonData.type == "1" ){
color = 0x00ff00;
skewing = [2.5,1,2.5];
}else if( jsonData.type == "2" ){
color = 0x00ffff;
skewing = [-2.5,-1,-2.5];
}
var config = {
id: jsonData.lineId, //为该段线条赋予一个id号
type: jsonData.type, //线条类型，字符串0、1、2（0实线、1长虚线、2短虚线）
color: color, //线条颜色
devId: jsonData.devId, //该线条所连接的设备ID号，数组内字符串
pattern: jsonData.pattern, //线条的折线方向，字符串1~6，表示不同的转折方向（1~4为水平的四个方向，5~6为上方的两个方向）
distance: 50, //折线厚度距离
skew: skewing, //折线的相对中心位置的偏移（防止多种线条路径相同的情况下的重叠）
speed: Math.random()+0.5, //流动速度
scale: Math.random()+3.5 //流动光点的大小
}
cableLine.remove( jsonData.lineId ); //删除一段线条（重新编辑位置后、或者防止重复添加，如有旧线条需先删除）
cableLine.addLine( config ); //新增一段线条
}
//自定义对外函数接口------------------------------------------------------------------------
//全部隐藏
MMAPI.removeLine = function(){
for( var i=0; i<lineJson.length; i++ ){
cableLine.visible( lineJson[i].lineId, false );
}
}
//全部显示
MMAPI.addLine = function(){
for( var i=0; i<lineJson.length; i++ ){
cableLine.visible( lineJson[i].lineId, true );
}
}
点击查看示例演示 →
Powered by mms3D