CN105389167A - 一种Web端实时船舶目标显示方法 - Google Patents

Abstract

本发明公开了一种Web端实时船舶目标显示方法，包括如下步骤：步骤1，接收信息处理模块数据形成船舶目标数据集；步骤2，定时请求服务器数据，形成前端缓存；步骤3，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合；步骤4，通过HTML5Canvas绘制船舶目标；步骤5，调用Canvas接口绘制辅助内容本方法建立了四叉树索引，在每一个地图索引方格内存储了相应的目标数据，使得在10000批目标情况下，对于某一给定范围内点信息的快速增、删、改、查操作由几十秒缩减到ms级别，大大提高了服务端处理数据的速度。

Description

一种Web端实时船舶目标显示方法

技术领域

本发明属于一种B/S(Browser/Server浏览器/服务器)架构下的实时图像处理方法，特别是应用于船舶交通管理系统的船舶目标动态绘制的一种基于雷达、AIS融合的Web端实时船舶目标显示方法。

背景技术

船舶交通管理系统是指在一定水域内用以保证船行船舶安全的效率的管理系统。目前船舶交通管理显示系统主要是基于C/S的体系架构，需要在客户端安装并维护相关软件，因此存在着系统部署较为困难、难以升级维护以及多操作系统环境下难以兼容等问题。随着现代信息技术向着分散化、网络化、智能化的纵深领域发展，对今后的可视化系统提出了新的要求和挑战。基于B/S架构的系统利用Internet把数据和分析工具部署在服务端上，不需要在本地计算机上安装数据和应用程序，只需要把请求发送给服务器，服务器就会把数据和分析的结果传送给用户。只要服务端发生改变，客户端将得到即时更新，时刻保证数据的一致性。并且对任何计算机和操作系统都没有限制，真正实现跨平台的操作和应用。此外，还具有操作方便、配置使用简单、系统开发成本低、易于维护和升级等优点。

船舶交通管理系统关注的重点是船舶目标本身。港口内存在大量渔船以及未按要求加装AIS的船只，而船舶的航速、航向等信息都属于动态信息，随时会发生变化，因此需要在基于浏览器的web地图上显示10000批以上的实时刷新的目标。第三方平台提供了基于OpenLayers的开发接口，OpenLayers是目前最主流的web地图前端开发库，拥有众多商业和个人用户，被作为web地图开发的首选。但受制于web平台本身的瓶颈，其性能虽一直在改进却一直没有得到质的提升。经测试，在保证操作流畅的前提下，其最多只能支持1000批左右的目标，与需求差距较大。图形绘制一直是web的瓶颈，除了OpenLayers正在开发的HTML5版本外，目前国内外还没有使用HTML5技术的web地图开发库。

发明内容

发明目的：本发明所要解决的技术问题是针对现有技术的不足，提供一种Web端实时船舶目标显示方法。

为了解决上述技术问题，本发明公开了一种Web端实时船舶目标显示方法，包括以下步骤：

步骤1，接收信息处理模块数据形成船舶目标数据集；

步骤2，定时请求服务器数据，形成前端缓存；

步骤3，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合；

步骤4，通过HTML5Canvas绘制船舶目标；

步骤5，调用Canvas接口绘制辅助内容。

本发明步骤1包括：

步骤1a，JavaWeb服务端程序启动线程接收由信息处理模块发送的目标报文，建立船舶目标静态信息和船舶目标动态信息两个实体类结构来存放船舶目标信息，解析成目标静态信息和动态信息，进行过滤并存储；

步骤1b，建立船舶目标树管理类，在接收存储报文数据的同时，根据经纬度的地理范围对地图建立四叉树索引，在每一地图索引方格内存储了相应的目标数据，以提供对应的目标管理服务。

本发明步骤2中在浏览器端设置定时器，每隔2秒通过Ajax方式向服务器端请求船舶目标数据生成缓存，包括：

步骤2a，获取当前屏幕所表示的经纬度范围；

步骤2b，通过Ajax方式向服务器端请求屏幕范围内的目标数据；

步骤2c，根据返回的数据更新目标前端缓存；

步骤2d，将屏幕进行网格划分，根据目标数据的经纬度将其分组，形成前端目标数据缓存，用于事件处理使用。

本发明步骤3中，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合，用Openlayers做绘制的底图，在Openlayers的显示窗口上铺上HTML5的绘制层，两者共享屏幕位置；

在运行过程中，动态获取OpenLayers窗口的大小及位置，计算出其在浏览器中的绝对位置，然后初始化HTML5的Canvas画布对象，使其重合。

本发明步骤4包括：

步骤4a，遍历前端缓存，获取目标数据的实际经纬度坐标，将船舶目标的实际经纬度坐标与屏幕位置进行坐标转换；

步骤4b，获取当前海图的缩放比例，结合目标的真实船长宽数据，确定绘制方式；

获取目标的航行状态；

调用HTML5的Canvas画布对象接口绘制船舶目标符号。

本发明基于B/S的体系架构，借助HTML5在图形绘制方面的优势来改进OpenLayers的性能的思路。

本发明与现有技术相比，其优势体现在：

1)在服务器端接收数据，对于大批量的目标数据来说，查找给定某一范围的目标数据，普通情况下处理效率较低，影响后台的性能。本方法建立了四叉树索引，在每一个地图索引方格内存储了相应的目标数据，使得在10000批目标情况下，对于某一给定范围内点信息的快速增、删、改、查操作由几十秒缩减到ms级别，大大提高了服务端处理数据的速度。

2)采用普通的HTML在前台显示渲染大批量的目标需要耗费大量的前台性能，极其影响前台页面的流畅度及响应时间，通常只能实时显示几百批的目标。本方法采用了HTML5Canvas技术，并且对屏幕进行了分块，在此基础上生成前台缓存，使屏幕的渲染与数据的获取分离，减少了数据传输的带宽，获得了良好的性能，大大缩短了页面的响应时间，可以支持十万级别的点目标。本方法的这种数据与展示解耦的架构具备良好的可扩展性。

附图说明

下面结合附图和具体实施方式对本发明做更进一步的具体说明，本发明的上述和/或其他方面的优点将会变得更加清楚。

图1为实施例方案图；

图2为绘制方法总流程图；

图3为绘制算法流程图。

具体实施方式

本发明公开了一种Web端实时船舶目标显示方法，包括以下步骤：

步骤1，接收信息处理模块数据形成船舶目标数据集；

步骤2，定时请求服务器数据，形成前端缓存；

步骤3，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合；

步骤4，通过HTML5Canvas绘制船舶目标；

步骤5，调用Canvas接口绘制辅助内容。

本发明步骤1包括：

步骤1a，JavaWeb服务端程序启动线程接收由信息处理模块发送的目标报文，建立船舶目标静态信息和船舶目标动态信息两个实体类结构来存放船舶目标信息，解析成目标静态信息和动态信息，进行过滤并存储；

步骤1b，建立船舶目标树管理类，在接收存储报文数据的同时，根据经纬度的地理范围对地图建立四叉树索引，在每一地图索引方格内存储了相应的目标数据，以提供对应的目标管理服务。

本发明步骤2中在浏览器端设置定时器，每隔2秒通过Ajax方式向服务器端请求船舶目标数据生成缓存，包括：

步骤2a，获取当前屏幕所表示的经纬度范围；

步骤2b，通过Ajax方式向服务器端请求屏幕范围内的目标数据；

步骤2c，根据返回的数据更新目标前端缓存；

步骤2d，将屏幕进行网格划分，根据目标数据的经纬度将其分组，形成前端目标数据缓存，用于事件处理使用。

本发明步骤3中，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合，用Openlayers做绘制的底图，在Openlayers的显示窗口上铺上HTML5的绘制层，两者共享屏幕位置；

在运行过程中，动态获取OpenLayers窗口的大小及位置，计算出其在浏览器中的绝对位置，然后初始化HTML5的Canvas画布对象，使其重合。

本发明步骤4包括：

步骤4a，遍历前端缓存，获取目标数据的实际经纬度坐标，将船舶目标的实际经纬度坐标与屏幕位置进行坐标转换；

步骤4b，获取当前海图的缩放比例，结合目标的真实船长宽数据，确定绘制方式；

获取目标的航行状态；

调用HTML5的Canvas画布对象接口绘制船舶目标符号。

本发明基于B/S的体系架构，借助HTML5在图形绘制方面的优势来改进OpenLayers的性能的思路。

实施例

本实施例的目标是借助HTML5在图形绘制方面的优势来改进OpenLayers的性能来进行大批量船舶目标的动态绘制。本实施例的核心思想是用OpenLayers做绘制的底层，完成地图及地理相关的操作，包括地图的拼接、显示、缩放、漫游、测量等等，然后在OpenLayers的显示窗口上再铺上HTML5的绘制层，也就是canvas2D绘图窗口，两个窗口严格重合，并且HTML5绘制层背景设置为透明，两者共享屏幕位置，屏幕位置是二者最重要的连结点。

结合图1技术方案图，图1中中间的HTML5目标目标绘制部分是本方法进行的扩充，替代了下部分中的Openlayers的目标绘制功能，位置信息和事件调度模块是OpenLayers扩展的连结点。

结合图2方法总流程图，方法步骤如下：

第一步，接收信息处理模块数据形成船舶目标数据集。

1)JavaWeb服务端程序启动线程接收由信息处理模块发送的目标报文，建立船舶目标静态信息和船舶目标动态信息两个实体类结构来存放船舶目标信息，解析成目标静态信息和动态信息，进行过滤并存储；

2)建立船舶目标树管理类，在接收存储报文数据的同时，根据经纬度的地理范围对地图建立四叉树索引，在每一地图索引方格内存储了相应的目标数据，以提供相关的目标管理服务。

第二步，定时请求服务器数据，形成前端缓存。

在浏览器端设置定时器，每隔2秒通过Ajax方式向服务器端请求船舶目标数据生成缓存。具体过程如下：

1)获取当前屏幕范围所表示的经纬度范围；

2)通过Ajax方式向服务器端请求屏幕范围内的目标数据；

3)根据返回的数据更新目标前端缓存；

4)将屏幕进行网格划分，根据目标数据的经纬度将其分组，形成前端目标数据缓存，用于事件处理使用。

第三步，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合，用Openlayers做绘制的底图，在Openlayers的显示窗口上铺上HTML5的绘制层，两者共享屏幕位置。

使用CSS样式表确定OpenLayers窗口的大小和位置，然后在运行过程中，通过JS动态获取OpenLayers窗口的大小及位置(DIV的相对位置)，计算出其在浏览器中的绝对位置，然后根据这些信息初始化HTML5的Canvas画布对象，使其重合。

第四步，通过HTML5Canvas绘制船舶目标。

遍历前端目标数据缓存，根据船舶目标的相关信息，进行目标符号的绘制。结合图3绘制算法流程图，具体过程如下：

1)遍历前端缓存，获取目标数据的实际经纬度坐标，将船舶目标的实际经纬度坐标与屏幕位置进行坐标转换，将其转换为对应的屏幕坐标；

2)获取当前海图的缩放比例，结合目标的真实船长和船宽数据，确定绘制方式；

共有3种绘制级别：目标显示为点(大比例尺)；目标显示为三角符号(中等比例尺)；目标显示为真实轮廓(小比例尺，同时目标的屏幕显示长宽达到一定的阀值)

3)获取目标的航行状态：静止/锚泊、在航、转向；

4)调用Canvas接口绘制船舶目标符号；

第五步，绘制辅助内容.

获取配置参数状态，包括标牌是否显隐、是否有目标被选中、方向矢量线等；根据参数状态，调用Canvas相关接口绘制辅助内容。

本发明提供了一种Web端实时船舶目标显示方法，具体实现该技术方案的方法和途径很多，以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。本实施例中未明确的各组成部分均可用现有技术加以实现。

Claims (5)

1.一种Web端实时船舶目标显示方法，其特征在于，包括如下步骤：

步骤1，接收信息处理模块数据形成船舶目标数据集；

步骤2，定时请求服务器数据，形成前端缓存；

步骤3，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合；

步骤4，通过HTML5Canvas绘制船舶目标；

步骤5，调用Canvas接口绘制辅助内容。

2.根据权利要求1所述的一种Web端实时船舶目标显示方法，其特征在于，

步骤1包括：

步骤1a，JavaWeb服务端程序启动线程接收由信息处理模块发送的目标报文，建立船舶目标静态信息和船舶目标动态信息两个实体类结构来存放船舶目标信息，解析成目标静态信息和动态信息，进行过滤并存储；

步骤1b，建立船舶目标树管理类，在接收存储报文数据的同时，根据经纬度的地理范围对电子地图建立四叉树地图索引，在每一地图索引方格内存储了相应的目标数据，以提供对应的目标管理服务。

3.根据权利要求1所述的一种Web端实时船舶目标显示方法，其特征在于，步骤2中在浏览器端设置定时器，每隔2秒通过Ajax方式向服务器端请求船舶目标数据生成缓存，包括：

步骤2a，获取当前屏幕所表示的经纬度范围；

步骤2b，通过Ajax方式向服务器端请求屏幕范围内的目标数据；

步骤2c，根据返回的数据更新目标前端缓存；

步骤2d，将屏幕进行网格划分，根据目标数据的经纬度将其分组，形成前端目标数据缓存，用于事件处理使用。

4.根据权利要求1所述的一种Web端实时船舶目标显示方法，其特征在于，步骤3中，将HTML5绘制层的屏幕位置与OpenLayers显示窗口重合，用Openlayers做绘制的底图，在Openlayers的显示窗口上铺上HTML5的绘制层，两者共享屏幕位置；

在运行过程中，动态获取OpenLayers窗口的大小及位置，计算出其在浏览器中的绝对位置，然后初始化HTML5的Canvas画布对象，使其重合。

5.根据权利要求3所述的一种Web端实时船舶目标显示方法，其特征在于，步骤4包括：

步骤4a，遍历前端缓存，获取目标数据的实际经纬度坐标，将船舶目标的实际经纬度坐标与屏幕位置进行坐标转换；

步骤4b，获取当前海图的缩放比例，结合目标的真实船长宽数据，确定绘制方式；

获取目标的航行状态；

调用HTML5的Canvas画布对象接口绘制船舶目标符号。