使用室內三維地圖引擎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格式數據
});

 

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
                    }
                }
            });  
        }

2.封裝加載設備圖層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); //將圖層添加到樓層對象
        }

 效果如下圖：

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();//控制保安的移動
        }

效果如下圖：

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);
            }
        }

以上是將設備添加到地圖上的過程。

 

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;
            }
        };

全部圖層顯示：

隱藏攝像頭：

6.點擊地圖marker彈出氣泡信息

首先在點擊事件回調中判斷點擊的是否是自己添加的marker

//地圖點擊事件回調
        map.on('mapClickNode', function(event) {
            console.log(event);
            if(event && event.hasOwnProperty("deviceType")){//這里判斷點擊的是否是自己新增的設備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();
                        })
                    }
                });
            }
        }

彈框樣式可以自定義修改

彈框效果如下：

 

 

 

 

以下是整體效果圖：

 

 

以上就是我用ESMap的地圖開發的圖層控制功能，感興趣的小伙伴快試一下吧！

以上內容體驗鏈接：訪問鏈接

可用使用手機微信測試我們的室內三維地圖加載速度和展示性能。

Thank you for reading!