CN113835703A - 一种web前端绘制自动驾驶监控可视化地图的方法 - Google Patents

一种web前端绘制自动驾驶监控可视化地图的方法 Download PDF

Info

Publication number
CN113835703A
CN113835703A CN202111136758.4A CN202111136758A CN113835703A CN 113835703 A CN113835703 A CN 113835703A CN 202111136758 A CN202111136758 A CN 202111136758A CN 113835703 A CN113835703 A CN 113835703A
Authority
CN
China
Prior art keywords
map
automatic driving
scene
web front
driving monitoring
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202111136758.4A
Other languages
English (en)
Other versions
CN113835703B (zh
Inventor
郑建立
张志正
刘鹤云
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Sinian Zhijia Technology Co ltd
Original Assignee
Beijing Sinian Zhijia Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Sinian Zhijia Technology Co ltd filed Critical Beijing Sinian Zhijia Technology Co ltd
Priority to CN202111136758.4A priority Critical patent/CN113835703B/zh
Publication of CN113835703A publication Critical patent/CN113835703A/zh
Application granted granted Critical
Publication of CN113835703B publication Critical patent/CN113835703B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/29Geographical information databases
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Remote Sensing (AREA)
  • Processing Or Creating Images (AREA)
  • Instructional Devices (AREA)

Abstract

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

Description

一种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提供的方法进行渲染,并结合代码设置页面帧动画级别刷新。
本发明的有益效果:通过three.js的调用,将三维世界坐标转换成屏幕坐标,使用点线面图形算法,计算数据并初始化,使其被浏览器渲染,展示监控地图画面,及车辆实时位置,车辆信息。本方法通过three.js结合轨道控制方法,并设置缩放大小及平移边界,使其达到能够对地图进行平移拖拽及缩放功能。
本发明可直观通过web浏览器观察自动驾驶车辆运行的可视化地图,结合超文本传输协议通信,可以更好的与车端控制关联起来,使其通过web浏览器监控车辆和操纵车辆,极大降低人工成本,实现一人多车监控操作。
附图说明
此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1为本发明实施例的流程图。
图2为本发明实施例的步骤2和3之间的流程图。
具体实施方式
以下将配合附图及实施例来详细说明本申请的实施方式,以便对本申请如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。
关于本发明的有关技术语言:
A:html:超级文本标记语言,其是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分
B:three.js:基于原生WebGL封装运行的三维引擎,是面向物联网3D可视化开发的开源Javascript库。WebGL是一种JavaScript API,用于在任何兼容的Web浏览器中呈现交互式3D和2D图形,且无需使用插件。Three.js作为WebGL框架中的佼佼者,由于它的易用性和扩展性,使得它能够满足大部分的开发需求。WebGL技术可实现用户与Web端的交互,通过对Web页面的开发可实现虚拟现实的目的。
C:json地图数据:(JSON只是一种数据结构,本方法json数据内容,包含堆场、岸桥区等边界的投影坐标)
D:投影坐标:为平面坐标。参考平面地是水平面,坐标单位:米;
如图1-2所示,本发明为一种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提供的方法进行渲染,并结合代码设置页面帧动画级别刷新。
本发明通过three.js的调用,将三维世界坐标转换成屏幕坐标,使用点线面图形算法,计算数据并初始化,使其被浏览器渲染,展示监控地图画面,及车辆实时位置,车辆信息。本方法通过three.js结合轨道控制方法,并设置缩放大小及平移边界,使其达到能够对地图进行平移拖拽及缩放功能。
具体的来说:
1-创建渲染器;
通过three.js创建渲染器,设置抗锯齿使其运行更加流畅,设置背景视图颜色,以及宽高比
2-创建场景;
通过three.js创建一个场景,该对象保存后续添加的车道线及堆场、岸桥区、十字路口、陆地、海域等边界、光源、以及照相机,等渲染所需。
3-创建照相机:
通过three.js创建相机,因为我们是二维平面地图,所以使用正投影相机,这样地图只跟角度有关,我们采用俯视角度,就可以观察地图全貌,并设置镜头中心点为地图区域中心点,确保浏览器渲染出的可视化地图,可以在页面中心展示。
4-设置中心点;
经纬度转墨卡托投影坐标后,墨卡托投影坐标的值太大,对应到three坐标系中,坐标距离原点太远,用户交互后,会有精度损失,于是我们通过计算算出中心点的坐标值,然后将墨卡托投影坐标的结果减去这个中心点的值。使其操作精度变高。
5-创建模型;
导入带有车道线及堆场、岸桥区、十字路口、陆地、海域等边界投影坐标值,通过数据检索,判断不同边界区域及车道线等进行相应的计算得到相应的点坐标通过代码将其点连成线,以及将不同边界区域的点连成面,并将其连成面的区域,设置相关颜色示意,将这些线以及面,添加到场景当中的视图层。
6-渲染画布
我们将添加到场景当中的视图层,通过three.js提供的方法进行渲染,并结合代码设置页面帧动画级别刷新,做到平滑渲染,实时更新。
7-平移缩放;
在我们方法中,场景及模型的原型中,有缩放属性,我们将其设置最大放大8倍,最小为浏览器分配给可视化地图的宽高,执行平移缩放变化,并不会改变自身绑定几何体的顶点坐标,会改变模型对应的模型矩阵,网格模型的平移变换方法translateX()会通过three.js引擎转化为WebGL中CPU顶点着色器的矩阵变换程序,从而实现平移。
8-车辆信息实时监控;
通过websoket通信协议,与后端进行通信,获取车辆信息,实时展示。
本发明可直观通过web浏览器观察自动驾驶车辆运行的可视化地图,结合超文本传输协议通信,可以更好的与车端控制关联起来,使其通过web浏览器监控车辆和操纵车辆,极大降低人工成本,实现一人多车监控操作。
如在说明书及权利要求当中使用了某些词汇来指称特定组件。本领域技术人员应可理解,硬件制造商可能会用不同名词来称呼同一个组件。本说明书及权利要求并不以名称的差异来作为区分组件的方式,而是以组件在功能上的差异来作为区分的准则。如在通篇说明书及权利要求当中所提及的“包含”为一开放式用语,故应解释成“包含但不限定于”。“大致”是指在可接收的误差范围内,本领域技术人员能够在一定误差范围内解决所述技术问题,基本达到所述技术效果。
上述说明示出并描述了本发明的若干优选实施例,但如前所述,应当理解本发明并非局限于本文所披露的形式,不应看作是对其他实施例的排除,而可用于各种其他组合、修改和环境,并能够在本文发明构想范围内,通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围,则都应在本发明所附权利要求的保护范围内。

Claims (6)

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提供的方法进行渲染,并结合代码设置页面帧动画级别刷新。
CN202111136758.4A 2021-09-27 2021-09-27 一种web前端绘制自动驾驶监控可视化地图的方法 Active CN113835703B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111136758.4A CN113835703B (zh) 2021-09-27 2021-09-27 一种web前端绘制自动驾驶监控可视化地图的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111136758.4A CN113835703B (zh) 2021-09-27 2021-09-27 一种web前端绘制自动驾驶监控可视化地图的方法

Publications (2)

Publication Number Publication Date
CN113835703A true CN113835703A (zh) 2021-12-24
CN113835703B CN113835703B (zh) 2024-03-15

Family

ID=78970874

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111136758.4A Active CN113835703B (zh) 2021-09-27 2021-09-27 一种web前端绘制自动驾驶监控可视化地图的方法

Country Status (1)

Country Link
CN (1) CN113835703B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114924680A (zh) * 2022-05-27 2022-08-19 北京斯年智驾科技有限公司 基于web前端可视化界面的港口无人驾驶地图生成方法
CN116027951A (zh) * 2023-03-29 2023-04-28 小米汽车科技有限公司 车辆采集数据的可视化方法、装置以及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108959434A (zh) * 2018-06-12 2018-12-07 中国科学院电子学研究所苏州研究院 一种多地理信息平台下的场景融合可视化方法
CN109059954A (zh) * 2018-06-29 2018-12-21 广东星舆科技有限公司 支持高精度地图车道线实时融合更新的方法和系统
CN109374002A (zh) * 2018-10-09 2019-02-22 北京京东尚科信息技术有限公司 导航方法和系统、计算机可读存储介质
CN111008422A (zh) * 2019-11-29 2020-04-14 北京建筑大学 一种建筑物实景地图制作方法及系统
CN111476882A (zh) * 2020-03-26 2020-07-31 哈尔滨工业大学 一种面向浏览器的机器人虚拟图形建模方法
CN112380309A (zh) * 2020-11-23 2021-02-19 深圳航天智慧城市系统技术研究院有限公司 一种基于WebGL的GIS数据可视化方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108959434A (zh) * 2018-06-12 2018-12-07 中国科学院电子学研究所苏州研究院 一种多地理信息平台下的场景融合可视化方法
CN109059954A (zh) * 2018-06-29 2018-12-21 广东星舆科技有限公司 支持高精度地图车道线实时融合更新的方法和系统
CN109374002A (zh) * 2018-10-09 2019-02-22 北京京东尚科信息技术有限公司 导航方法和系统、计算机可读存储介质
CN111008422A (zh) * 2019-11-29 2020-04-14 北京建筑大学 一种建筑物实景地图制作方法及系统
CN111476882A (zh) * 2020-03-26 2020-07-31 哈尔滨工业大学 一种面向浏览器的机器人虚拟图形建模方法
CN112380309A (zh) * 2020-11-23 2021-02-19 深圳航天智慧城市系统技术研究院有限公司 一种基于WebGL的GIS数据可视化方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
刘文斌 等: "GIS 技术在铁路应急救援智能决策中的应用研究", 中国安全科学学报, vol. 29, no. 2 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114924680A (zh) * 2022-05-27 2022-08-19 北京斯年智驾科技有限公司 基于web前端可视化界面的港口无人驾驶地图生成方法
CN114924680B (zh) * 2022-05-27 2023-08-01 北京斯年智驾科技有限公司 基于web前端可视化界面的港口无人驾驶地图生成方法
CN116027951A (zh) * 2023-03-29 2023-04-28 小米汽车科技有限公司 车辆采集数据的可视化方法、装置以及存储介质

Also Published As

Publication number Publication date
CN113835703B (zh) 2024-03-15

Similar Documents

Publication Publication Date Title
Behzadan et al. Augmented reality visualization: A review of civil infrastructure system applications
US9183666B2 (en) System and method for overlaying two-dimensional map data on a three-dimensional scene
US7990397B2 (en) Image-mapped point cloud with ability to accurately represent point coordinates
US8896595B2 (en) System, apparatus, and method of modifying 2.5D GIS data for a 2D GIS system
US20140267273A1 (en) System and method for overlaying two-dimensional map elements over terrain geometry
CN113835703B (zh) 一种web前端绘制自动驾驶监控可视化地图的方法
CN107369205B (zh) 一种移动终端城市二三维联动显示方法
US9286712B2 (en) System and method for approximating cartographic projections by linear transformation
US9269324B2 (en) Orientation aware application demonstration interface
CN101923462A (zh) 一种基于FlashVR的三维微型场景网络发布引擎
CN108133454B (zh) 空间几何模型图像切换方法、装置、系统及交互设备
CN109741431B (zh) 一种二三维一体化电子地图框架
CN113936121B (zh) 一种ar标注设置方法以及远程协作系统
Zollmann et al. Comprehensible and interactive visualizations of GIS data in augmented reality
CN110910504A (zh) 区域的三维模型的确定方法及装置
CN106980378A (zh) 虚拟显示方法和系统
TWI694355B (zh) 即時渲染影像的追蹤系統、追蹤方法以及非暫態電腦可讀取媒體
CN116485984A (zh) 全景影像车辆模型全局光照模拟方法、装置、设备及介质
CN116243831B (zh) 一种虚拟云展厅交互方法及系统
CN112667137B (zh) 户型图和房屋三维模型的切换显示方法及装置
CN112825198B (zh) 移动标签显示方法、装置、终端设备及可读存储介质
CN114170409A (zh) 一种三维模型的自动判断显示标注的方法
CN114445579A (zh) 物体标注信息呈现方法、装置、电子设备及存储介质
CN111599011A (zh) 基于WebGL技术的电力系统场景快速构建方法及系统
CN111681307A (zh) 一种应用于三维软件的动态三维坐标轴的实现方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant