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

权利要求书

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

2.根据权利要求1所述的一种WEB前端绘制自动驾驶监控可视化地图的方法，其特征在于，所述步骤2和3中包括如下流程：S1-通过three.js创建渲染器；S2-通过three.js创建场景，该对象保存后续添加的车道线及堆场、岸桥区、十字路口、陆地、海域等边界、光源、以及照相机，等渲染所需；S3-通过three.js创建相机；其中，场景与相机创建之后用于渲染器使用。

3.根据权利要求2所述的一种WEB前端绘制自动驾驶监控可视化地图的方法，其特征在于，所述S2中创建场景时进行模型创建，导入包括带有车道线、堆场、岸桥区、十字路口、陆地、海域的边界投影坐标值，通过数据检索，判断不同边界区域及车道线进行相应的计算得到相应的点坐标通过代码将其点连成线，同时将不同边界区域的点连成面，并将其连成面的区域，设置相关颜色示意，将这些线以及面，添加到场景当中的视图层。

4.根据权利要求3所述的一种WEB前端绘制自动驾驶监控可视化地图的方法，其特征在于，创建模型时，通过平移变换方法translateX()通过three.js引擎转化为WebGL中CPU顶点着色器的矩阵变换程序，从而实现平移。

5.根据权利要求4所述的一种WEB前端绘制自动驾驶监控可视化地图的方法，其特征在于，所述流程S1中创建渲染器时，设置抗锯齿、背景视图颜色以及宽高比；所述流程S3中使用正投影相机，并设置镜头中心点为地图区域中心点。

6.根据权利要求5所述的一种WEB前端绘制自动驾驶监控可视化地图的方法，其特征在于，渲染器渲染时，将添加到场景当中的视图层通过three.js提供的方法进行渲染，并结合代码设置页面帧动画级别刷新。