數字孿生城市三維地圖實現設備管理和人員軌跡回放

城市三維地圖簡介

在使用地圖引擎進行開發的過程中，開發者往往十分關心能否將實際生活中的一些設備添加到地圖中進行統一、有效的管理，目前 ESMap 城市三維地圖支持對設備圖層的管理。本文就以攝像頭圖層和人員軌跡圖層為例，介紹如何使用 ESMap 數字孿生城市三維地圖快速、有效的對設備進行管理。

城市三維地圖地圖初始化

由於前面 ESMap 城市三維地圖開發指南（上） 已經講過如何對數字孿生城市三維地圖進行初始化，如果不知道如何創建 ESMap 城市三維地圖，可以查看該指南或者前往 ESMap 城市三維地圖 SDK 開發文檔。

城市三維地圖設備數據初始化

地圖初始化完成后，就需要獲取地圖中設備的坐標、類型等數據。實際開發過程中，這些數據是通過數據庫保存、后台接口傳到前台，而為了方便演示，這里直接將設備數據存放在 JSON 文件中。部分設備數據展示如下所示：

{
    "devices": [{
            "id":1,
            "type":1,
            "name":"攝像頭1",
            "size":64,
            "x": 12683423.565614207,
            "y": 2557880.816886094,
            "fnum": 1
        }
    ]
}

其中設備的坐標信息 x y 可以通過地圖的點擊事件 map.on('mapClickNode') 返回。

再通過 jQuery 的 getJSON 方法讀取 JSON 文件中的設備數據。

$.getJSON("device.json", function (data) {
    if (data) {
        var devices = data.devices;
    }
});

城市三維地圖添加設備標注

獲取到設備數據之后，就可以在地圖中添加相應設備的標注信息，本文使用圖片標注以及圖片加文字標注來展示設備。

城市三維地圖攝像頭標注

• 封裝圖片標注方法

function addDeviceMarker(obj) {
    //通過名字區別創建不同的layer
    var floorLayer = map.getBuildingById(0).getFloor(1);  //獲取第一層的樓層對象
    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: 5,    			//距離地面高度
        showLevel: 20,  		//地圖縮放等級達到多少時隱藏,可選參數
        seeThrough: true,		//是否可以穿透樓層一直顯示,可選參數
        id: obj.id,   			//id，可自定義
        name: obj.name   		//name可自定義
    });
    im.deviceType = obj.type;         //自定義屬性-用於點擊事件中區分點擊的是什么類型的設備
    layer.addMarker(im);        //將imageMarker添加到圖層
    floorLayer.addLayer(layer); //將圖層添加到樓層對象
}

• 調用圖片標注方法展示攝像頭

var devices = data.devices;
for (let i = 0; i < devices.length; i++) {
    const obj = devices[i];
    addDeviceMarker(obj);//在地圖上添加設備marker
}

其中 devices 變量為前面獲取到的攝像頭設備數據。

• 效果展示

城市三維地圖人員位置標注

• 封裝圖片加文字標注

function addTextMarker(obj) {
    //通過名字區別創建不同的layer
    var floorLayer = map.getBuildingById(0).getFloor(1);  //獲取第一層的樓層對象
    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();//控制保安的移動
}

• 調用圖片加文字標注方法顯示人員信息

var baoan = data.data;
for (let i = 0; i < baoan.length; i++) {
    const obj = baoan[i];
    addTextMarker(obj); //在地圖上添加安保人員marker
}

其中 baoan 變量為前面獲取到的人員信息數據。

• 效果展示

城市三維地圖人員軌跡的移動

為達到人員在地圖中巡邏的效果，可以不斷移動人員標注在地圖中的位置，讓人員在地圖中動起來。本文通過使用定時器，並調用 moveTo 方法調整標注的坐標信息。

//控制人員的移動
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);
    }
}

效果展示如下圖所示：

城市三維地圖攝像頭標注播放監控信息

同時，為了達到攝像頭的監控效果，可以讓攝像頭播放指定的視頻，在實際開發過程中能夠達到對某一塊區域進行監控的效果。本文通過使用 ESMap 的氣泡標注 ESPopMarker 來實現該效果。

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

效果展示如下圖所示：

城市三維地圖設備圖層和人員圖層標注的顯示與隱藏

可以通過標注的 visible 屬性來控制標注的顯示與隱藏。

function hideOrShowLayer(params, isshow) {//params格式['device1','device2',...] isshow:true/fasle
    var floor = map.getBuildingById(0).getFloor(1);
    var res = floor.getLayersByNames(params);
    if (res && res.length > 0)
        res[0].visible = isshow;
};

總結

以上就是使用 ESMap 城市三維地圖實現設備圖層管理的全部過程，想要體驗更多 ESMap 城市三維地圖的功能，歡迎前往 ESMap 在線開發。