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

概述

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

需求概述

  1. 定时接受推送的数据(tif格式);
  2. 数据的预处理与加工(png格式);
  3. 推送到前端并展示。

实现效果

  1. 列表内容

实现思路

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

实现代码

  1. pom配置
<dependency>
   <groupId>org.springframework</groupId>
  <artifactId>spring-websocket</artifactId>
  <version>${springmvc.version}</version>
 </dependency>
  1. 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>
  1. 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"};

    @Override
    protected void handleTextMessage(WebSocketSession session,
                                     TextMessage message) throws Exception {
        if(!session.isOpen()){
            timer.cancel();
            return;
        }
        super.handleTextMessage(session, message);
        session.sendMessage(message);
    }
    @Override
    public 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;
        }

        @Override
        public 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();
            }
        }
    }
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("Connection Closed!");
    }
}
  1. 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 {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request,
                                   ServerHttpResponse response, WebSocketHandler wsHandler,
                                   Map<String, Object> attributes) throws Exception {
        return super.beforeHandshake(request, response, wsHandler, attributes);
    }

    @Override
    public void afterHandshake(ServerHttpRequest request,
                               ServerHttpResponse response, WebSocketHandler wsHandler,
                               Exception ex) {
        super.afterHandshake(request, response, wsHandler, ex);
    }
}
  1. 前端代码
<!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;
    //判断当前浏览器是否支持WebSocket
    if ('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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java3y

从零开始写项目第二篇【登陆注册、聊天、收藏夹模块】

登陆模块目标 我要将其弄成类似的登陆,功能是要比较完善的。 ? 本来我是想做一步写一步的,但是发现这样文章就会太乱,因为要改的地方太多了。前面写过的,后边就被修...

1.2K80
来自专栏Rainbond开源「容器云平台」

Docker源码分析之容器日志处理与log-driver实现

17130
来自专栏FreeBuf

CTF挑战130分 | Rickdiculously 1.0

Vulnhub是一个提供各种漏洞环境的靶场平台,供安全爱好者学习渗透使用,大部分环境是做好的虚拟机镜像文件,镜像预先设计了多种漏洞,需要使用VMware或者Vi...

21330
来自专栏坚毅的PHP

困扰我多年的Connection reset问题

第一次出现:是thrift的python client去请求server,发现偶尔出现这个问题 第二次:接入第三方的api,去请求数据时,发现一个接入方的api...

6.6K60
来自专栏哈雷彗星撞地球

GCD API记录(二)

这是关于GCD的第二篇文章,GCD的API有100多个,通过快捷键Option + 单击,可以在Reference中的Grand Central Dispatc...

15530
来自专栏比原链

剥开比原看代码07:比原节点收到“请求区块数据”的信息后如何应答?

Gitee地址:https://gitee.com/BytomBlockchain/bytom

9520
来自专栏IT笔记

JAVA实现的微信扫描二维码支付

吐槽一下 支付项目采用springMvc+Dubbo架构实现,只对外提供接口。 话说,为什么微信支付比支付宝来的晚了那么一点,一句话,那一阵挺忙的,然后就没有时...

1.8K80
来自专栏Android群英传

Google I/O 之 Android App Bundles 是个啥

50920
来自专栏为数不多的Android技巧

Android插件化原理解析——广播的管理

在Activity生命周期管理 以及 插件加载机制 中我们详细讲述了插件化过程中对于Activity组件的处理方式,为了实现Activity的插件化我们付出了相...

11920
来自专栏以南小隐-数通那些事儿

锐捷设备主程序下升级方法

19140

扫码关注云+社区

领取腾讯云代金券