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

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

(相關資料圖)

園區監控告警

通過監控攝像頭，監測園區內部是否有預警事件，預警事件通過異常圖標進行告警并可以查看當前區域的監控做到高效處理。

業務邏輯是首先監聽地圖的點擊事件，判斷點擊的是否是我們自定義名稱的標注，當點擊到我們的監控設備時，視角飛入監控設備位置。

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

當視角飛入結束以后，我們再打開氣泡標注的主體內容，顯示監控畫面。

let marker = CommonTools.addPopMarker({    id: ID,    x: e.mapCoord.x,    y: e.mapCoord.y,    offset: e.mapCoord.z,    updateSize: true,    html: "
", // 這里傳空div, 氣泡內容由外部組件創建    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})　

園區熱力圖和交通效果圖

通過人流監控和熱力圖效果相結合，實時監測人流動向與位置， 可以直接的展示園區中高密度區域位置，并且使用特效直觀展示園區附近的交通信息，讓人一目了然。

熱力圖代碼如下：

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, //熱點半徑     opacity: 0.7, //熱力圖透明度     mapOpacity: 0.8,     max: 100, //熱力點value的最大值     maxSize: 1024})

園區設備管理

通過晶體模型和設備模型相結合，清晰的展示出設備所在位置以及相關信息

代碼如下：

// 隱藏主體大樓建筑if(mainBuildingModules.building.visible) map.change3dOpacity({ name: "園區主體建筑", opacity: 0, time: 1, hideOnComplete: true })// 播放晶體大樓打開動畫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 });// 切換部分模型和內容的顯示和隱藏mainBuildingModules.frame.visible = true;mainBuildingModules.elevator.visible = true;mainBuildingModules.airCondition.visible = false;

定制化機房模型，更加直觀的了解機箱數據

首先是打開機房地圖，再通過我們特定封裝的機房SDK，通過數據綁定自動識別點擊的機型展示對應數據以及模型。

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

園區巡邏

根據自定義的數據生成展示巡檢人員完整的巡檢路線，可以回溯歷史巡檢記錄，以及巡檢結果的匯報

代碼如下：

async inspectMove(){　　// 生成路徑的線標注　　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 });　　// 調用人物走動動畫　　marker3d.playAnimation({ name: "ren-run", loop: true });　　// 人物模型隨著線路移動　　this.marker3d.movePath({            speed: 6,  //速度            // time:0.5,   //用時/s            loop: false,  //是否循環            path: this.inspection,  //路徑點集            offsetHeight: 2.5,            maxViewDistance: 12,            minViewDistance: 2,            followPosition: true,//第一人稱視角，跟隨移動位置            followScaleLevel: 1,//第一人稱視角，跟隨縮放地圖大小            viewTiltAngle: this.map.maxPolarAngle,//第一人稱視角，地圖俯仰角            followAngle: true,  //第一人稱視角，根據路徑來動態變換地圖角度            orientToPath: true,  //物體移動時是否沿向路徑方向            angle: 0,  //物體移動沿向路徑方向的角度            complete: () => {                      　　　 }   });}

人員體溫監測

可以根據不同的場景完成不同的動畫效果，我們支持使用設備和項目可視化界面進行數據對接，展示模型動畫以及異常狀態實時監控報警做出反應。

代碼如下：

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

以上就是智慧園區案例中的部分場景應用，當然還可以根據實際需求開發更多不同需求的場景和動畫效果，所以智慧園區三維可視化場景的優勢在于直觀的視覺效果，高效的反饋能力以及精美的建模效果，能夠建立合理高效的組織架構，完善企業整體各項管理流程。想要了解更多有關 ESMap 城市三維地圖的案例，歡迎前往ESMap 資源廣場。