maptalks实时地图简单实践

2022-07-15 10:04:48 阅读：181 来源： 互联网

标签：console socket maptalks 地图实时 let target data 客户端

背景

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

代码实现

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)
})

效果展示

参考资料:

https://socketio.bootcss.com

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

标签：console,socket,maptalks,地图,实时,let,target,data,客户端
来源： https://www.cnblogs.com/polong/p/16480266.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

maptalks实时地图简单实践

背景

相关技术

Websocket介绍

Socket.IO介绍

代码实现

Websocket后端代码

地图代码

Websocket代码

效果展示