近年來，得益于物聯(lián)網(wǎng)、大數(shù)據(jù)、云計(jì)算、人工智能等新一代信息技術(shù)的發(fā)展，“數(shù)字孿生”概念也被廣泛的傳播，越來越多的應(yīng)用于智慧建筑、生產(chǎn)制造、智慧園區(qū)、水利水務(wù)、健康醫(yī)療等諸多領(lǐng)域。 如何運(yùn)用“數(shù)字孿生”概念延長企業(yè)生命周期，助力企業(yè)從2D管理向3D管理的升級(jí)？易景空間ESMap將數(shù)字孿生應(yīng)用于管理領(lǐng)域，推出“3D可視化服務(wù)”平臺(tái)，推動(dòng)企業(yè)數(shù)字化轉(zhuǎn)型，促進(jìn)數(shù)字化經(jīng)濟(jì)發(fā)展，目前已服務(wù)多個(gè)行業(yè)領(lǐng)域。

本文主要介紹的是ESMap 數(shù)字孿生三維地圖在園區(qū)中的實(shí)際應(yīng)用中發(fā)揮的作用，當(dāng)前市場(chǎng)對(duì)可視化效果的要求在逐步的增加，市場(chǎng)上常見的2D可視化效果慢慢的不能滿足客戶的視覺需求，我們以數(shù)據(jù)作為底層支持，通過定制化的模型建設(shè)和各種炫酷直觀的動(dòng)畫效果。針對(duì)園區(qū)管理中的監(jiān)控，停車，消防，交通等模塊與可視化相結(jié)合，打造一套完整的園區(qū)管控系統(tǒng)。

(相關(guān)資料圖)

園區(qū)監(jiān)控告警

通過監(jiān)控?cái)z像頭，監(jiān)測(cè)園區(qū)內(nèi)部是否有預(yù)警事件，預(yù)警事件通過異常圖標(biāo)進(jìn)行告警并可以查看當(dāng)前區(qū)域的監(jiān)控做到高效處理。

業(yè)務(wù)邏輯是首先監(jiān)聽地圖的點(diǎn)擊事件，判斷點(diǎn)擊的是否是我們自定義名稱的標(biāo)注，當(dāng)點(diǎn)擊到我們的監(jiān)控設(shè)備時(shí)，視角飛入監(jiān)控設(shè)備位置。

map.on("mapClickNode", (e) => {  if (e.name && e.name.includes("safety-tag")) {    map.cameraFlyTo({         directionAngle: 230.52,         pitchAngle: 42.44,         radius: 37.51,         time: 2,         x: e.mapCoord.x,         y: e.mapCoord.y,         callback:()=>{             this.showMonitor();         } 　　　})  }  })

當(dāng)視角飛入結(jié)束以后，我們?cè)俅蜷_氣泡標(biāo)注的主體內(nèi)容，顯示監(jiān)控畫面。

let marker = CommonTools.addPopMarker({    id: ID,    x: e.mapCoord.x,    y: e.mapCoord.y,    offset: e.mapCoord.z,    updateSize: true,    html: "
", // 這里傳空div, 氣泡內(nèi)容由外部組件創(chuàng)建    callback: (dom) => {            },});marker.bindName = ID;securityPopVueComponents[ID].currPopName = ID;securityPopMarkers[ID] = marker;securityPopMarkers[ID].onUpdatePosition((transformStyle, displayStyle) => {securityPopVueComponents[ID].popMarkerConfigs.transformStyle = transformStyle    securityPopVueComponents[ID].popMarkerConfigs.visible = (displayStyle.display === "none") ? false : true})　

園區(qū)熱力圖和交通效果圖

通過人流監(jiān)控和熱力圖效果相結(jié)合，實(shí)時(shí)監(jiān)測(cè)人流動(dòng)向與位置， 可以直接的展示園區(qū)中高密度區(qū)域位置，并且使用特效直觀展示園區(qū)附近的交通信息，讓人一目了然。

熱力圖代碼如下：

let marker = CommonTools.addPolygonMarker({    id: "heatmap_people_poly",    alpha: 1,    points: this.peopleRouteExtent.points,    offsetHeight: 1.5,    canPicked: false,})polygonLayer.addMarker(marker);// 初始化熱力marker.initHeatMap({     radius: 15, //熱點(diǎn)半徑     opacity: 0.7, //熱力圖透明度     mapOpacity: 0.8,     max: 100, //熱力點(diǎn)value的最大值     maxSize: 1024})

園區(qū)設(shè)備管理

通過晶體模型和設(shè)備模型相結(jié)合，清晰的展示出設(shè)備所在位置以及相關(guān)信息

代碼如下：

// 隱藏主體大樓建筑if(mainBuildingModules.building.visible) map.change3dOpacity({ name: "園區(qū)主體建筑", opacity: 0, time: 1, hideOnComplete: true })// 播放晶體大樓打開動(dòng)畫if(!mainBuildingModules.frame.visible) mainBuildingCrystalModel.playAnimation({ name: "building-open", loop: false, clampWhenFinished: true, time: 0.5 })// 配置晶體基本屬性esmap.ESEffectTool.models.setControlGroupObj({ key: "outline", modelName: "晶體", opacity: 0.2 });esmap.ESEffectTool.models.setControlGroupObj({ key: "Elevator", modelName: "晶體", visible: true });esmap.ESEffectTool.models.setControlGroupObj({ key: "air-conditioning", modelName: "晶體", visible: false });esmap.ESEffectTool.models.setControlGroupObj({ key: "lighting", modelName: "晶體", visible: false });// 切換部分模型和內(nèi)容的顯示和隱藏mainBuildingModules.frame.visible = true;mainBuildingModules.elevator.visible = true;mainBuildingModules.airCondition.visible = false;

定制化機(jī)房模型，更加直觀的了解機(jī)箱數(shù)據(jù)

首先是打開機(jī)房地圖，再通過我們特定封裝的機(jī)房SDK，通過數(shù)據(jù)綁定自動(dòng)識(shí)別點(diǎn)擊的機(jī)型展示對(duì)應(yīng)數(shù)據(jù)以及模型。

map.openMapById(esmapID) // 生成一個(gè)機(jī)房對(duì)象，傳入初始化配置 var config = {    maxShowServers: 1, //最大服務(wù)器顯示數(shù)量    cabinetModels: [{ modelName: "jigui-1.gltf", u: 42 }],    maxShowCabinets: 1, //最大機(jī)柜顯示數(shù)量    focusAreaMode:false,    cabinetfixDir: -1, } var $clusterManager = new deviceManager(config); // 給機(jī)房傳入機(jī)房數(shù)據(jù) _this.generateClusterData(); // 機(jī)房初始化 $clusterManager.init($configData);

園區(qū)巡邏

根據(jù)自定義的數(shù)據(jù)生成展示巡檢人員完整的巡檢路線，可以回溯歷史巡檢記錄，以及巡檢結(jié)果的匯報(bào)

代碼如下：

async inspectMove(){　　// 生成路徑的線標(biāo)注　　var lineStyle = {            lineWidth: 33,            alpha: 1,            offsetHeight: 1.5,            lineMode: esmap.ESLineType.PLANE,            lineType: esmap.ESLineType.TEXTURE,            url: "./image/path.png",            repeat: 0.4,            metalness: 0,            roughness: 1,            animateSpeed: 2   }   this.linemark = new esmap.ESLineMarker(this.map.focusFloorNum, this.inspection, lineStyle)   this.map.drawLineMark(this.linemark);    // 加載人物模型　　var marker3d = await this.loadManModel("renzoulu-03.gltf", { size: 2 });　　// 調(diào)用人物走動(dòng)動(dòng)畫　　marker3d.playAnimation({ name: "ren-run", loop: true });　　// 人物模型隨著線路移動(dòng)　　this.marker3d.movePath({            speed: 6,  //速度            // time:0.5,   //用時(shí)/s            loop: false,  //是否循環(huán)            path: this.inspection,  //路徑點(diǎn)集            offsetHeight: 2.5,            maxViewDistance: 12,            minViewDistance: 2,            followPosition: true,//第一人稱視角，跟隨移動(dòng)位置            followScaleLevel: 1,//第一人稱視角，跟隨縮放地圖大小            viewTiltAngle: this.map.maxPolarAngle,//第一人稱視角，地圖俯仰角            followAngle: true,  //第一人稱視角，根據(jù)路徑來動(dòng)態(tài)變換地圖角度            orientToPath: true,  //物體移動(dòng)時(shí)是否沿向路徑方向            angle: 0,  //物體移動(dòng)沿向路徑方向的角度            complete: () => {                      　　　 }   });}

人員體溫監(jiān)測(cè)

可以根據(jù)不同的場(chǎng)景完成不同的動(dòng)畫效果，我們支持使用設(shè)備和項(xiàng)目可視化界面進(jìn)行數(shù)據(jù)對(duì)接，展示模型動(dòng)畫以及異常狀態(tài)實(shí)時(shí)監(jiān)控報(bào)警做出反應(yīng)。

代碼如下：

// 創(chuàng)建一個(gè)人物模型var marker = new esmap.ES3DMarker({    x: x,            // x軸坐標(biāo)    y: y,            // y軸坐標(biāo)    id: 10002,       // 自定義id    name: "myTree",  // 自定義name    url: url,        // 模型的文件地址    size: 1,         // 尺寸    callback: function () {        // 模型添加到三維場(chǎng)景的回調(diào)函數(shù)    }});layer.addMarker(marker); // 人物執(zhí)行走動(dòng)的動(dòng)畫marker.playAnimation({    name: name,         // 動(dòng)畫名稱    loop: false,              // 是否循環(huán)執(zhí)行動(dòng)畫    callback: function(){     // 動(dòng)畫執(zhí)行完成回調(diào)        console.log("動(dòng)畫執(zhí)行完成")    },  })// 人物模型移動(dòng)marker.movePath({    speed: 10,         // 速度，設(shè)置此項(xiàng)則忽略time    loop: true,        // 是否循環(huán)執(zhí)行    path: points,      // 路徑點(diǎn)集    offsetHeight: 0,   // 移動(dòng)時(shí)的高度    complete: function() {    　　// 動(dòng)畫執(zhí)行完成回調(diào)事件    },    onMoving: function(e) {    　　// 路徑移動(dòng)實(shí)時(shí)回調(diào)    　　// 獲取模型移動(dòng)中的實(shí)時(shí)位置    　　console.log(e)    },});

以上就是智慧園區(qū)案例中的部分場(chǎng)景應(yīng)用，當(dāng)然還可以根據(jù)實(shí)際需求開發(fā)更多不同需求的場(chǎng)景和動(dòng)畫效果，所以智慧園區(qū)三維可視化場(chǎng)景的優(yōu)勢(shì)在于直觀的視覺效果，高效的反饋能力以及精美的建模效果，能夠建立合理高效的組織架構(gòu)，完善企業(yè)整體各項(xiàng)管理流程。想要了解更多有關(guān) ESMap 城市三維地圖的案例，歡迎前往ESMap 資源廣場(chǎng)。