概述

前两天，发布了一片文章websocket实现GPS数据的实时推送与地图的展示，文章发出后引来了不少读者的关注，也有不少读者要求做进步一优化。本文应大家的要求，对上文的内容做一个优化，优化地方包括：

加入了GPS方向的展示；
加入了GPS精度的展示；
加入了GPS轨迹的展示；

效果

实现

node模拟数据

const io = require('nodejs-websocket')
let connection = null
let gps = {}for (let i = 0; i < 20; i++) {gps['gps' + i] = {offsetX: randomNum(-0.0001, 0.0001),offsetY: randomNum(-0.0001, 0.0001),accuracy: randomNum(50, 200)}
}// 执行websocket处理连接方法
io.createServer(con => {console.log('new connection...')connection = consendData()//处理客户端发送过来的消息// connection.on("text",function(data){//     console.log("接收到的客户端消息:" + data);// })//监听关闭connection.on("close", function (code, reason) {console.log("Connection closed")})//监听异常connection.on("error",() => {console.log('服务异常关闭...')})
}).listen(3000)function sendData() {connection.sendText(getGpsPositions())setTimeout(sendData, 1000)
}function getGpsPositions() {const [xmin, ymin, xmax, ymax] = [113.9875, 22.51947, 114.1066, 22.5711]let data = []for (let k in gps) {const d = gps[k]let {lon, lat} = dif(!d.lon) {d.lon = randomNum(xmin, xmax)d.lat = randomNum(ymin, ymax)d.rotate = 0} else {d.lon = d.lon + d.offsetXd.lat = d.lat + d.offsetYconst angle = Math.atan2((lat - d.lat), (d.lon - lon))d.rotate = angle * (180/Math.PI)}data.push({code: k,coords: [d.lon, d.lat],accuracy: d.accuracy + randomNum(-0.5, 0.5),rotate: d.rotate})}return JSON.stringify(data)
}function randomNum(min, max){return Math.random() * (max - min) + min
}

mapboxgl实现

  map.on('load', () => {const icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD+SURBVFhH7ZahDsIwFEUbFB5PMJgJHEFg8GDxfAAeyT4EQ8CA5DNQkPA/4zQ8yMsCC13bIehNTpYtffe2b1s3k5SUVFZhTA5DOY2ulhy1enBmEhdYQvtxuSER2IeixB4mMiS+CDuocM0NVtCRoXFEwEACqzjCVErCC/OdCqvCdmUNXSkNIwxHEuCC7cpcLPyF2UaZu/DsSiZW9YTBUAx98OsKxVdl5oPtSi62L73biMoK+XAxBwcxeiaz96H+LaDwpIxc8H8IKa6z+nCvIUbfrj78RoTZWMyriLcVY/xp9Xa1cT9GmGcSpmnuc0zQVkJ/9kOygMZ+yZKS/l3G3AESgItFg3XtsAAAAABJRU5ErkJggg=='const arrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVQ4T63TsQ0CMQyF4f/NgMQQ0CBR0FIx190cFIiWhhFoKdgEiRUeSoF0gO8cjkub+Evs2OLPpc9422dgBRwlNZn/BtjeApdOUJsh0QuuwKYWiYAFcAKWHaSR1EbpfAHlkO0ICdMJgV+QXmAAmUu6v9IZA8wkPVKgtg7TF7H25t4UbN+A9ahGmqqVD8AO2GdzUF45+I3ZJJb9JxbwRhEhB66xAAAAAElFTkSuQmCC'map.loadImage(icon, (error1, image1) => {if (error1) throw error1;map.addImage('red-arrow', image1);map.loadImage(arrow, (error, image) => {if (error) throw error;map.addImage('white-arrow', image);// 精度map.addSource('accuracy', {type: 'geojson',data: getGeojson([])});map.addLayer({id: "accuracy",type: "fill",source: "accuracy",paint: {"fill-color": 'red','fill-opacity': 0.1}});// 轨迹map.addSource('route', {type: 'geojson',data: getGeojson([])});map.addLayer({id: "route",type: "line",source: "route",'layout': {'line-cap': 'round','line-join': 'round'},'paint': {'line-color': '#09801a','line-width': 8}});map.addLayer({'id':'route-arrow','source': 'route','type': 'symbol','layout': {'symbol-placement': 'line','symbol-spacing': 50,'icon-image': 'white-arrow','icon-size': 0.5,'icon-allow-overlap': true}})// GPS 位置map.addSource('points', {type: 'geojson',data: getGeojson([])});map.addLayer({id: "circle","type": "symbol",source: "points",layout: {'icon-image': 'red-arrow','icon-size': 0.8,'icon-rotate': ['get', 'rotate'],'icon-allow-overlap': true}});ws = new WebSocket("ws://localhost:3000")ws.onopen = function() {console.log("当前客户端已经连接到websocket服务器")}let routeCoords = {}ws.onmessage = function (evt) {const data = JSON.parse(evt.data)let accuracyFeatures = []let routeFeatures = []let features = data.map(d => {const pt = {"type":"Feature","properties": d,"geometry":{"type":"Point","coordinates": d.coords}}if(!routeCoords[d.code]) routeCoords[d.code] = []routeCoords[d.code].push(d.coords)if(routeCoords[d.code].length > 1) routeFeatures.push(turf.lineString(routeCoords[d.code]))const circle = turf.buffer(pt, d.accuracy / 1000)accuracyFeatures.push(circle)return pt})map.getSource('accuracy').setData(getGeojson(accuracyFeatures))map.getSource('route').setData(getGeojson(routeFeatures))map.getSource('points').setData(getGeojson(features))};ws.onclose = function(){alert("连接已关闭...");};})});})function getGeojson(features) {return  {"type": "FeatureCollection","features": features}}

websocket实现GPS数据的实时推送与地图的展示(优化)相关推荐

html站内消息列表,WebSocket实现站内消息实时推送
关于WebSocket WebSocket是HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议.什么是全双工?就是在同一时间可以发送和接收消息,实现双向通信,比如打电话.WebSocke ...
物联网设备数据流转之数据如何实时推送至前端：WebSocket服务端推送
背景还记得,我们在物联网设备数据流转之实时数据从哪里来.如何转发:Node.js, MQTT, EMQX的WebHook这篇文章中,当 EMQX 的 WebHook 收到来自设备的消息时,我们当时只 ...
thymeleaf 消息推送_Springboot集成WebSocket+Thymeleaf+Echarts完成数据的实时推送
完成效果图: 项目准备提要: com.github.pagehelper pagehelper-spring-boot-starter 1.2.5 org.springframework.boot s ...
物联网设备数据流转之数据如何实时推送至前端：WebSocket前端接收
背景在实现 WebSocket 前端接收前,我们先说明白一件事,为什么要使用WebSocket? 这要从 HTTP 协议说起,我们知道 HTTP 协议只能由客户端发起,而且是短链接,这就会导致我们在 ...
winform调用websocket_C#基于websocket的前台及后台实时推送
实现步骤如下: 1.获取GoEasy appkey. 在goeasy官网上注册一个账号,并新建一个app. APP创建好后系统会为该app自动生成两个key, 一个既可以用来接收又可以用来推送 (su ...
消息推送服务器推pc,PC浏览器消息实时推送的解决方案 ——EPush推送平台
原标题:PC浏览器消息实时推送的解决方案 --EPush推送平台陈华研发工程师,2014入职去哪儿网.参与研发的EPush推送平台,增强了订单推送的时效性,提高了酒店自助订单处理率.最近负责CEQ ...
Azure SignaIR 将数据从服务器实时推送到Web 和移动浏览器、桌面应用、移动应用等客户端
本文章完整免费视频讲解地址: Azure SignaIR-向各种客户端实时推送常规的推送技术:Websocket /服务器发送事件 (SSE) /长轮询等其他技术. SignaIR存在了很长的历 ...
nodejs mysql数据推送_使用Nodejs实现实时推送MySQL数据库最新信息到客户端
下面我们要做的就是把MySQL这边一张表数据的更新实时的推送到客户端,比如MySQL这边表的数据abc变成123了,那使用程序就会把最新的123推送到每一个连接到服务器的客户端.如果服务器的连接的客户 ...
ASP.NET Core 使用SignalR后台实时推送数据给Echarts展示图表
什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

websocket实现GPS数据的实时推送与地图的展示(优化)

概述

效果

实现

node模拟数据

mapboxgl实现

websocket实现GPS数据的实时推送与地图的展示(优化)相关推荐

最新文章

热门文章