maptalks实时地图简单实践

背景

    有时候我们想看到非常新的数据，数据更新间隔很短,就考虑websocket来进行请求数据，减少轮训减轻前端以及后端服务器压力。

相关技术

Websocket介绍

    WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。

    WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

Socket.IO介绍

    Socket.IO 是一个可以在浏览器与服务器之间实现实时、双向、基于事件的通信的工具库。 Socket.IO 能够在任何平台、浏览器或设备上运行，可靠性和速度同样出色。

代码实现

Websocket后端代码

    websocket后端代码，创建服务，监听固定的端口，监听连接和掉线、客户端发送数据，定时发送随机经纬度数据到前端。

let httpServer = require('http').Server();
let io = require('socket.io')(httpServer,{ cors: true });
httpServer.listen(3000);

function getGpsPositions() {
  const [xmin, ymin, xmax, ymax] = [108.5,18, 111.5, 20]
  let data = []
  for (let i = 0; i < 10; i++) {
    let lon=randomNum(xmin, xmax)
    let lat=randomNum(ymin, ymax)
    data.push(
      [lon, lat]
    )
  }
  return JSON.stringify(data)
}

function randomNum(min, max){
  return Math.random() * (max - min) + min
} 

// 服务端监听连接状态：io的connection事件表示客户端与服务端成功建立连接，它接收一个回调函数，回调函数会接收一个socket参数。
io.on('connection',  (socket)=>{
 
  console.log(socket.id+'客户端进入')
  // 注册to-server事件，接收客户端向服务端发送的数据
  socket.on('to-server', (data) => {
    console.log('客户端： ' + data)
  })

  let i=0;
  setInterval(function(){ 
    socket.emit('to-client', getGpsPositions()) 
    i=i+1
  }, 500);
  // 检测一个客户端断开连接
  socket.on('disconnect', () => {
    console.log(socket.id+'客户端离开')
  })
});

地图代码

    maptalks创建map示例，新建图层设置样式。

let map = new maptalks.Map('map', {
     center: [108, 19],
     zoom: 14,
     baseLayer: new maptalks.TileLayer('base', {
       urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
       subdomains: ['a','b','c','d'],
       attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
     })
   });
 let layer = new maptalks.PointLayer('point');;
 const groupLayer = new maptalks.GroupGLLayer('group', [layer]);
 groupLayer.addTo(map);

 const  style={symbol: {
   markerType: 'ellipse',
     markerFill: '#5b94eb',
     markerFillOpacity: 1,
     markerLineWidth: 0,
     markerLineColor: '#5b94eb',
     markerWidth: 10,
     markerHeight: 10
 }}
 layer.setStyle(style)

    Proxy监听数据是否有值，当有值后设置到图层里显示。

 let da={}
da = new Proxy(da, {
  get(target, key) {
    let result = target[key];

    return result;
  },
  set(target, key, value) {
    target[key] = value;
    let markers = [];
    layer.clear()
    value.forEach(i=>{
      // console.log(i)
      let coord=i;
      let pnt=new maptalks.Marker(coord)
      markers .push(pnt)
    })
    layer.addGeometry(markers);
    markers=null
    i=i+1
    console.log(new Date(),i)

    return  target
  },
  deleteProperty: function(target, prop) {
    delete  target[prop]
    return target;
    //
  }
})

Websocket代码

    socket.io连接后台，监听连接和断开事件、以及服务端向客户端发送数据。

let socket = io('http://127.0.0.1:3000');

// 注册connect事件，监听和服务是否建立了连接
socket.on('connect', function () {
  console.log(socket.id);
})

// 注册disconnect事件，监听和服务是否断开连接
socket.on('disconnect', function () {
  console.log('客户端和服务端断开连接了');
})
// 注册to-client事件，监听服务端向客户端传送的数据

socket.on('to-client', function (data) {
  da.data=JSON.parse(data)
})

效果展示

a3310ec2421e4198902ee626f458c78b_tplv-k3u1fbpfcp-watermark.png ab84e2876f6b4cfd8c7b109160214424_tplv-k3u1fbpfcp-watermark.gif

参考资料:

https://socketio.bootcss.com

https://baike.baidu.com/item/WebSocket/1953845