概述

本文讲述如何结合WebSocket和Openlayers4实现地图内容的实时刷新。

需求概述

定时接受推送的数据（tif格式）；
数据的预处理与加工（png格式）；
推送到前端并展示。

实现效果

列表内容

实现思路

结合WebSocket实现数据加工完后，将结果推送到前端，并在前端展示。在本实例钟，使用了后台的定时刷新机制，模拟数据推送、数据加工这个流程。

实现代码

pom配置

<dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId><version>${springmvc.version}</version></dependency>

SpringMVC中socket配置

    <!--websocket 配置--><bean id="websocket" class="com.lzugis.web.websocket.WebsocketEndPoint"/><websocket:handlers  allowed-origins="*"><websocket:mapping path="/websocket" handler="websocket"/><websocket:handshake-interceptors><bean class="com.lzugis.web.websocket.HandshakeInterceptor"/></websocket:handshake-interceptors></websocket:handlers>

WebsocketEndPoint.java

package com.lzugis.web.websocket;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.util.Timer;
import java.util.TimerTask;@RequestMapping("/websocket")
public class WebsocketEndPoint extends TextWebSocketHandler {private Timer timer;private static int imgIndex = 0;private final String[] imgList = {"1.png","2.png","3.png","4.png","5.png","6.png"};@Overrideprotected void handleTextMessage(WebSocketSession session,TextMessage message) throws Exception {if(!session.isOpen()){timer.cancel();return;}super.handleTextMessage(session, message);session.sendMessage(message);}@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {timer = new Timer(true);long delay = 0;OrderTimeTask orderTimeTask = new OrderTimeTask(session);timer.schedule(orderTimeTask, delay, 5000);// 设定指定的时间time,此处为5s}class OrderTimeTask extends TimerTask{private WebSocketSession session;public OrderTimeTask(WebSocketSession session){this.session = session;}@Overridepublic void run() {try {String imgPath = imgList[imgIndex];TextMessage textMessage = new TextMessage(imgPath);handleMessage(session,textMessage);imgIndex++;if(imgIndex==imgList.length)imgIndex=0;} catch (Exception e){e.printStackTrace();}}}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {System.out.println("Connection Closed！");}
}

HandshakeInterceptor.java

package com.lzugis.web.websocket;import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;import java.util.Map;public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {@Overridepublic boolean beforeHandshake(ServerHttpRequest request,ServerHttpResponse response, WebSocketHandler wsHandler,Map<String, Object> attributes) throws Exception {return super.beforeHandshake(request, response, wsHandler, attributes);}@Overridepublic void afterHandshake(ServerHttpRequest request,ServerHttpResponse response, WebSocketHandler wsHandler,Exception ex) {super.afterHandshake(request, response, wsHandler, ex);}
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>websocket</title><link rel="stylesheet" type="text/css" href="plugin/ol4/ol.css"/><style>body, #map {border: 0px;margin: 0px;padding: 0px;width: 100%;height: 100%;font-size: 13px;overflow: hidden;}#map{background: #000000;}</style>
</head>
<body>
<div id="map"></div>
<script src="plugin/ol4/ol.js"></script>
<script type="text/javascript">function getTdtSource(lyr) {var url = "http://t0.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}";return new ol.source.XYZ({url: url});}var imgExtent = [12602145.594234122,4499928.8932888079,13294552.826968284,5266752.9429073939];var base_lyr = new ol.layer.Tile({source: getTdtSource("vec_w")});var anno_lyr = new ol.layer.Tile({source: getTdtSource("cva_w"),zIndex:1});var imgLayer = new ol.layer.Image({source: null,opacity:0.6});var projection = new ol.proj.Projection({code: 'EPSG:3857',units: 'm'});var map = new ol.Map({controls: ol.control.defaults({attribution: false}),target: 'map',layers: [base_lyr,anno_lyr,imgLayer],view: new ol.View({projection: projection,center: [12865951.743328119, 4887378.449630305],zoom: 8})});var websocket = null;//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {websocket = new WebSocket("ws://localhost:8081/lzugis-web/websocket");}else {alert('当前浏览器 Not support websocket')}//连接发生错误的回调方法websocket.onerror = function () {console.log("WebSocket连接发生错误");};//连接成功建立的回调方法websocket.onopen = function () {console.log("WebSocket连接成功");};//接收到消息的回调方法websocket.onmessage = function (event) {setMessageInnerHTML(event.data);};//连接关闭的回调方法websocket.onclose = function () {console.log("WebSocket连接关闭");};//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function () {closeWebSocket();};function setMessageInnerHTML(data) {var imgSource = new ol.source.ImageStatic({url: "imgs/"+data,imageExtent: imgExtent});imgLayer.setSource(imgSource);}//关闭WebSocket连接function closeWebSocket() {websocket.close();}
</script>
</body>
</html>

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

结合WebSocket和Openlayers4实现地图内容的刷新相关推荐

用函数刷新页面内容比刷新页面要好
用函数刷新页面内容比刷新页面要好 app中有时需要更新页面的内容,这个时候可以选择刷新该页面但如果使用函数来更改页面的内容,效果会更好: 例如转载于:https://www.cnblogs.com ...
加入依赖后刷新_和平精英海岛图神秘野区加入！地图没显示刷新点在这儿
海岛老司机,不浪不会玩斯基.各位好,我是难言的小跟班--浪斯基随着和平精英新版本的更新,火力对决,P90冲锋枪,移动打药等新功能都已经加入到游戏中了,而新内容的上线也是受到了玩家的好评,尤其是火力对 ...
Firefox浏览器中，input输入框输入的内容在刷新网页后为何还在？
转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...
html中websocket获取数据,如何使用websocket从数据库中获取数据来刷新视图
在标准的Web交互中,客户端(即您的Web浏览器)向您的服务器发送请求.您的服务器收到请求,然后发送回您的浏览器中显示的信息,然后终止连接. WebSockets是一种在客户端和服务器之间创建持久,双 ...
span组件内容的刷新（笔记）
span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素.//赋值$("#spanid").html(value)//取值$("#spanid&q ...
清空div中的内容而不刷新整个页面_Vue中的$nextTick机制
nextTick 出现的前提因为Vue是异步驱动视图更新数据的,即当我们在事件中修改数据时,视图并不会即时的更新,而是等在同一事件循环的所有数据变化完成后,再进行视图更新.类似于Event Loop ...
Swiper：无限循环滚动时出现空白页/页面内容不刷新
问题描述使用Swiper插件实现列表的无限循环滚动效果,记录遭遇的两个问题:①滚动到某页时界面显示空白:②用id唯一标识列表中需要动态改变的值,在改变某一id的div内容后,页面显示内容并未改变问 ...
java 不刷新页面_java – 更新jsp页面的内容而不刷新
您应该考虑使用Ajax(jQuery是我的首选方法). 然后,这将触发一个控制器,该控制器将返回您想要的数据而不刷新页面. 所以,例如,如果你有一个login.jsp - Login Hello pl ...
高德地图android 缓存,高德地图定位不刷新，感觉有缓存
/** * 仅获取定位(获取地址和经纬度) */ self.getAddr = function (callback) { //判断平台(安卓平台采用高德定位,ios平台采用系统定位)amapLBS ...

结合WebSocket和Openlayers4实现地图内容的刷新

概述

需求概述

实现效果

实现思路

实现代码

结合WebSocket和Openlayers4实现地图内容的刷新相关推荐

最新文章

热门文章