折叠IoT图标

对高密集、互相重叠遮挡的设备图标进行隐藏，并把信息归集到附近的点位上

参数

new MMSDT.foldIcon(distance)

distance: 默认距离系数，数字越大，图标折叠的范围越大

属性

.foldout = Boolean

图标折叠的功能开关，true开，false关

.exception(id)

id:数组，例外的id号，如异常的设备图标可以不折叠

代码示例



	
//读取设备的json配置文件    
MMSDT.getJson( dirUrl+"models/equip.json", callbackEquip);
function callbackEquip( dateJson ){
    var parameter1 = {
    	dirUrl: dirUrl,    //安装目录
    	scale: 0.02,       //设备模型大小缩放
    	visible: true,     //默认显示
    }
	MMSDT.addModel(dateJson, parameter1);    //加载设备模型（参数、目录、缩放）	
	
	var parameter2 = {
        dirUrl: dirUrl,    //安装目录
        scale: 1,          //缩放比例
        height: 4,         //相对高度
        color: 0x00baff,   //默认颜色
        visible: true,     //默认显示
        lookAt: false,     //是否垂直约束
        autoScale: false,  //图标自动缩放（远大近小）
	}   	
	MMSDT.addIcon( dateJson, parameter2);
}


//折叠IoT图标（默认距离系数）
var fold = new MMSDT.foldIcon(20);

    
//鼠标事件	
var eventMouse = [];    	
var onMove = [];	
var outMove = function(){}	
var onDown = [];	
var onDouble = [];	
var moveColor = [0xff0000,0x00baff,true,true];    //移入颜色，移出颜色，设备是否变色，设备与图标变色是否相关联

//鼠标点击设备或图标
function goBack( dateJson, dblClick ){
	console.log( dateJson );
}

//鼠标移入移出设备或图标
var positions = [0,0,0];
function goBack2( dateJson ){
	if( dateJson == "none"){
        document.getElementById("info").style.display = "none";
	}else{
        document.getElementById("info").style.display = "block";                     //显示div
	    
	    var more="";                                                                //读取被折叠的设备信息
    	for( var i=0; i < dateJson.fold.length; i++ ){
    		more += "设备ID：" + dateJson.fold[i].id + "<br>";
    	}    	    	   
        document.getElementById("info2").innerHTML = "设备ID：" + dateJson.id + "<br>" + more;
	    
	    //当前设备的三维坐标
	    positions = dateJson.position;
	}
}
//构建函数监听鼠标事件
MMSDT.mouseEvent( eventMouse, onMove, outMove, onDown, onDouble, moveColor, false, false, goBack, goBack2 );  

	
//循环动画	
animate(); 
function animate(){
	requestAnimationFrame( animate );
			
	//信息框跟随移动
	let vector = MMSDT.mapped3to2( positions );                              //得到二维坐标		
	document.getElementById("info").style.bottom = vector.y + 60 + "px";     //实时刷新二维div
	document.getElementById("info").style.left = vector.x -75 + "px";	
}	


//使用MMAPI类，自定义外部函数接口 

//图标折叠
MMAPI.foldout = function(value){
	if( value == 0 ){
        fold.foldout = false;
	}else if( value == 1 ){
        fold.foldout = true;
	}       
} 

	
//例外图标（不折叠）
MMAPI.exception = function(){
	fold.exception([2611,2588,2613,2612,2601]);       //例外的id号
}

折叠IoT图标

参数

属性

代码示例

在线演示