一种可视化室内地图的网页绘制方法、绘制系统及设备技术方案

本发明专利技术公开了一种可视化室内地图的网页绘制方法、绘制系统及设备，所述绘制方法包含以下步骤：导入dxf格式图纸，对导入的dxf格式的图纸进行Java解析，并导出Json格式数据；对开源技术three.js封装，根据three.js的绘图原理，使用Javascript绘制绘制一个canvas画图；然后根据Json数据绘制对应的三维的楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、图标图层、展示图层、导航图层，并初始化指南针。生成的室内地图，可适用于不懂技术的大型公司的行政管理人员，通过地图的标记功能，可以清晰地了解空间的使用部门和使用人员，便于合理安排办公位置，也便于快速、精准找到特定的员工；通过导航功能能够以最短的距离找到指定的办公位置和员工。找到指定的办公位置和员工。找到指定的办公位置和员工。

【技术实现步骤摘要】
一种可视化室内地图的网页绘制方法、绘制系统及设备


[0001]本专利技术涉及将二维图转换为三维图的
，尤其涉及一种可视化室内地图的网页绘制方法、绘制系统及设备。

技术介绍

[0002]现有技术中，对室内空间进行标记（如空间用途、面积、空间使用部门、空间空位情况等）时，一般在纸质图纸上进行操作；或者通过一些绘图软件，如CAD、BIM等技术在桌面软件内部实现对室内空间信息的可视化展示。存在的问题是纸质文件维护困难；而现有的绘图软件过重，编辑修改需要专业的技术人员参与，不懂技术的使用人员（如需要掌握空间的使用和布置情况的行政管理人员）很难进行空间的标记和管理等操作。

技术实现思路

[0003]本专利技术的目的是提供了一种可视化室内地图的网页绘制方法，通过web端和移动端都能够对生成的室内地图进行快速的预览和操作，而且对使用人员要求低。具体采用的技术方案如下：一种可视化室内地图的网页绘制方法，包括：导入dxf格式图纸，所述dxf格式图纸通过CAD绘制，包括楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、空间编码图层、展示图层和导航图层；对导入的dxf格式的图纸进行Java解析，并导出Json格式数据；对开源技术three.js封装，根据three.js的绘图原理，使用Javascript绘制三维图形的基础元素；然后根据Json数据绘制对应的三维的楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、图标图层、展示图层、导航图层，并初始化指南针；添加环境光和点光源，模拟现实中的三维场景；添加交互事件。
[0004]根据Json数据中楼层围墙图层的x、y轴最大、最小坐标值，计算出图纸的中心坐标值，并绘制出三维的所述楼层围墙图层；三维的所述楼层围墙图层设置有一定高度，或者三维的所述楼层围墙图层设置有一定高度和颜色；或者三维的所述楼层围墙图层设置有一定高度、颜色和名称。
[0005]根据Json数据中空间外墙图层的x、y轴最大、最小坐标值，绘制出三维的所述空间外墙图层；三维的所述空间外墙图层设置有一定高度，或三维的所述空间外墙图层设置有一定高度和颜色，或三维的所述空间外墙图层设置有一定高度、颜色和名称。
[0006]查找Json数据中的单元空间图层数据，遍历每一项，分别绘制出对应的空间几何体，设置材质、编号和高度，得到三维的单元空间图层。
[0007]查找Json数据中的空间附加物图层数据，遍历每一项，分别绘制出对应的空间附加物的几何体，设置材质、编号和高度，得到三维的空间附加物图层。
[0008]绘制图标图层，用于标记会议室、电梯、卫生间等空间类型；实例化一个类
Textureloader，传入base64类型的图片文件，使用精灵材质SpriteMaterial渲染图标。
[0009]根据Json数据查找展示图层，绘制对应的几何体，设置材质和高度，得到三维的展示图形。
[0010]根据Json数据中导航图层数据，使用Dijkstra算法计算导航最短路径（支持任意2个空间单元格之间的导航）；初始化指南针，先初始化一个Textureloader，传入指南针的base64文件，使用精灵材质渲染，并计算其在画布中的位置。
[0011]通过CAD绘制的图纸中：楼层围墙图层，用于确定CAD图纸的基座，比如楼层的平面形状；空间外墙图层，用于明确空间的外墙范围，比如办公室的外墙范围；空间单元格图层，是指某一楼层下的最小颗粒度，一般是一个工位（包含办公桌椅，以及该工位所属范围的地面区域）；空间附加物图层，用于定义每个空间单元格拥有的物件，如办公桌椅；空间编码图层，为空间设置编码；展示图层一般是不可进行工位分配的物品，例如：承重柱、茶吧、前台、休息室、沙发、装饰建筑等；导航图层，用于生成点到点的室内导航路线。
[0012]使用Javascript绘制三维图形的基础元素，所述基础元素包括场景、相机、光线和渲染器。
[0013]Dijkstra算法，是通过贪心思想实现的，首先把起点到其他所有点的距离存下来找到最短的，然后松弛一次再找出最短的，所谓的松弛操作就是，遍历一遍看通过刚刚找到的距离最短的点作为中转点会不会更近，如果更近了就更新距离，这样把所有的点找遍之后就存下了起点到其他所有点的最短距离。
[0014]添加环境光和点光源，模拟现实中的三维场景，实现投影和近大远小的效果；最后给图纸添加各种交互事件，如鼠标单击、右击、缩放、拖动。
[0015]本专利技术还提供了一种可视化室内地图的绘制系统：包括图纸导入模块，用于导入dxf格式图纸，所述dxf格式图纸通过CAD绘制，包括楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、空间编码图层、展示图层和导航图层；图纸解析模块，用于对导入的dxf格式的图纸进行Java解析，并导出Json格式数据；可视化图纸生成模块，对开源技术three.js封装，根据three.js的绘图原理，使用Javascript绘制三维图形的基础元素；然后根据Json数据绘制对应的三维的楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、图标图层、展示图层、导航图层，并初始化指南针；三维场景模拟模块，添加环境光和点光源，模拟现实中的三维场景；交互事件添加模块，给图纸添加交互事件。
[0016]本专利技术还提供了一种计算机设备，包含存储器、处理器，所述存储器存储有通过本专利技术提供的可视化室内地图的网页绘制方法生成的室内地图。
[0017]本专利技术的有益效果：通过本专利技术提供的可视化室内地图的网页绘制方法生成的室内地图，可适用于不懂技术的大型公司的行政管理人员，通过WEB端或移动端对室内空间进行标记，可以清晰地了解空间的使用部门和使用人员，对于大型公司，也便于精准找到特定的员工；另外，通过导航功能能够以最短的距离找到指定的办公位置和员工。
附图说明
[0018]图1是本专利技术所述的可视化室内地图的生成方法的流程图；图2是一种实施例的室内地图的CAD图纸；图3是由图2中的CAD图纸生成的具有标记、导航功能的可视化室内地图的2D模式的示意图；图4是由图2中的CAD图纸生成的具有标记、导航功能的可视化室内地图的3D模式的示意图。
具体实施方式
[0019]结合图1~图3对本专利技术作进一步说明，一种可视化室内地图的网页绘制方法，包括：导入dxf格式图纸，所述dxf格式图纸通过CAD绘制，包括楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、空间编码图层、展示图层和导航图层；对导入的dxf格式的图纸进行Java解析，并导出Json格式数据；对开源技术three.js封装，根据three.js的绘图原理，使用Javascript绘制三维图形的基础元素；然后根据Json数据绘制对应的三维的楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、图标图层、展示图层、导航图层，并初始化指南针；添加环境光和点光源，模拟现实中的三维场景；添加交互事件。
[0020]添加环境光和点光源，模拟现实中的三维场景本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可视化室内地图的网页绘制方法，其特征在于：包含以下步骤：导入dxf格式图纸，所述dxf格式图纸通过CAD绘制，包括楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、空间编码图层、展示图层和导航图层；对导入的dxf格式的图纸进行Java解析，并导出Json格式数据；对开源技术three.js封装，根据three.js的绘图原理，使用Javascript绘制三维图形的基础元素；然后根据Json数据绘制对应的三维的楼层围墙图层、空间外墙图层、单元空间图层、空间附加物图层、图标图层、展示图层、导航图层，并初始化指南针；添加环境光和点光源，模拟现实中的三维场景；添加交互事件。2.根据权利要求1所述的可视化室内地图的网页绘制方法，其特征在于：所述三维的单元空间图层的绘制包含以下步骤：查找Json数据中的单元空间图层数据，遍历每一项，分别绘制出对应的空间几何体，设置材质、编号和高度，得到三维的单元空间图层。3.根据权利要求2所述的可视化室内地图的网页绘制方法，其特征在于：所述三维的空间附加物图层的绘制包括以下步骤：查找Json数据中的空间附加物图层数据，遍历每一项，分别绘制出对应的空间附加物的几何体，设置材质、编号和高度，得到三维的空间附加物图层。4.根据权利要求3所述的可视化室内地图的网页绘制方法，其特征在于：所述图标图层的绘制包括以下步骤：实例化一个类Textureloader，传入base64类型的图片文件，使用精灵材质...

【专利技术属性】
技术研发人员：刘军，王小赞，
申请(专利权)人：费哲软件无锡有限公司，
类型：发明
国别省市：