[发明专利]一种室内地图路径绘制方法

说明书

本发明公开了一种室内地图路径绘制方法，包括以下步骤：获取待绘制路径的所有路径点的信息，路径点的信息包括路径点的坐标以及路径点所在的楼层编号；依序将相邻的路径点连接起来，两个连接在一起的路径点形成一段路径段；将每一路径段都分别向自身的左右两侧平移，每一路径段平移后都在其两侧分别形成两个端点，分别将位于该路径段同一侧的两个端点相连，得到与该路径段对应的路径面：在每一路径段上至少取一个点作为箭头的顶点，在路径段上绘制箭头，标记路径的方向；将标有箭头的路径面进行拉伸和旋转，形成3D路径。本发明通过将表示路径的线段左右平移的方式，形成具有一定宽度的路径面，从而在实现不同宽度路径段的绘制，方便使用者辨识。

技术领域

本发明属于移动互联网电子信息技术领域，尤其涉及一种web端地图中3D路径的绘制方法。

背景技术

随着网络技术的飞速发展，web网络开发的技术也越来越成熟，网页的开发工具也越来越多样化，兼容性更加完善。three.js是面向物联网3D可视化开发的Javascript库，其提供了城市、园区、图标拖拽等搭建工具，是一种零门槛、高效率、低成本的开发各类物联网3D应用的实用工具。然而，由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制，在编写Three.js程序时，API方法中设置线模型(Line)对应线材质(LineBasicMaterial)的线宽属性(lineWidth)是无效的，即线宽只能设为1。这就导致了在开发图形界面时，无法绘制有宽度的线段，满足不了绘制3D路径的需求，使得界面上的路径只能用同样宽度的线条来展示，一方面不够美观，另一方面也无法让程序使用者清晰辨别线条的具体含义，容易造成误解。

发明内容

为了克服现有技术的不足，本发明的目的在于提供一种可以在3D地图应用上绘制不同宽度路径的方法，美化图形界面，方便程序使用者辨识。

本发明的目的采用以下技术方案实现：

一种室内地图路径绘制方法，包括以下步骤：

S1、获取待绘制路径的所有路径点的信息，路径点的信息包括路径点的坐标以及路径点所在的楼层编号；

S2、依序将相邻的路径点连接起来，两个连接在一起的路径点形成一段路径段；

S3、将每一路径段都分别向自身的左右两侧平移，每一路径段平移后都在其两侧分别形成两个端点，分别将位于该路径段同一侧的两个端点相连，得到与该路径段对应的路径面：

S4、在每一路径段上至少取一个点作为箭头的顶点，在路径段上绘制箭头，标记路径的方向；

S5、将标有箭头的路径面进行拉伸和旋转，形成3D路径。

更具体的，平移路径段时，路径段向两侧平移的距离相等。

更具体的，对于位于同一水平面上的路径段，平移路径段后在路径段两侧形成的端点根据该路径段两端的路径点的坐标以及平移距离计算确定；对于跨楼层的路径段，平移路径段后在路径段两侧形成的端点根据该路径段两端的路径点的坐标、平移距离以及楼层间高度计算确定。

更具体的，绘制箭头时，将路径段均分为若干等分，以每个等分点作为箭头的顶点绘制箭头。

相比现有技术，本发明的有益效果在于：本发明方法通过将线段偏移，计算出三维图形中平移后的各个点，然后将平移后的点连接形成面，并在线段上绘制表示方向的箭头，最后拉伸、旋转实现3D路径的效果。解决了现有web端地图开发工具无法绘制具有宽度的线段，导致路径功能不能很好表达的问题，方便地图使用者的使用。而且更具体的技术方案中，通过计算坐标点的方式来确定平移后的点和箭头断电，并封装为一个接口，后续只需要传入两点坐标即可得到其他坐标进行绘图，为开发程序提供方便调用的接口方法。

附图说明

图1为本发明方法的流程图；