易景地图(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://www.esmap.cn/dataapi/getdata”,
data: {“tid”:12333},
dataType: “json”, // 返回的数据类型 json
success: function (d) {
console.log(d.data)
}
});
2、Jsonp
$.ajax({
type: “get”,//JSONP 仅反对 GET 申请
url: “https://www.esmap.cn/dataapi/getdata”,
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://www.esmap.cn: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://www.esmap.cn/wss’);
// 建设 websocket 连贯胜利触发事件
webSocket.onopen = function () {
console.log(“websoket 服务器连贯胜利 …”);
};
// 接管服务端数据时触发事件
webSocket.onmessage = function (ev) {
console.log(ev.data);
};
webSocket.onclose = function (evt) {
console.log(“websoket 敞开 …”);
webSocket = null;
}
// 当连贯胜利后,可利用 send() 办法向服务器发送数据,例如:
// var dataObj = {‘id’: 123456};
webSocket.send(JSON.stringify(dataObj));
// send 数据类型能够是 字符串 或 二进制对象(Blob 对象、ArrayBuffer 对象)
四、离线部署
在线开发实现我的项目代码后,能够创立分享链接给别人进行查看,如果要合并到本人本地我的项目中,则须要进行离线打包下载。下载打包好的我的项目开发文件夹,解压到任何一种 WEB 服务器的一个文件夹下,就能够对外进行公布了。
欢送大家留言探讨。局部图片起源网络,如有疑问请私信分割我。