立体热力图

MMSDT.densityMap()

利用动环监控设备，实时形成立体的热力图谱。

Tips：可自行设置任意等级的阈值和其对应的颜色，与密度图使用同一个构造函数。

构造函数

MMSDT.densityMap( option:object )

x - 数组数字，x轴的最大边界，x轴的最小边界。

z - 数组数字，z轴的最大边界，z轴的最小边界。

y - 数组数字，立体热力图的高度（高低值相同则无立体高差）。

opacity - 浮点数字，最大透明度。

visible - 布尔值，默认是否显示。

accuracy - 数字，取样精度(像素点大小，越大越精细)。

ranges - 数字，影响范围(半径，按热力图的像素点大小计算)。

maxValue - 数字，最大值（例如达到该值为红色）。

colorStep - 对象，0~1阈值范围及对应的颜色。

属性

.updateColors( position )

更新密度数据，position 二维数组，所有人员的地理位置坐标[x,y,z,value]。可自定义更新频率。

.visible( Boolean )

是否显示或隐藏，Boolean 布尔值。

代码示例





var MMS3D_exceptionMesh = [];                                         //需要材质拆分的网格
var MMS3D_instancingMesh = ["Sc46134_2","Sc46753_2","Sc46264_2"];     //合并实例化网格

//初始化场景
MMSDT.initScene( false, MMS3D_exceptionMesh, MMS3D_instancingMesh );  

camera.near = 5;                     //相机最近距离,小于该距离则事物不可见
camera.updateProjectionMatrix();     //重新设置后更新

//设置第3人称鼠标控制器
controls3.maxPolarAngle = Math.PI*0.495;    //向下，最大角度限制
controls3.maxDistance = 500;	            //最远距离限制
controls3.screenSpacePanning = false;       //右键平移是否上下移动
controls3.enableDamping = true;             //是否开启惯性阻尼
controls3.dampingFactor = 0.1;              //惯性阻尼系数

//使用json文件让场景还原
MMSDT.onloadScene( "models/mms3D_jianyu1.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 )+'%';
	}
});

//设置密度图参数
var options = {
    x: [ 270,-270 ],                //x轴的最大边界，x轴的最小边界
    z: [ 270,-190 ],                //z轴的最大边界，z轴的最小边界
    y: [70,0],                      //密度图的高度（高低值相同则无立体高差）
    opacity: 0.8,                   //透明度
    visible: true,                  //默认是否显示	
    radius:60,                      //影响范围(半径，按热力图的像素点大小计算)
    accuracy: 0.5,                  //取样精度(像素点大小，越大越精细)
    maxValue: 100,                  //最大值（例如达到该值为红色）
	colorStep: {                    //颜色等级，0~1对应的颜色值
        1.0: '#ff0000',
        0.8: '#fff000',
        0.6: '#00ff00',
        0.4: '#0066ff',
        0.2: '#0000ff'
	}		
}
var densityMap = new MMSDT.densityMap(options);  //初始化密度图 

var monitorPoints=[];               //监测点位

//场景加载完成
function onloadDone(){
	
    //读取json设备信息并加载图标
	MMSDT.getJson( "models/equip_jianyu2.json", function(dataJson){	
        //读取设备点位
        for( var i=0; i<dataJson.model.length; i++ ){
            dataJson.model[i].position.push(40+i*10);           //随便设置一个热力图的值
        	monitorPoints.push( dataJson.model[i].position );   //存储监测点坐标及对应的值
        }

        //更新热力图
        densityMap.updateColors( monitorPoints );
        
        //添加环控器设备图标
	    var options2 = {
	        dirUrl: 'models/equip/',    //安装目录
	        scale: 0.7,                 //缩放比例
	        height: 10,                 //相对高度
	        visible: true,              //默认显示
	        animate: true,              //上下浮动
	        flash: false,               //张弛闪动
	        lookAt: true,               //是否垂直约束
	        color: 0x1197ff,            //默认颜色
        }  
        var iotIcon = new MMSDT.addIcon( dataJson, options2);	
		
	});         	

}

//自定义对外函数接口------------------------------------------------------------------------

//显示隐藏
MMAPI.mapVisible = function(Boolean){
	densityMap.visible(Boolean);
}

//更改颜色值（点位数组下标，新的值）
MMAPI.changeValue = function( list, value ){
	monitorPoints[list][3] = value;
	densityMap.updateColors( monitorPoints );
}

MMSDT.densityMap()

构造函数

MMSDT.densityMap( option:object )

属性

代码示例

点击查看示例演示 →