基于WebGL的大批量目标加载与显示的方法技术

本发明专利技术公开了一种基于WebGL的大批量目标加载与显示的方法，包括步骤为：地图加载、目标获取与处理、目标成形、坐标转换、目标加载以及角度转换等步骤。本发明专利技术能够实现大批量目标加载与处理，十分贴合目前的海事页面端BS端应用。首先加载海图基础地图，通过TCP报文接收与解析AIS/雷达目标报文数据，并对接收数据进行融合处理形成统一目标。根据目标长度、宽度扩展目标坐标，构成边框坐标形成图元，着色成图形目标。通过地图事件绑定canvas，实现地图范围变化时目标重新渲染及目标动态数据变化时的目标动态更新。本发明专利技术极大的提升了目标加载数量与效率。

【技术实现步骤摘要】
基于WebGL的大批量目标加载与显示的方法
本专利技术涉及VTS系统数据可视化领域，特别是一种基于WebGL的大批量目标加载与显示的方法。
技术介绍
随着船舶交通管理系统(VTS，VesselTrafficManagementSystem)应用的不断深入与发展，基于网页端的交通管理系统被提出，且成为VTS应用的重点。传统的网页端船舶交通管理系统是以VML、SVG等方式实现在页面上加载与显示船舶目标，这种方式在界面上加载与显示目标数量有限。当大量船舶目标同时绘制时，会出现界面卡顿甚至进程死掉的现象，严重影响用户对系统的使用。甚至出现船舶目标未在地图上加载与显示的现象，出现“幽灵”船舶，从而导致监管不到位出现VTS交通事故的情况。因此，一种成套的，能够快速加载地图，流畅绘制与显示全量船舶目标，并能及时对船舶目标的动态数据进行更新的一种技术方法显得十分重要。本方法正是为了解决以上问题而设计的。
技术实现思路
本专利技术要解决的技术问题是针对上述现有技术的不足，而提供一种基于WebGL的大批量目标加载与显示的方法，该基于WebGL的大批量目标加载与显示的方法能在地图显示界面上同时加载与渲染大批量目标数据，并能流畅的实现批量目标加载与批量目标动态数据的更新。同时，还能从地图加载、目标接收与解析、目标坐标转换及生成图形和图元，最终通过WebGL方式在地图上实现目标叠加与动态更新，最终实现大批量目标加载与渲染。为解决上述技术问题，本专利技术采用的技术方案是：一种基于WebGL的大批量目标加载与显示的方法，包括如下步骤。步骤1，地图加载：从服务器中加载地图，并将加载的地图坐标转换为WebMercator投影。步骤2，目标获取与处理，具体包括如下步骤：步骤21、目标获取：根据雷达的起始区域对雷达探测到的目标进行起始跟踪，并确定目标船舶。步骤22、目标处理：对步骤21获取的目标船舶，进行移动距离的判断，去除坐标位置跳跃点。步骤3、目标成形，具体包括如下步骤：步骤31、获取目标信息：通过数据报文接收多个目标，形成多个目标信息。每个目标信息均包括静态信息和动态信息。动态信息包括目标坐标、航向、航速信息。静态信息包括目标的长度、宽度和批号信息。步骤32、目标成形：在WebGL中，根据步骤31获取的目标长度和宽度信息，对每个目标，逐一进行绘制，并形成多个船舶图标图形。步骤4、坐标转换：将步骤31中获取的每个目标坐标，均统一转换为像素坐标，并形成目标中心点的像素坐标(x′，y′)。步骤5、目标加载，具体包括如下步骤：步骤51、加载canvas层：在步骤1加载的地图界面上，加载一个canvas层，并使canvas层的像素大小与地图的像素大小保持一致，canvas层为像素坐标系。步骤52、目标缩放处理，具体包括如下步骤：步骤52A、确定缩放因子：根据步骤51中canvas层或地图界面的缩放效果，确定缩放因子(sx、sy)。其中，sx表示canvas层或地图界面中x轴的缩放比例，sy表示canvas层或地图界面中y轴的缩放比例。步骤52B、目标缩放处理：采用如下公式(2)，对步骤3形成的船舶图标图形所在的横坐标轴x和纵坐标轴y进行缩放处理。其中，公式(2)的表达式为：其中，x1为缩放后的船舶图标图形所在的横坐标轴，y1为缩放后的船舶图标图形所在的纵坐标轴。步骤53、目标加载：根据步骤4中形成的对应目标中心点的像素坐标(x′，y′)，在canvas层中进行定位。然后将步骤52缩放后的多个舶图标图形的中心点，加载显示在canvas层的定位点处，并使船舶图标图形的船头点朝向正北方向。步骤6，角度转换：将加载在地图上的船舶图标图形，通过动态旋转，使朝向正北方向的船头点旋转至对应航向。步骤22中的目标处理，具体包括如下步骤：步骤22A、设定目标移动距离偏差阈值。步骤22B、目标数据获取：通过TCP报文接收目标数据，并对目标数据进行解析，获取每个目标的连续实际目标坐标点、以及每个实际目标坐标点对应的时间点、航速和航向。步骤22C、计算下一时间点T2的理论目标坐标点：根据上一时间点T1的实际目标坐标点、航速和航向，以及两个时间点T1和T2之间相隔的时间值，计算得出下一时间点T2的理论目标坐标点。步骤22D、去除坐标位置跳跃点：将步骤22B中下一时间点T2所对应的实际目标坐标点与步骤22C中的理论目标坐标点，若两者的偏差值不超过步骤22A设定的目标移动距离偏差阈值，则认为下一时间点T2所对应的实际目标坐标点，为稳定目标数据。否则，认为下一时间点T2所对应的实际目标坐标点，为跳跃目标，则将其去除。步骤22A中，目标移动距离偏差阈值的计算方法，包括如下步骤：步骤22A1、计算目标移动距离偏差K：假设目标移动前P0时刻的真实坐标为P0(x0,y0),目前移动后P2时刻的真实坐标为P2(x2,y2)。在P2时刻，根据P0点时刻的位置、角度和速度进行计算的预判坐标为P2′(x2′，y2′)。则目标移动距离偏差K，采用如下公式，计算得出：步骤22A2、获取目标在连续n个时刻的真实坐标，其中n不小于20。步骤22A3、计算目标在连续n个时刻的预判坐标。步骤22A4、采用步骤22A1的方法，计算目标在连续n个时刻的目标移动距离偏差K。步骤22A5、对步骤22A4获得的n个目标移动距离偏差K，求取均值K0和标准偏差σ，得到目标移动距离偏差阈值KT，则KT＝K0±3σ，且KT＝0-45。步骤32中，对每个目标，进行绘制的方法，具体包括如下步骤：步骤32A、构建目标船舶的四个角点：基于WebGL，在像素坐标系中任意选择一个坐标点作为目标的中心点，根据目标的长度和宽度信息，以目标中心点向四周扩展轮廓，得到目标船舶的四个角点。步骤32B、构建目标船舶的船头点：在位于宽边两个角点的正前方，绘制一个船头点。步骤32C、绘制目标船舶的外框：将四个角点和一个船头点，依次首位连接，形成一个五边形的目标船舶外框。步骤32D、划分三角形：将步骤32C绘制的外框，划分为最小单元的三角形，形成需进行着色的图元。步骤32E、着色：开启显卡，在WebGL中，采用显卡对每个图元进行着色填充，形成船舶图标图形。步骤4中，坐标转换的具体过程，包括如下步骤：步骤41、地理坐标弧度转换：将获取的目标中心点地理坐标转换为弧度制，形成(rLog，rLat)。其中，rLog表示以弧度为单位的经度，东经为正，西经为负，rLat表示以弧度为单位的纬度，北纬为正，南纬为负。步骤42、转换为像素坐标：将步骤41形成的(rLog，rLat)坐标，按照如下公式(1)转换为像素坐标(x，y)，公式(1)的表达式为：其中，r表示地球半径。步骤6中，角度转换，具体包括如下步骤。步骤61、基准对齐本文档来自技高网...

【技术保护点】
1.一种基于WebGL的大批量目标加载与显示的方法，其特征在于：包括如下步骤：/n步骤1，地图加载：从服务器中加载地图，并将加载的地图坐标转换为WebMercator投影；/n步骤2，目标获取与处理，具体包括如下步骤：/n步骤21、目标获取：根据雷达的起始区域对雷达探测到的目标进行起始跟踪，并确定目标船舶；/n步骤22、目标处理：对步骤21获取的目标船舶，进行移动距离的判断，去除坐标位置跳跃点；/n步骤3、目标成形，具体包括如下步骤：/n步骤31、获取目标信息：通过数据报文接收多个目标，形成多个目标信息；每个目标信息均包括静态信息和动态信息；动态信息包括目标坐标、航向、航速信息；静态信息包括目标的长度、宽度和批号信息；/n步骤32、目标成形：在WebGL中，根据步骤31获取的目标长度和宽度信息，对每个目标，逐一进行绘制，并形成多个船舶图标图形；/n步骤4、坐标转换：将步骤31中获取的每个目标坐标，均统一转换为像素坐标，并形成目标中心点的像素坐标(x′，y′)；/n步骤5、目标加载，具体包括如下步骤：/n步骤51、加载canvas层：在步骤1加载的地图界面上，加载一个canvas层，并使canvas层的像素大小与地图的像素大小保持一致，canvas层为像素坐标系；/n步骤52、目标缩放处理，具体包括如下步骤：/n步骤52A、确定缩放因子：根据步骤51中canvas层或地图界面的缩放效果，确定缩放因子(sx、sy)；其中，sx表示canvas层或地图界面中x轴的缩放比例，sy表示canvas层或地图界面中y轴的缩放比例；/n步骤52B、目标缩放处理：采用如下公式(2)，对步骤3形成的船舶图标图形所在的横坐标轴x和纵坐标轴y进行缩放处理；其中，公式(2)的表达式为：/n...

【技术特征摘要】
20201204 CN 20201140940521.一种基于WebGL的大批量目标加载与显示的方法，其特征在于：包括如下步骤：
步骤1，地图加载：从服务器中加载地图，并将加载的地图坐标转换为WebMercator投影；
步骤2，目标获取与处理，具体包括如下步骤：
步骤21、目标获取：根据雷达的起始区域对雷达探测到的目标进行起始跟踪，并确定目标船舶；
步骤22、目标处理：对步骤21获取的目标船舶，进行移动距离的判断，去除坐标位置跳跃点；
步骤3、目标成形，具体包括如下步骤：
步骤31、获取目标信息：通过数据报文接收多个目标，形成多个目标信息；每个目标信息均包括静态信息和动态信息；动态信息包括目标坐标、航向、航速信息；静态信息包括目标的长度、宽度和批号信息；
步骤32、目标成形：在WebGL中，根据步骤31获取的目标长度和宽度信息，对每个目标，逐一进行绘制，并形成多个船舶图标图形；
步骤4、坐标转换：将步骤31中获取的每个目标坐标，均统一转换为像素坐标，并形成目标中心点的像素坐标(x′，y′)；
步骤5、目标加载，具体包括如下步骤：
步骤51、加载canvas层：在步骤1加载的地图界面上，加载一个canvas层，并使canvas层的像素大小与地图的像素大小保持一致，canvas层为像素坐标系；
步骤52、目标缩放处理，具体包括如下步骤：
步骤52A、确定缩放因子：根据步骤51中canvas层或地图界面的缩放效果，确定缩放因子(sx、sy)；其中，sx表示canvas层或地图界面中x轴的缩放比例，sy表示canvas层或地图界面中y轴的缩放比例；
步骤52B、目标缩放处理：采用如下公式(2)，对步骤3形成的船舶图标图形所在的横坐标轴x和纵坐标轴y进行缩放处理；其中，公式(2)的表达式为：



其中，x1为缩放后的船舶图标图形所在的横坐标轴，y1为缩放后的船舶图标图形所在的纵坐标轴；
步骤53、目标加载：根据步骤4中形成的对应目标中心点的像素坐标(x′，y′)，在canvas层中进行定位；然后将步骤52缩放后的多个舶图标图形的中心点，加载显示在canvas层的定位点处，并使船舶图标图形的船头点朝向正北方向；
步骤6，角度转换：将加载在地图上的船舶图标图形，通过动态旋转，使朝向正北方向的船头点旋转至对应航向。


2.根据权利要求1所述的基于WebGL的大批量目标加载与显示的方法，其特征在于：步骤22中的目标处理，具体包括如下步骤：
步骤22A、设定目标移动距离偏差阈值；
步骤22B、目标数据获取：通过TCP报文接收目标数据，并对目标数据进行解析，获取每个目标的连续实际目标坐标点、以及每个实际目标坐标点对应的时间点、航速和航向；
步骤22C、计算下一时间点T2的理论目标坐标点：根据上一时间点T1的实际目标坐标点、航速和航向，以及两个时间点T1和T2之间相隔的时间值，计算得出下一时间点T2的理论目标坐标点；
步骤22D、去除坐标位置跳跃点：将步骤22B中下一时间点T2所对应的实际目标坐标点与步骤22C中的理论目标坐标点，若两者的偏差值不超过步骤22A设定的目标移动距离偏差阈值，则认为下一时间点T2所对应的实际目标坐标点，为稳定目标数据；否则，认为下一时间点T2所对应的实际目标坐标点，为跳跃目标，则将其去除。


3.根据权利要求2所述的基于WebGL的大批量目标加载与显示的方法，其特征在于：步骤22A中，目标移动距离偏差阈值的计算方法，包括如下步骤：
步骤22A1、计算目标移动距离偏差K：假设目标移动前P0时刻的真实坐标为P0(x0，y0)，目前移动后...

【专利技术属性】
技术研发人员：孙硕，石志国，刘洋，董冰冰，卢鹏威，王林，贾俊辉，
申请(专利权)人：中船重工鹏力南京大气海洋信息系统有限公司，
类型：发明
国别省市：江苏;32