乐趣区

关于前端: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://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 服务器的一个文件夹下,就能够对外进行公布了。

欢送大家留言探讨。局部图片起源网络,如有疑问请私信分割我。

退出移动版