使用室内三维地图引擎ESMap来管理摄像头设备、消防设备和人员轨迹展示_柠浓_前端开发者

目前室内三维地图如何轻量化,能够在手机微信、电脑浏览器等平台快速显示地图,显示的地图性能好,转动地图不卡是大家都要面对的问题,

使用室内三维地图引擎ESMap后目前可以不用操心这方面的问题,开发只需要关心设备如何加到地图上进行管理,本文章主要介绍摄像头图层、消防设备图层和人员轨迹图层进行介绍,方便大家直接整合到自己的项目中。

本文简单的介绍使用ESmap的SDK开发地图简单的设备图层管理的过程。若有不足,欢迎指正。

 

开发过程如下:

开发过程如下:

首先创建好地图后,我在地图上增加了楼层控制控件、放大缩小控件和二三维切换控件。如下图:

 

利用ESMap地图平台的地图点击事件在地图上选取所有设备的位置坐标,然后整理成自己需要的json数据。

 //地图加载完成回调

 //地图加载完成回调
map.on('loadComplete', function () {
    floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);//创建楼层控件
    var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);//创建放大缩小控件
    bingEvents();//绑定按钮点击事件
    loadDeviceData();//加载自己构造好的json格式数据
});

 

 //地图加载完成回调
map.on('loadComplete', function () {
    floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);//创建楼层控件
    var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);//创建放大缩小控件
    bingEvents();//绑定按钮点击事件
    loadDeviceData();//加载自己构造好的json格式数据
});

() {
floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);//创建楼层控件
var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);//创建放大缩小控件
bingEvents();//绑定按钮点击事件
loadDeviceData();//加载自己构造好的json格式数据
});

 

1.创建后台json数据,并引入数据

1.创建后台json数据,并引入数据

所有的设备真实项目中都采用数据库后台来管理,我们演示就直接省去后台管理,直接使用设备基本信息数据存储在JSON文件中,这样就可以直接方便演示;

在地图加载完成后获取自己需要的数据:

json数据格式如下图:

 

//加载图层数据

 function loadDeviceData(){
            $.getJSON("device.json", function (data) {
                if(data){
                    var devices = data.devices;
                    for (let i = 0; i < devices.length; i++) {
                        const obj = devices[i];
                        addDeviceMarker(obj);//在地图上添加设备marker
                    }
                }
            });  

            $.getJSON("baoan.json", function (data) {
                if(data){
                    var baoan = data.data;
                    for (let i = 0; i < baoan.length; i++) {
                        const obj = baoan[i];
                        addTextMarker(obj); //在地图上添加安保人员marker
                    }
                }
            });  
        }
 function loadDeviceData(){
            $.getJSON("device.json", function (data) {
                if(data){
                    var devices = data.devices;
                    for (let i = 0; i < devices.length; i++) {
                        const obj = devices[i];
                        addDeviceMarker(obj);//在地图上添加设备marker
                    }
                }
            });  

            $.getJSON("baoan.json", function (data) {
                if(data){
                    var baoan = data.data;
                    for (let i = 0; i < baoan.length; i++) {
                        const obj = baoan[i];
                        addTextMarker(obj); //在地图上添加安保人员marker
                    }
                }
            });  
        }

function loadDeviceData(){
$.getJSON(
function (data) {
if(data){
var data.devices;
for) {
const obj
devices[i];
addDeviceMarker(obj);
//在地图上添加设备marker
}
}
});

$.getJSON(function (data) {
if(data){
var data.data;
for) {
const obj
baoan[i];
addTextMarker(obj);
//在地图上添加安保人员marker
}
}
});
}

2.封装加载设备图层marker方法

2.封装加载设备图层marker方法

将上面的数据解析后,直接写代码在室内三维地图上进行相关图片marker展示。

将上面的数据解析后,直接写代码在室内三维地图上进行相关图片marker展示。

 //在地图上添加设备marker
        function addDeviceMarker(obj){
            //通过名字区别创建不同的layer
            var floorLayer = map.getFloor(obj.fnum);  //获取第一层的楼层对象
            var layer=floorLayer.getOrCreateLayerByName("device"+obj.type,esmap.ESLayerType.IMAGE_MARKER);//"device"+type 隐藏/删除的时候用
            var url= 'image/'+obj.type+'.png';
            var angle=null;
            if(obj.hasOwnProperty("angle"))angle=obj.angle;
            im = new esmap.ESImageMarker({
                x:obj.x,                //坐标x
                y:obj.y,                //坐标y
                url:url,                //图片标注的图片地址
                size: obj.size,         //图片大小 或者 size:{w:32,h:64},
                angle:angle,
                spritify:true,          //跟随地图缩放变化大小,默认为true,可选参数
                height:1,               //距离地面高度
                showLevel: 20,          //地图缩放等级达到多少时隐藏,可选参数
                seeThrough: false,       //是否可以穿透楼层一直显示,可选参数
                id: obj.id,             //id,可自定义
                name:obj.name           //name可自定义
            });
            im.deviceType=obj.type;     //自定义属性-用于点击事件中区分点击的是什么类型的设备
            layer.addMarker(im);        //将imageMarker添加到图层
            floorLayer.addLayer(layer); //将图层添加到楼层对象
        }
 //在地图上添加设备marker
        function addDeviceMarker(obj){
            //通过名字区别创建不同的layer
            var floorLayer = map.getFloor(obj.fnum);  //获取第一层的楼层对象
            var layer=floorLayer.getOrCreateLayerByName("device"+obj.type,esmap.ESLayerType.IMAGE_MARKER);//"device"+type 隐藏/删除的时候用
            var url= 'image/'+obj.type+'.png';
            var angle=null;
            if(obj.hasOwnProperty("angle"))angle=obj.angle;
            im = new esmap.ESImageMarker({
                x:obj.x,                //坐标x
                y:obj.y,                //坐标y
                url:url,                //图片标注的图片地址
                size: obj.size,         //图片大小 或者 size:{w:32,h:64},
                angle:angle,
                spritify:true,          //跟随地图缩放变化大小,默认为true,可选参数
                height:1,               //距离地面高度
                showLevel: 20,          //地图缩放等级达到多少时隐藏,可选参数
                seeThrough: false,       //是否可以穿透楼层一直显示,可选参数
                id: obj.id,             //id,可自定义
                name:obj.name           //name可自定义
            });
            im.deviceType=obj.type;     //自定义属性-用于点击事件中区分点击的是什么类型的设备
            layer.addMarker(im);        //将imageMarker添加到图层
            floorLayer.addLayer(layer); //将图层添加到楼层对象
        }

//在地图上添加设备markerfunction addDeviceMarker(obj){
//通过名字区别创建不同的layervar//获取第一层的楼层对象var//“device”+type 隐藏/删除的时候用var;
varnull;
ifobj.angle;
im
new esmap.ESImageMarker({
x:obj.x,
//坐标x
y:obj.y,
//坐标y
url:url,
//图片标注的图片地址
size: obj.size,
//图片大小 或者 size:{w:32,h:64},
angle:angle,
spritify:
true//跟随地图缩放变化大小,默认为true,可选参数
height:
//距离地面高度
showLevel:
//地图缩放等级达到多少时隐藏,可选参数
seeThrough:
false//是否可以穿透楼层一直显示,可选参数
id: obj.id,
//id,可自定义
name:obj.name
//name可自定义
});
im.deviceType
//自定义属性-用于点击事件中区分点击的是什么类型的设备
layer.addMarker(im);
//将imageMarker添加到图层
floorLayer.addLayer(layer);
//将图层添加到楼层对象
}

 效果如下图:

3.封装文字加图片marker方法

3.封装文字加图片marker方法

//在地图上添加安保人员marker
  function addTextMarker(obj){
            //通过名字区别创建不同的layer
            var floorLayer = map.getFloor(obj.fnum);  //获取第一层的楼层对象
            var layer=floorLayer.getOrCreateLayerByName("device"+obj.type,esmap.ESLayerType.TEXT_MARKER);//"device"+type 隐藏/删除的时候用
            var url= 'image/'+obj.type+'.png';
            var tm = new esmap.ESTextMarker({
                x:obj.x,                //坐标x
                y:obj.y,                //坐标y
                id: obj.id,             //id,可自定义
                image: url,             //图片标注的图片地址
                imageAlign:'bottom',    //图片方位left,top,right,bottom
                imageSize:obj.size,         //图片大小
                name:obj.name,          //文字名称
                spritify:true,          //跟随地图缩放变化大小,默认为true,可选参数
                scale:1,                //文字等级缩放默认为1,可选参数,0.1表明缩小10倍
                height:1,               //距离地面高度
                showLevel: 20,          //地图缩放等级达到多少时隐藏,可选参数
                fillcolor: "255,0,0",     //填充色
                fontsize: "18",           //字体大小
                strokecolor: "255,255,0", //边框色
                strokewidth:2 //边框厚度  0表示无边框
            });

            tm.deviceType=obj.type;         //自定义属性-用于点击事件中区分点击的是什么类型的设备
            tm.routePoints=obj.routePoints; //人员的移动路径
            baoanMakrker.push(tm);
            layer.addMarker(tm);        //将imageMarker添加到图层
            floorLayer.addLayer(layer); //将图层添加到楼层对象
            baoanMoveRoute();//控制保安的移动
        }
//在地图上添加安保人员marker
  function addTextMarker(obj){
            //通过名字区别创建不同的layer
            var floorLayer = map.getFloor(obj.fnum);  //获取第一层的楼层对象
            var layer=floorLayer.getOrCreateLayerByName("device"+obj.type,esmap.ESLayerType.TEXT_MARKER);//"device"+type 隐藏/删除的时候用
            var url= 'image/'+obj.type+'.png';
            var tm = new esmap.ESTextMarker({
                x:obj.x,                //坐标x
                y:obj.y,                //坐标y
                id: obj.id,             //id,可自定义
                image: url,             //图片标注的图片地址
                imageAlign:'bottom',    //图片方位left,top,right,bottom
                imageSize:obj.size,         //图片大小
                name:obj.name,          //文字名称
                spritify:true,          //跟随地图缩放变化大小,默认为true,可选参数
                scale:1,                //文字等级缩放默认为1,可选参数,0.1表明缩小10倍
                height:1,               //距离地面高度
                showLevel: 20,          //地图缩放等级达到多少时隐藏,可选参数
                fillcolor: "255,0,0",     //填充色
                fontsize: "18",           //字体大小
                strokecolor: "255,255,0", //边框色
                strokewidth:2 //边框厚度  0表示无边框
            });

            tm.deviceType=obj.type;         //自定义属性-用于点击事件中区分点击的是什么类型的设备
            tm.routePoints=obj.routePoints; //人员的移动路径
            baoanMakrker.push(tm);
            layer.addMarker(tm);        //将imageMarker添加到图层
            floorLayer.addLayer(layer); //将图层添加到楼层对象
            baoanMoveRoute();//控制保安的移动
        }

//在地图上添加安保人员markerfunction addTextMarker(obj){
//通过名字区别创建不同的layervar//获取第一层的楼层对象var//“device”+type 隐藏/删除的时候用var;
varnew esmap.ESTextMarker({
x:obj.x,
//坐标x
y:obj.y,
//坐标y
id: obj.id,
//id,可自定义
image: url,
//图片标注的图片地址
imageAlign:
//图片方位left,top,right,bottom
imageSize:obj.size,
//图片大小
name:obj.name,
//文字名称
spritify:
true//跟随地图缩放变化大小,默认为true,可选参数
scale:
//文字等级缩放默认为1,可选参数,0.1表明缩小10倍
height:
//距离地面高度
showLevel:
//地图缩放等级达到多少时隐藏,可选参数
fillcolor:
//填充色
fontsize:
//字体大小
strokecolor:
//边框色
strokewidth:
//边框厚度 0表示无边框
});

tm.deviceType//自定义属性-用于点击事件中区分点击的是什么类型的设备
tm.routePoints
//人员的移动路径
baoanMakrker.push(tm);
layer.addMarker(tm);
//将imageMarker添加到图层
floorLayer.addLayer(layer);
//将图层添加到楼层对象
baoanMoveRoute();
//控制保安的移动
}

效果如下图:

效果如下图:

4.控制地图marker移动

4.控制地图marker移动

     //控制保安的移动
        function baoanMoveRoute(){
            if(baoanMakrker && baoanMakrker.length>0){
                var index=0;
                setInterval(function(){
                    for (let i = 0; i < baoanMakrker.length; i++) {
                       const bamarker = baoanMakrker[i];
                        var routePoints=bamarker.routePoints;
                        var point=routePoints[index];
                        bamarker.moveTo({x: point.x,y: point.y,time:0})//移动marker  
                    }
                    index++;
                    if(index==5){
                        index=0;
                    }
                },2000);
            }
        }
     //控制保安的移动
        function baoanMoveRoute(){
            if(baoanMakrker && baoanMakrker.length>0){
                var index=0;
                setInterval(function(){
                    for (let i = 0; i < baoanMakrker.length; i++) {
                       const bamarker = baoanMakrker[i];
                        var routePoints=bamarker.routePoints;
                        var point=routePoints[index];
                        bamarker.moveTo({x: point.x,y: point.y,time:0})//移动marker  
                    }
                    index++;
                    if(index==5){
                        index=0;
                    }
                },2000);
            }
        }

//控制保安的移动function baoanMoveRoute(){
if){
var;
setInterval(
function(){
for) {
const bamarker
baoanMakrker[i];
varbamarker.routePoints;
varroutePoints[index];
bamarker.moveTo({x: point.x,y: point.y,time:
//移动marker
}
index
;
if){
index
;
}
},
);
}
}

以上是将设备添加到地图上的过程。

 

5.控制图层的显示和隐藏

5.控制图层的显示和隐藏

在添加设备Marker的时候会取一个图层name,可以根据这个name控制图层的显示和隐藏

封装方法为:

//根据名字显示或隐藏设备图层
        function hideOrShowLayer(params,isshow){//params格式['device1','device2',...] isshow:true/fasle
            var fnums = map.floorNums;//获取地图所有楼层[1,2,3]
            for(var i=0;i<fnums.length;i++){
                var floor = map.getFloor(fnums[i]);
                var res = floor.getLayersByNames(params);
                if(res)
                    res.visible = isshow;
            }
        };
//根据名字显示或隐藏设备图层
        function hideOrShowLayer(params,isshow){//params格式['device1','device2',...] isshow:true/fasle
            var fnums = map.floorNums;//获取地图所有楼层[1,2,3]
            for(var i=0;i<fnums.length;i++){
                var floor = map.getFloor(fnums[i]);
                var res = floor.getLayersByNames(params);
                if(res)
                    res.visible = isshow;
            }
        };

//根据名字显示或隐藏设备图层function//params格式[‘device1′,’device2’,…] isshow:true/faslevar//获取地图所有楼层[1,2,3]forvar){
var map.getFloor(fnums[i]);
var floor.getLayersByNames(params);
if(res)
res.visible
isshow;
}
};

全部图层显示:

全部图层显示:

隐藏摄像头:

隐藏摄像头:

6.点击地图marker弹出气泡信息

6.点击地图marker弹出气泡信息

首先在点击事件回调中判断点击的是否是自己添加的marker

//地图点击事件回调
        map.on('mapClickNode', function(event) {
            console.log(event);
            if(event && event.hasOwnProperty("deviceType")){//这里判断点击的是否是自己新增的设备marker
                showPop(event);
            }
        });
//地图点击事件回调
        map.on('mapClickNode', function(event) {
            console.log(event);
            if(event && event.hasOwnProperty("deviceType")){//这里判断点击的是否是自己新增的设备marker
                showPop(event);
            }
        });

//地图点击事件回调
map.on(
function(event) {
console.log(event);
if//这里判断点击的是否是自己新增的设备marker
showPop(event);
}
});

封装弹出气泡标注方法:

      var popMarker=null;
        function showPop(data) {//点击marker 弹出基本信息
            if(popMarker) popMarker.close();
            var types={"1":"摄像头","2":"消防设备","3":"保安"};
            var className = "close-"+data.ID; //生成唯一的class,用于关闭
            if(data.deviceType!=1){//如果点击的不是摄像头
                popMarker = new esmap.ESPopMarker({
                mapCoord: {
                   //设置弹框的x轴
                    x: data.x,
                    //设置弹框的y轴
                    y:data.y,
                    height: 3.5, //控制信息窗的高度
                    //设置弹框位于的楼层
                    fnum: data.FloorNum
                },
                className:"rock-box m-pop",  //自定义popMarker样式。在css里配置
                //设置弹框的宽度
                width: 300,
                //设置弹框的高度
                height: 150,
                //    marginTop:10,  //弹框距离地面的高度
                //设置弹框的内容
               content:
                `
                <div class="title"><span style="margin: 20px;">信息弹框</span></div>
                    <div class="m-box">
                        <div class="m-text">
                       <p>                            
                <span class="m-span">id</span> <span class="m-span">名称</span> <span class="m-span">类型</span> </p> <p> <span class="m-span2">${data.ID}</span> <span class="m-span2 status">${data.name}</span> <span class="m-span2 ">${types[data.deviceType]}</span> </p> </div> </div> <div class="myPopClose ${className}"></div> `, closeCallBack: function () { //信息窗点击关闭操作 }, created: function (e) { //创建完成钩子 $("."+className).on('click',function(){ //为自定义关闭按钮绑定隐藏事件 popMarker.close(); }) } }); }else{//点击摄像头 popMarker = new esmap.ESPopMarker({ mapCoord: { //设置弹框的x轴 x: data.x, //设置弹框的y轴 y:data.y, height: 3.5, //控制信息窗的高度 //设置弹框位于的楼层 fnum: data.FloorNum }, className:"rock-box m-pop", //自定义popMarker样式。在css里配置 //设置弹框的宽度 width: 300, //设置弹框的高度 height: 220, // marginTop:10, //弹框距离地面的高度 //设置弹框的内容 content: ` <div class="title"><span>${data.name}</span></div> <div class="m-box"> <video style="width: 100%;height: 100%;" controls autoplay> <source src="1.mp4" type="video/mp4"> </video> </div> <div class="myPopClose ${className}"></div> `, closeCallBack: function () { //信息窗点击关闭操作 }, created: function (e) { //创建完成钩子 $("."+className).on('click',function(){ //为自定义关闭按钮绑定隐藏事件 popMarker.close(); }) } }); } }
      var popMarker=null;
        function showPop(data) {//点击marker 弹出基本信息
            if(popMarker) popMarker.close();
            var types={"1":"摄像头","2":"消防设备","3":"保安"};
            var className = "close-"+data.ID; //生成唯一的class,用于关闭
            if(data.deviceType!=1){//如果点击的不是摄像头
                popMarker = new esmap.ESPopMarker({
                mapCoord: {
                   //设置弹框的x轴
                    x: data.x,
                    //设置弹框的y轴
                    y:data.y,
                    height: 3.5, //控制信息窗的高度
                    //设置弹框位于的楼层
                    fnum: data.FloorNum
                },
                className:"rock-box m-pop",  //自定义popMarker样式。在css里配置
                //设置弹框的宽度
                width: 300,
                //设置弹框的高度
                height: 150,
                //    marginTop:10,  //弹框距离地面的高度
                //设置弹框的内容
               content:
                `
                <div class="title"><span style="margin: 20px;">信息弹框</span></div>
                    <div class="m-box">
                        <div class="m-text">
                       <p>                            
                <span class="m-span">id</span> <span class="m-span">名称</span> <span class="m-span">类型</span> </p> <p> <span class="m-span2">${data.ID}</span> <span class="m-span2 status">${data.name}</span> <span class="m-span2 ">${types[data.deviceType]}</span> </p> </div> </div> <div class="myPopClose ${className}"></div> `, closeCallBack: function () { //信息窗点击关闭操作 }, created: function (e) { //创建完成钩子 $("."+className).on('click',function(){ //为自定义关闭按钮绑定隐藏事件 popMarker.close(); }) } }); }else{//点击摄像头 popMarker = new esmap.ESPopMarker({ mapCoord: { //设置弹框的x轴 x: data.x, //设置弹框的y轴 y:data.y, height: 3.5, //控制信息窗的高度 //设置弹框位于的楼层 fnum: data.FloorNum }, className:"rock-box m-pop", //自定义popMarker样式。在css里配置 //设置弹框的宽度 width: 300, //设置弹框的高度 height: 220, // marginTop:10, //弹框距离地面的高度 //设置弹框的内容 content: ` <div class="title"><span>${data.name}</span></div> <div class="m-box"> <video style="width: 100%;height: 100%;" controls autoplay> <source src="1.mp4" type="video/mp4"> </video> </div> <div class="myPopClose ${className}"></div> `, closeCallBack: function () { //信息窗点击关闭操作 }, created: function (e) { //创建完成钩子 $("."+className).on('click',function(){ //为自定义关闭按钮绑定隐藏事件 popMarker.close(); }) } }); } }

      varnull;
function//点击marker 弹出基本信息if(popMarker) popMarker.close();
var};
var//生成唯一的class,用于关闭if//如果点击的不是摄像头
popMarker
new esmap.ESPopMarker({
mapCoord: {
//设置弹框的x轴
x: data.x,
//设置弹框的y轴
y:data.y,
height:
//控制信息窗的高度//设置弹框位于的楼层
fnum: data.FloorNum
},
className:
//自定义popMarker样式。在css里配置//设置弹框的宽度
width:
,
//设置弹框的高度
height:
,
// marginTop:10, //弹框距离地面的高度//设置弹框的内容
content:
`


`,
closeCallBack:
function () {
//信息窗点击关闭操作
},

created: function (e) {
//创建完成钩子
$(
function(){
//为自定义关闭按钮绑定隐藏事件
popMarker.close();
})
}
});
}
else//点击摄像头
popMarker
new esmap.ESPopMarker({
mapCoord: {
//设置弹框的x轴
x: data.x,
//设置弹框的y轴
y:data.y,
height:
//控制信息窗的高度//设置弹框位于的楼层
fnum: data.FloorNum
},
className:
//自定义popMarker样式。在css里配置//设置弹框的宽度
width:
,
//设置弹框的高度
height:
,
// marginTop:10, //弹框距离地面的高度//设置弹框的内容
content:
`

`,
closeCallBack:
function () {
//信息窗点击关闭操作
},
created:
function (e) {
//创建完成钩子
$(
function(){
//为自定义关闭按钮绑定隐藏事件
popMarker.close();
})
}
});
}
}

弹框样式可以自定义修改

弹框效果如下:

 

 

 

 

以下是整体效果图:

以下是整体效果图:

 

 

以上就是我用ESMap的地图开发的图层控制功能,感兴趣的小伙伴快试一下吧!

以上内容体验链接:访问链接

访问链接

可用使用手机微信测试我们的室内三维地图加载速度和展示性能。

可用使用手机微信测试我们的室内三维地图加载速度和展示性能。

Thank you for reading!

Thank you for reading!

 

» 本文来自:前端开发者 » 《使用室内三维地图引擎ESMap来管理摄像头设备、消防设备和人员轨迹展示_柠浓_前端开发者》
» 本文链接地址:https://www.rokub.com/73164.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!