地图)WebSocket地图实时更新位置"/>
(百度地图)WebSocket地图实时更新位置
###问题描述
今天在公司的平台业务有一个功能需求：要求实时显示设备的地理位置在地图上，设备可能是一台汽车，而我们使用的地图是百度地图API，这样难免会涉及到实时更新位置的问题，又由于是web，http不是一个持续型的协议，所以功能上难免有点和桌面应用不一样
###公司技术选型
首先是技术选型的问题，公司平台本身是javaWeb，所以不用说基本上都是SSM和SSH这系列的框架，公司使用javaWeb同时支持RPC 和 Restfull跨平台调用，由于我们底层还要一个视频流的控制是由C++实现的，又加上整个平台操作数据库的只有JAVA，所以不可避免的会有跨语言的业务产生。
既然我们的JavaWeb支持了这么多，直接使用servlet是不现实的，所以我们的业务必须和spring完美缝合，这样才能保证不会出现其它坑
###为什么选择WebSocket?
首先：当前的平台并非是大众平台，而且企业内部使用的信息化平台，所以无需考虑浏览器的兼容性，只要告诉客户公司，你只用这些浏览器就好了，所以这为使用websocket奠定了基础
其次：是关于服务器资源的问题，如果使用大量的Ajax轮询，必然会导致一段时间内产生大量的Http请求*（要知道其实Http请求的开销也挺大的）*
再者：对方公司希望地图的数据显示尽量同步，如果使用Ajax轮询难免会造成延迟，如果我们把Ajax轮询时间间期调短，必然会使Http请求大量增加，如果调长会导致数据延迟性较大，影响用户体验
最后：spring是能完全支持webSocket的，这样也使得使用WebSocket接入平台不会挖坑
###WebSocket接入过程
1、首先我先介绍一下springmvc接入WebSocket需要准备什么
maven依赖（我主要使用的是这个，当然也有其它工具包可以使用）
其次我们需要编写两个类
一个是：WebSocketConfig
另一个是：SystemWebSocketHandler
WebSocketConfig：
package com.zsl.WebSocket.oth;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;@Configuration
@EnableWebMvc
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {//webSocket注册@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {webSocketHandlerRegistry.addHandler(systemWebSocketHandler(),"/webSocketServer");}@Beanpublic WebSocketHandler systemWebSocketHandler(){return new SystemWebSocketHandler();}}
SystemWebSocketHandler：
package com.zsl.WebSocket.oth;import org.springframework.web.socket.*;
import java.util.ArrayList;
import java.util.Random;public class SystemWebSocketHandler implements WebSocketHandler {private static final ArrayList<WebSocketSession> users = new ArrayList<WebSocketSession>();;//链接成功@Overridepublic void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {System.out.println("ConnectionEstablished");users.add(webSocketSession);webSocketSession.sendMessage(new TextMessage("链接成功！"));}//收到消息@Overridepublic void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {System.out.println("handleMessage：" + webSocketMessage.toString());int max=175;int min=10;Random random = new Random();while(true) {int x = random.nextInt(max) % (max - min + 1) + min;int y = random.nextInt(max) % (max - min + 1) + min;System.out.println(x + "," + y);TextMessage msBack = new TextMessage(x + "," + y);webSocketSession.sendMessage(msBack);Thread.sleep(1000);}}//异常错误@Overridepublic void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {if(webSocketSession.isOpen()){webSocketSession.close();}users.remove(webSocketSession);}//断开链接@Overridepublic void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {users.remove(webSocketSession);}@Overridepublic boolean supportsPartialMessages() {return false;}}从代码中可以看出所有的websocket的请求路径都是在WebSocketConfig 中配置的，这个类就是我们整合Websocket和spring的配置类，我们也在这个类里面注册相应的webSocket的请求路径和对应的处理Handler，其中我们使用的注解的方式整合
在SystemWebSocketHandler中，重写的方法就是对应与websocket的处理
##我这里使用Java后台生成随机坐标然后前台通过WebSocket响应
###百度地图页面（样例）
代码：
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib uri="" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head> <title>百度地图API显示多个标注点带提示的代码</title> <!--css--> <style type="text/css">body, html, #allmap{width: 100%;height: 100%;overflow: hidden;margin: 0;}#l-map{height: 100%;width: 78%;float: left;border-right: 2px solid #bcbcbc;}#r-result{height: 100%;width: 20%;float: left;}</style><!--javascript--> <script src=".js" type="text/javascript"></script>
</head> <body><div id="allmap"> </div><script type="text/javascript">var websocket = new WebSocket('ws://localhost:8080/webSocketServer');websocket.onopen = function (evnt) {console.log('ws clint:open websocket');//发送消息var msg = '这个是来自浏览器的消息';console.log('ws clint:send msg:'+msg);websocket.send(msg);};websocket.onmessage = function (evnt) {console.log('ws client:get message ');var bp0 = evnt.data.split(",")[0];var bp1 = evnt.data.split(",")[1];makers[0].setPosition(new window.BMap.Point(bp0, bp1));/* makers[0].getPosition().lng = bp0;makers[0].getPosition().lat = bp1;*/};websocket.onerror = function (evnt) {console.log('ws client:error '+evnt)};websocket.onclose = function (evnt) {console.log('ws clent:close ')}var makers = new Array();var tempPoint = null;var markerArr = [ { id: "1", title: "名称：123", point: "113.264531,23.157003", address: "123456", tel: "12306" }, ]; var map; //Map实例 function map_init() { map = new BMap.Map("allmap");//第1步：设置地图中心点var point = new BMap.Point(113.312213, 23.147267); //第2步：初始化地图,设置中心点坐标和地图级别。 map.centerAndZoom(point, 1);//第3步：启用滚轮放大缩小 map.enableScrollWheelZoom(true); //第4步：向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //第5步：向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //第6步：向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //点击事件map.addEventListener("click", showInfo);function showInfo(e) {//鼠标点击显示经纬度//alert(e.point.lng + ", " + e.point.lat);alert("websocket触发");if(confirm("是否发送websocket？")==true){websocket.send("浏览器发送过来的消息");}tempPoint = e;}//第7步：绘制点 for (var i = 0; i < markerArr.length; i++) {var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var maker = addMarker(new window.BMap.Point(p0, p1), i); makers[i] = maker;addInfoWindow(maker, markerArr[i], i);} } var makers = new Array();// 添加标注 function addMarker(point, index) {var myIcon = new BMap.Icon(".png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); var marker = new BMap.Marker(point, { icon: myIcon });marker.enableDragging();map.addOverlay(marker); return marker; } function getActPoint(id){var marketpoint =makers[id].getPosition();alert(tempPoint.point.lng+" ,"+tempPoint.point.lat);}// 添加信息窗口 function addInfoWindow(marker, poi,e) { //pop弹窗标题 var title = '<p style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</p>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');html.push('</tr>'); html.push('</tbody></table>'); html.push('<div>');html.push('<button onclick=\"getActPoint('+poi.id+');\">显示当前位置</button>');html.push('</div>'); var infoWindow = new BMap.InfoWindow(html.join("*"), { title: title, width: 200 }); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("click", openInfoWinFun);marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 return openInfoWinFun; } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "=1.4&callback=map_init"; document.body.appendChild(load); } window.onload = map_load; </script>
</body>
</html>
最后效果：
欢迎大家指出问题
更多推荐
(百度地图)WebSocket地图实时更新位置
发布评论