您现在的位置: 首页 > 在线开发文档 > 三维地图可视化项目在线开发文档


三维地图可视化平台项目在线开发数据对接

在线开发平台是易景空间地图开发的在线 3D 可视化应用开发平台,支持以下四种数据对接方式,可与第三方物联网系统或者自己后台系统进行数据传输通信。

方法 数据对接方式 技术说明
1 Ajax 通过浏览器的 XMLHttpRequest 对象向服务器发送 HTTP 请求,得到服务器返回的数据后进行数据处理的数据交互方式
2 JSONP JSON请求解决不了跨域名的问题,使用此方法可以让网页从别的网域获取资料,主要解决跨域名访问数据-Cross-origin resource sharing(CORS)
3 MQTT MQTT是一个轻量级协议,使用MQTT协议的中心是broker(服务器/代理),客户端通过订阅消息和发布消息进行数据交互
4 WebSocket 服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限制,即不存在跨域问题

在线开发平台环境中,可以通过在网页中直接引入
<script src="https://www.esmap.cn/escopemap/plug-in/jquery/jquery-2.1.4.min.js"></script>
使用 JQurey 封装的 Ajax 方法进行数据对接,例如:


$.ajax({
    type: "get",
    url: "https://www.esmap.cn/dataapi/getdata",
    data: { "tid":12333 },
    dataType: "json", // 返回的数据类型 json
    success: function (d) {
        console.log(d.data)
    }
});

在线开发平台环境中,可以通过在网页中直接引入
<script src="https://www.esmap.cn/escopemap/plug-in/jquery/jquery-2.1.4.min.js"></script>
由于 JQuery 的 Ajax 请求对 JSONP 进行了封装,因此我们可以直接使用相关方法请求 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 
  }
});

在线开发平台环境中,可以通过在网页中直接引入
<script src="https://www.esmap.cn/escopemap/plug-in/mqtt/mqtt.js"></script>
由于 JQuery 的 Ajax 请求对 JSONP 进行了封装,因此我们可以直接使用相关方法请求 JSONP 数据,例如:


  // 创建一个mqtt连接
  var client = mqtt.connect("wss:www.esmap.cn:8088");
  client.subscribe("/public/ESMapTEST/data1");
  // 连接成功后发送数据
  client.on("message", function (topic, payload) {
      console.log('data:' + payload);
     
  });
  // 关闭连接
  client.end();

WebSocket 是 HTML5 一种新的协议,实现了浏览器与服务器之间的全双工通信。
WebSocket 最大的优点在,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限制,即不存在跨域问题。

在线开发平台环境中,可以通过在网页中直接引入
<script src="https://www.esmap.cn/escopemap/plug-in/websocket/websocket.js"></script>


  var webSocket = new WebSocket('wss://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 对象)