[发明专利]一种WEB前端绘制自动驾驶监控可视化地图的方法

说明书

本发明为一种WEB前端绘制自动驾驶监控可视化地图的方法，其特征在于，包括如下步骤：1‑导入地图底图JSON数据；2‑使用three.js参数初始化地图；3‑通过html渲染出车道线及各个区域；4‑浏览器渲染出可视化地图界面。本发明可直观通过web浏览器观察自动驾驶车辆运行的可视化地图，结合超文本传输协议通信，可以更好的与车端控制关联起来，使其通过web浏览器监控车辆和操纵车辆，极大降低人工成本，实现一人多车监控操作。

技术领域

本发明涉及web图形绘制技术领域、自动驾驶可视化领域，尤其涉及一种WEB前端绘制自动驾驶监控可视化地图的方法。

背景技术

近年来，随着自动驾驶日益崛起，港口内传统行业使用人工居多，由此导致工作环境差，工作强度大，对从业人员资格和经验要求高，即便付出高昂的人力成本，企业也很难招到工人，能否全面准确的监控车辆的运行状况及降低人力成本成为人们关注的焦点。

相关技术中，对车辆进行监控的方法是通过在车辆上安装定位模块，相关人员可以通过客户端与定位模块实现通信，从而远程获取车辆的位置信息；而这种监控的方法虽然可以获取到车辆位置，但是没有应用到网页端实时全面监控车辆运行，以及在web浏览器中直观展示车辆所处整个地图位置，没有融合相关车辆控制操作。

如专利公告号为CN109286787A公开了一种车辆监控系统，包括：信息采集终端，安装在车辆上，用于采集并处理车辆信息数据；移动数据传输模块，用于传输采集并处理后的所述车辆信息数据；服务器，用于接收所述移动数据传输模块传输的所述车辆信息数据；显示子系统，用于从所述服务器中读取所述车辆信息数据，并呈现给监察员；上述方案虽然弥补了传统的数据展现方法的劣势，但是其功能无法展现维度的多样性成为其短板，web浏览器多样化展示及集成车辆控制操作短板。

发明内容

本发明的目的在于提供一种WEB前端绘制自动驾驶监控可视化地图的方法，直观通过web浏览器观察自动驾驶车辆运行的可视化地图，结合超文本传输协议通信，可以更好的与车端控制关联起来，使其通过web浏览器监控车辆和操纵车辆，极大降低人工成本，实现一人多车监控操作。

为实现上述目的，本发明提供如下技术方案：一种WEB前端绘制自动驾驶监控可视化地图的方法，其特征在于，包括如下步骤：1-导入地图底图JSON数据；2-使用three.js参数初始化地图；3-通过html渲染出车道线及各个区域；4-浏览器渲染出可视化地图界面。

本发明进一步设置，所述步骤2和3中包括如下流程：S1-通过three.js创建渲染器；S2-通过three.js创建场景，该对象保存后续添加的车道线及堆场、岸桥区、十字路口、陆地、海域等边界、光源、以及照相机，等渲染所需；S3-通过three.js创建相机；其中，场景与相机创建之后用于渲染器使用。

本发明进一步设置，所述S2中创建场景时进行模型创建，导入包括带有车道线、堆场、岸桥区、十字路口、陆地、海域的边界投影坐标值，通过数据检索，判断不同边界区域及车道线进行相应的计算得到相应的点坐标通过代码将其点连成线，同时将不同边界区域的点连成面，并将其连成面的区域，设置相关颜色示意，将这些线以及面，添加到场景当中的视图层。

本发明进一步设置，创建模型时，通过平移变换方法translateX()通过three.js引擎转化为WebGL中CPU顶点着色器的矩阵变换程序，从而实现平移。

本发明进一步设置，所述流程S1中创建渲染器时，设置抗锯齿、背景视图颜色以及宽高比；所述流程S3中使用正投影相机，并设置镜头中心点为地图区域中心点。

本发明进一步设置，渲染器渲染时，将添加到场景当中的视图层通过three.js提供的方法进行渲染，并结合代码设置页面帧动画级别刷新。