鼠标单击IoT设备
需使用 MMSDT.mouseEvent 构建函数监听鼠标事件
配置 goBack 鼠标单击IoT设备事件
参数
MMSDT.mouseEvent( eventMouse, onMove, outMove, onDown, onDouble, moveColor, getPoint, outLineSW, goBack, goBack2 )
eventMouse: 数组,需要监听的模型子网格名称,包含字符
onMove: 数组,鼠标移入事件
outMove:匿名函数,鼠标移出执行该函数
onDown:数组,鼠标单击事件
onDouble:数组,鼠标双击事件
moveColor:数组,IoT设备参数配置
getPoint:布尔值,是否开启获取坐标点
outLineSW:布尔值,鼠标移入IoT设备,对设备是否沟边显示
goBack:回调函数,单击IoT设备(或图标)返回该IoT设备信息
goBack2:回调函数,移入移出IoT设备(或图标)返回该IoT设备信息
goBack
function goBack( dateJson, dblClick ){}
dateJson:回调函数参数,鼠标单击该设备或图标返回的:json信息
dblClick:单击或双击判断,1单击,2双击
代码示例
//读取设备的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, //默认显示
autoScale: false, //图标自动缩放(远大近小)
}
MMSDT.addIcon( dateJson, parameter2);
}
//数组,需要监听的模型子网格名称
var eventMouse = [];
//数组,模型的移入事件
var onMove = [];
//匿名函数,鼠标移出事件
var outMove = function(){}
//数组,鼠标单击事件
var onDown = [];
//数组,鼠标双击事件
var onDouble = [];
//数组,鼠标移入移出IoT设备事件。[移入叠加的颜色,移出叠加的颜色,设备是否变色,设备与图标变色是否相关联]
var moveColor = [0xff0000,0x00baff,true,true];
//回调函数,鼠标点击IoT设备的模型或图标返回信息
function goBack( dateJson, dblClick ){
MMSDT.controlsTarget( dateJson.position, 50, 1000 ); //镜头自动聚焦到该设备
document.getElementById("info").style.display = "block"; //显示div信息框,并载入该设备的基本信息
document.getElementById("info2").innerHTML = "设备类型:" + dateJson.type + "
设备ID:" + dateJson.id + "
设备区域:" + dateJson.area;
controls.addEventListener( 'change', function(){ //监听鼠标控制器动作变化
let vector = MMSDT.mapped3to2( dateJson.position ); //得到该设备从三维坐标投射的二维坐标
document.getElementById("info").style.bottom = vector.y + 60 + "px"; //实时刷新二维div信息框的位置,使其始终浮于该设备上方
document.getElementById("info").style.left = vector.x -75 + "px";
});
}
//构建函数监听鼠标事件
MMSDT.mouseEvent( eventMouse, onMove, outMove, onDown, onDouble, moveColor, false, false, goBack );
//使用MMAPI类,自定义外部函数接口 (恢复鸟瞰)
MMAPI.reset = function(){
document.getElementById("info").style.display = "none";
MMSDT.controlsTarget( [0,0,0], 400, 1000 );
MMSDT.cameraTarget( [0,0,0], [-268, 150, 56], 1000 );
}
在线演示
Powered by mms3D