ESMap三維地圖開發流程

易景地圖（ESMap）是一款三維地圖線上開發平臺，常被用來做智慧城市資料視覺化的線上快速開發，廣泛應用於室內外定位導航和數字孿生技術場景。下面就簡單介紹一下ESMap三維地圖的開發流程：

一、場景搭建

進入官網，登入 ESMap地圖開發工具對房間、模型、路徑、樓層、POI等進行繪製

l 房間：自由繪製圖形、牆體、打洞，並拖動點編輯，支援CAD地圖識別；

l 模型：免費繪製個性化地圖，大量三維模型庫新增使用，對模型基本屬性和紋理貼圖進行調整，支援3dmax模型上傳等；

l 路徑：任意規劃導航線、導航點，實現室內外一體化融合定位、跨樓層導航；

l 樓層：具有多樓層編輯、背景編輯、地板編輯三個功能板塊，可以對樓梯位置進行打洞編輯；

l POI管理：提供給標準POI圖示庫，也支援自定義圖示上傳；

二、線上開發

使用 線上開發平臺將地圖模型新增到“我的專案”中，併為室內三維地圖或城市三維地圖新增互動事件。線上開發平臺主要包括以下四個功能區：

l 專案列表：對專案進行管理和編輯，提供快速分享、離線下載、歷史記錄等功能；

l 官方示例：提供室內地圖和三維地圖的功能示例程式碼參考，涉及地圖的顯示、標註、導航、特效、搜尋、事件、三維模型等，大量節省開發時間；

l 程式碼編輯：整合網頁JavaScript程式碼編輯器，不需要使用者在自己本地搭建web專案環境，線上完成專案；

l 預覽視窗：三維地圖實時編譯執行預覽視窗，可實時預覽三維地圖場景渲染效果。

三、資料對接

使用線上開發平臺，通過程式碼編輯的方式直接引入資料對接，與第三方物聯網系統或者自己後臺系統進行資料傳輸通訊。支援四種資料對接方式Ajax、Jsonp、MQTT、WebSocket。

1、Ajax

$.ajax({

type: "get",

url: " https://",

data: { "tid":12333 },

dataType: "json", // 返回的資料型別 json

success: function (d) {

console.log(d.data)

}

});

2、Jsonp

$.ajax({

type: "get",//JSONP 僅支援 GET 請求

url: " https://",

data: { "tid":12333 },

dataType: "jsonp", // 返回的資料型別 jsonp

jsonpCallback: "callbackA", // 設定回撥函式名 與返回資料的 函式名一致

success: function (d) {

console.log(d.data)

//回撥函式名不要重複（即 jsonpCallback 的設定不要重複），否則可能會導致回撥函式 undefined

}

});

3、MQTT

// 建立一個mqtt連線

var client = mqtt.connect("wss: http://:8088");

client.subscribe("/public/ESMapTEST/data1");

// 連線成功後傳送資料

client.on("message", function (topic, payload) {

console.log('data:' + payload);

});

// 關閉連線

client.end();

4、WebSocket

var webSocket = new WebSocket('wss:// http:///wss');

// 建立 websocket 連線成功觸發事件

webSocket.() {

console.log("websoket伺服器連線成功...");

};

// 接收服務端資料時觸發事件

webSocket.(ev) {

console.log(ev.data);

};

webSocket.(evt) {

console.log("websoket關閉...");

webSocket = null;

}

// 當連線成功後，可利用 send() 方法向伺服器傳送資料，例如：

// var dataObj = { 'id': 123456 };

webSocket.send(JSON.stringify(dataObj));

// send 資料型別可以是 字串 或 二進位制物件（Blob 物件、ArrayBuffer 物件）

四、離線部署

線上開發完成專案程式碼後，可以建立分享連結給他人進行檢視，如果要合併到自己本地專案中，則需要進行離線打包下載。下載打包好的專案開發資料夾，解壓到任何一種WEB伺服器的一個資料夾下，就可以對外進行釋出了。

歡迎大家留言討論。部分圖片來源網路，如有疑問請私信聯絡我。