一种将二维矢量进行三维渲染的方法
阅读说明：本技术 一种将二维矢量进行三维渲染的方法 (Method for three-dimensional rendering of two-dimensional vector ) 是由 宋江 于 2021-07-21 设计创作，主要内容包括：本发明公开了一种将二维矢量进行三维渲染的方法,包括以下步骤：S1、从shp文件中获取shp数据,对shp数据进行数据坐标转换,转换成build.json文件并保存所有数据目录；S2、根据建筑信息的字段内容,对建筑进行归类；S3、读取build.json文件,获取矢量面坐标点和高度信息；S4、根据矢量面坐标点和高度信息,计算三维建筑的顶点要素信息；S5、根据三维建筑得顶点要素信息、样式分类信息、排列顶点信息、颜色信息和法向量信息创建分组,根据分组创建一个bufferGeometry对象；S6、获取buffGeometry对象对应的坐标信息；S7、根据bufferGeometry和材质数组materials创建一个mesh对象,并根据坐标信息添加到三维场景中进行渲染。(The invention discloses a method for three-dimensionally rendering a two-dimensional vector, which comprises the following steps: s1, acquiring shp data from the shp file, performing data coordinate conversion on the shp data, converting the shp data into build. S2, classifying the buildings according to the field content of the building information; s3, reading the build. S4, calculating the vertex element information of the three-dimensional building according to the coordinate point and the height information of the vector surface; s5, creating a group according to the three-dimensional building, namely the vertex element information, the style classification information, the arrangement vertex information, the color information and the normal vector information, and creating a buffer geometry object according to the group; s6, acquiring coordinate information corresponding to the buffGeometry object; s7, creating a mesh object according to the bufferegeometry and the material array materials, and adding the mesh object into the three-dimensional scene for rendering according to the coordinate information.)
技术领域
本发明涉及可视化
技术领域
，具体来说，涉及一种将二维矢量进行三维渲染的方法。背景技术
随着GIS可视化技术的不断发展，针对城市级三维建筑的可视化展示越来越广泛，可以对不同类型的建筑，使用不同的风格进行可视化展示；在webgis中以页面为载体进行高效的建筑预览、流畅操作。
针对三维建筑数据的可视化展示的模型支撑，目前有以下几种方式：
1、无人机采集倾斜摄影数据；
2、激光点云模型数据；
3、人工建模数据；
4、矢量房屋面根据建筑高度属性进行高度拉伸展示。
然而以上倾斜摄影、激光点云、人工建模等数据的采集成本都比较高，一个城市级的数据基本都是在千万级的采集成本上。一般的项目是完全无法承受的。采用矢量房屋面根据建筑高度自动拉伸的方式，然后根据不同的建筑条件进行差异化风格渲染成为目前最为节约成本的一种可视化展示方式。如何能将城市级的矢量建筑进行三维拉伸并进行高效的差异化风格展示则是我们主要解决的问题。
针对上述问题，目前采用最多的就是使用相关的软件对矢量建筑进行3dtiles的数据生产，生产出来的数据则是真实的三维对象数据，可以在数据中存储数据样式信息，然后用cesium三维地图引擎进行可视化渲染。然而，首先这种方式需要对矢量建筑先转换成3D模型缓存，风格要预先设置，不能在软件中随意的对其进行风格化表达；其次cesium对这种3Dtiles的数据渲染的性能还是无法满足普通PC机的要求，会出现卡顿问题，最后cesium引擎的可视化渲染和threejs引擎相比还是有一定的差距。
因此，亟需一种将二维矢量进行三维渲染的方法解决上述技术问题。
发明内容
为解决现有技术中存在的问题，本发明提供一种将二维矢量进行三维渲染的方法，具有更高的建筑渲染性能。
为实现上述目的，本发明采用的技术方案是：一种将二维矢量进行三维渲染的方法，包括以下步骤：
S1、通过处理器从shp文件中获取shp数据，并在存储介质中建立对应的第一存储空间，将获取的shp数据保存到所述第一存储空间中；按照空间范围对所述保存的shp数据进行切割，对shp数据进行数据坐标转换，转换成build.json文件并在存储介质中建立对应的第二存储空间，将build.json文件的所有数据目录保存到所述第二存储空间中；
S2、根据建筑信息的字段内容，对建筑进行归类，获取建筑的风格化参数和归类条件并保存；
S3、处理器根据第二存储空间中保存的build.json文件数据目录读取build.json文件，获取build.json文件中每一个切片文件pbf的内容，并解析成geojson数据，获取坐标原点，并获取每一个矢量面要素，根据步骤S2中建筑的归类条件对矢量面要素进行分类，获取矢量面坐标点和高度信息；
S4、根据矢量面坐标点和高度信息，计算三维建筑的顶点要素信息；
S5、根据三维建筑得顶点要素信息、样式分类信息、排列顶点信息、颜色信息和法向量信息创建分组，根据分组在存储介质中创建一个bufferGeometry对象；
S6、获取buffGeometry对象对应的坐标信息；
S7、根据bufferGeometry和材质数组materials创建一个mesh对象，并根据坐标信息添加到三维场景中进行渲染。
在本技术方案中，首先进行数据处理，将每个切片选取一个原点坐标，所有的矢量切片坐标的描述都是原有的经纬度坐标对应在threejs的坐标与原点坐标对应threejs的坐标差。接着将单个切片中的所有矢量面创建生成一个mesh对象，且可以根据不同的条件进行风格化的设置。再将顶点信息存储采用无索引的有序存储方式进行信息存储，提供初始化模型创建速度。最后根据二维矢量面通过高度拉伸为三维定位信息。
在进一步的技术方案中，步骤S1包括：
根据空间范围将shp文件中的shp数据切割成若干份矢量要素的集合数组，并为每一个集合数组指定一个固定的坐标原点O(lon,lat)；
建立矢量面，并确定坐标原点O(lon,lat)的位置，将矢量面中的点标记为A(lon,lat)，根据经纬度坐标和threejs的内部坐标转换关系，将A点全部转换为相对O(lon,lat)原点的相对偏移坐标A1(x,y)，x、y为A点和O对应threejs的坐标的横纵坐标差；
将坐标原点0、矢量点A和转换后坐标A1转换为geojson数据，再转换成pbf数据，将所有的切片文件路径自动记录在一个json中，记为build.json。
在本技术方案中，根据地图的指定范围，将shp文件中的数据，切割成若干份矢量要素的集合，并且为每一个集合数组指定一个固定的坐标原点O(lon,lat)，将每个矢量面中的点标记为A(lon,lat)，然后根据经纬度坐标和threejs的内部坐标转换关系，将A点全部转换为相对O(lon,lat)原点的相对偏移坐标A1(x,y)；x、y为A点和O对应threejs的坐标的横纵坐标差。然后将这些信息转换成geojson，再转换成pbf数据，将所有的切片文件路径自动记录在一个json中，为build.json。这样可以减少数据文件的大小，便于网络传输；也可以避免所有的经纬度坐标在软件层做转换，来降低初始化性能损耗。
在进一步的技术方案中，步骤S2包括：
根据风格样式创建对应的建筑材质对象，一个建筑风格样式对应两个建筑材质对象，分别是顶部材质和侧面材质。
在本技术方案中，根据建筑信息的字段内容，可以对建筑进行归类，进行风格化参数传入，例如，可根据高度字段进行不同风格的渲染，根据风格样式创建对应的材质对象，一个风格样式对应两个材质对象，分别是顶部材质和侧面材质如：materials[i]＝{top:topMaterials,wall:wallMaterials}。
在进一步的技术方案中，步骤S3包括：
获取到矢量面的坐标点并设为Array[p1,p2,p3,…,pn]，获取高度信息并设为h。
在本技术方案中，读取build.json文件，获取每一个切片文件pbf的内容，解析成geojson数据，获取坐标原点O(lon,lat)，然后遍历获取每一个矢量面要素，根据步骤2中的条件进行分类，然后获取到矢量面的坐标点Array[p1,p2,p3,…,pn]，获取高度信息h。
在进一步的技术方案中，S4包括：
获取定位坐标positions、顶点着色信息colors和顶点贴图坐标；
遍历单个矢量面的坐标点串Array[p1,p2,p3,…,pn]，相邻两点可以组合成两个三角形，如(p1,p2,p1_H)和(p1_H,p2,p2_H)，其中p1_H、p2_H、p3_H…pn_H是通过修改Array[p1,p2,p3,…,pn]的z值设置为高度h而获得；
按照顶点顺序，存储三角面片的顶点信息到positions，colors和uvs中。
在本技术方案中，根据高度和地面坐标数组，计算三维建筑的顶点要素信息，分别是定位坐标positions，顶点着色信息colors，顶点贴图坐标uvs去计算，遍历单个矢量面的坐标点串Array[p1,p2,p3,…,pn]，相邻两点可以组合成两个三角形，如(p1,p2,p1_H)，(p1_H,p2,p2_H)，其中p1_H、p2_H、p3_H…pn_H是通过修改Array[p1,p2,p3,…,pn]的z值设置为h而来。所以按照顶点顺序，存储三角面片的顶点信息到positions，colors，uvs中。这里要注意不要用顶点索引的方式存储，这样会导致三维建筑初始化的性能变慢。直接按照顶点顺序存储即可，如:
postions:[p1.x,p1.y,p1.z,p2.x,p2.y,p2.z,p1_H.x,p1_H.y,p1_H.z,p1_H.x,p1_H.y,p1_H.z,p2.x,p2.y,p2.z,p2_H.x,p2_H.y,p2_H.z…]；
colors:[p1.r,p1.b,p1.g,p2.r,p2.b,p2.g,p1_H.r,p1_H.g,p1_H.b,p1_H.r,p1_H.g,p1_H.b,p2.r,p2.g,p2.b,p2_H.r,p2_H.g,p2_H.b…]；
uvs:[0,1,1,1,0,0,0,0,1,1,1,0…]；在顶点纹理坐标存储。
在进一步的技术方案中，顶点顺序包括：
每一个顶点的位置、颜色和纹理坐标都是相对于且有序的。
在进一步的技术方案中，步骤S5包括：
S5.1、根据矢量面的坐标点Array[p1,p2,p3,…,pn]，采用离散点生成三角网的算法，生成三角网的数组Array[t1,t2,t3…tn]；
S5.2、每一个三角面都包含3个顶点信息t[pm,pm,pw]；
S5.3、重复步骤S4，计算出三维建筑顶面的三角面片的要素positions、colors和uvs的信息。
在本技术方案中，计算建筑顶面的三角面片要素信息，首先根据矢量面的坐标点Array[p1,p2,p3,…,pn]，可以采用离散点生成三角网的算法，可以生成三角网的数组Array[t1,t2,t3…tn]；每一个三角面都包含3个顶点信息t[pm,pm,pw]；然后按照步骤S4的方式，计算出positions、colors、uvs的信息。
在进一步的技术方案中，步骤S6包括：
将group中的材质对象有序的存储到一个新的数组中，根据对应的坐标和mesh，添加到threejs的场景当中。
在本技术方案中，将一个切片中的所有样式对应的步骤4中获取出来的positions、colors、uvs创建1个bufferGeometry对象，然后按照样式类型，分割成对应的group，这里要注意，一个风格样式对应两个group，分别是顶部和侧面对应的positions、colors、uvs信息。
在进一步的技术方案中，步骤S7包括：
矢量切片坐标是原有的经纬度坐标对应在threejs的坐标与原点坐标对应threejs的坐标差。
在本技术方案中，将materials中的材质对象按照顶部、侧面、顶部、侧面的形式，进行有序的存储到一个新的数组中为：m_materials＝[topMaterials1,wallMaterials1,topMaterials2,wallMaterials2,…]。然后根据材质和bufferGeometry生成一个mesh对象：mesh＝newTHREE.Mesh(bufferGeometry,m_materials)；然后根据对应的坐标和mesh，将其添加的threejs的场景当中。
本发明的有益效果是：
(1)本发明能够根据接口传递的样式条件生成对应的可视化建筑风格；
(2)本发明提高了建筑渲染的性能，降低了机器性能损耗，同时提高了用户交互的流畅度；
(3)本发明是基于threejs的可视化渲染方案，在渲染效果上优于了其他引擎的可视化效果。
附图说明
图1是本发明所述的一种将二维矢量进行三维渲染的方法的流程图。
具体实施方式
下面结合附图对本发明的实施例进行详细说明。
实施例：
如图1所示，本发明提供了一种将二维矢量进行三维渲染的方法，包括以下步骤：
S1、通过处理器从shp文件中获取shp数据，并在存储介质中建立对应的第一存储空间，将获取的shp数据保存到所述第一存储空间中；按照空间范围对所述保存的shp数据进行切割，对shp数据进行数据坐标转换，转换成build.json文件并在存储介质中建立对应的第二存储空间，将build.json文件的所有数据目录保存到所述第二存储空间中；
S2、根据建筑信息的字段内容，对建筑进行归类，获取建筑的风格化参数和归类条件并保存；
S3、处理器根据第二存储空间中保存的build.json文件数据目录读取build.json文件，获取build.json文件中每一个切片文件pbf的内容，并解析成geojson数据，获取坐标原点，并获取每一个矢量面要素，根据步骤S2中建筑的归类条件对矢量面要素进行分类，获取矢量面坐标点和高度信息；
S4、根据矢量面坐标点和高度信息，计算三维建筑的顶点要素信息；
S5、根据三维建筑得顶点要素信息、样式分类信息、排列顶点信息、颜色信息和法向量信息创建分组，根据分组在存储介质中创建一个bufferGeometry对象；
S6、获取buffGeometry对象对应的坐标信息；
S7、根据bufferGeometry和材质数组materials创建一个mesh对象，并根据坐标信息添加到三维场景中进行渲染。
在本实施例中，首先进行数据处理，将每个切片选取一个原点坐标，所有的矢量切片坐标的描述都是原有的经纬度坐标对应在threejs的坐标与原点坐标对应threejs的坐标差。接着将单个切片中的所有矢量面创建生成一个mesh对象，且可以根据不同的条件进行风格化的设置。再将顶点信息存储采用无索引的有序存储方式进行信息存储，提供初始化模型创建速度。最后根据二维矢量面通过高度拉伸为三维定位信息。
在另一个实施例中，步骤S1包括：
根据空间范围将shp文件中的shp数据切割成若干份矢量要素的集合数组，并为每一个集合数组指定一个固定的坐标原点O(lon,lat)；
建立矢量面，并确定坐标原点O(lon,lat)的位置，将矢量面中的点标记为A(lon,lat)，根据经纬度坐标和threejs的内部坐标转换关系，将A点全部转换为相对O(lon,lat)原点的相对偏移坐标A1(x,y)，x、y为A点和O对应threejs的坐标的横纵坐标差；
将坐标原点0、矢量点A和转换后坐标A1转换为geojson数据，再转换成pbf数据，将所有的切片文件路径自动记录在一个json中，记为build.json。
在本实施例中，根据地图的指定范围，将shp文件中的数据，切割成若干份矢量要素的集合，并且为每一个集合数组指定一个固定的坐标原点O(lon,lat)，将每个矢量面中的点标记为A(lon,lat)，然后根据经纬度坐标和threejs的内部坐标转换关系，将A点全部转换为相对O(lon,lat)原点的相对偏移坐标A1(x,y)；x、y为A点和O对应threejs的坐标的横纵坐标差。然后将这些信息转换成geojson，再转换成pbf数据，将所有的切片文件路径自动记录在一个json中，为build.json。这样可以减少数据文件的大小，便于网络传输；也可以避免所有的经纬度坐标在软件层做转换，来降低初始化性能损耗。
在另一个实施例中，步骤S2包括：
根据风格样式创建对应的建筑材质对象，一个建筑风格样式对应两个建筑材质对象，分别是顶部材质和侧面材质。
在本实施例中，根据建筑信息的字段内容，可以对建筑进行归类，进行风格化参数传入，例如，可根据高度字段进行不同风格的渲染，根据风格样式创建对应的材质对象，一个风格样式对应两个材质对象，分别是顶部材质和侧面材质如：materials[i]＝{top:topMaterials,wall:wallMaterials}。
在另一个实施例中，步骤S3包括：
获取到矢量面的坐标点并设为Array[p1,p2,p3,…,pn]，获取高度信息并设为h。
在本实施例中，读取build.json文件，获取每一个切片文件pbf的内容，解析成geojson数据，获取坐标原点O(lon,lat)，然后遍历获取每一个矢量面要素，根据步骤2中的条件进行分类，然后获取到矢量面的坐标点Array[p1,p2,p3,…,pn]，获取高度信息h。
在另一个实施例中，S4包括：
获取定位坐标positions、顶点着色信息colors和顶点贴图坐标；
遍历单个矢量面的坐标点串Array[p1,p2,p3,…,pn]，相邻两点可以组合成两个三角形，如(p1,p2,p1_H)和(p1_H,p2,p2_H)，其中p1_H、p2_H、p3_H…pn_H是通过修改Array[p1,p2,p3,…,pn]的z值设置为高度h而获得；
按照顶点顺序，存储三角面片的顶点信息到positions，colors和uvs中。
在本实施例中，根据高度和地面坐标数组，计算三维建筑的顶点要素信息，分别是定位坐标positions，顶点着色信息colors，顶点贴图坐标uvs去计算，遍历单个矢量面的坐标点串Array[p1,p2,p3,…,pn]，相邻两点可以组合成两个三角形，如(p1,p2,p1_H)，(p1_H,p2,p2_H)，其中p1_H、p2_H、p3_H…pn_H是通过修改Array[p1,p2,p3,…,pn]的z值设置为h而来。所以按照顶点顺序，存储三角面片的顶点信息到positions，colors，uvs中。这里要注意不要用顶点索引的方式存储，这样会导致三维建筑初始化的性能变慢。直接按照顶点顺序存储即可，如:
postions:[p1.x,p1.y,p1.z,p2.x,p2.y,p2.z,p1_H.x,p1_H.y,p1_H.z,p1_H.x,p1_H.y,p1_H.z,p2.x,p2.y,p2.z,p2_H.x,p2_H.y,p2_H.z…]；
colors:[p1.r,p1.b,p1.g,p2.r,p2.b,p2.g,p1_H.r,p1_H.g,p1_H.b,p1_H.r,p1_H.g,p1_H.b,p2.r,p2.g,p2.b,p2_H.r,p2_H.g,p2_H.b…]；
uvs:[0,1,1,1,0,0,0,0,1,1,1,0…]；在顶点纹理坐标存储。
在另一个实施例中，顶点顺序包括：
每一个顶点的位置、颜色和纹理坐标都是相对于且有序的。
在另一个实施例中，步骤S5包括：
S5.1、根据矢量面的坐标点Array[p1,p2,p3,…,pn]，采用离散点生成三角网的算法，生成三角网的数组Array[t1,t2,t3…tn]；
S5.2、每一个三角面都包含3个顶点信息t[pm,pm,pw]；
S5.3、重复步骤S4，计算出三维建筑顶面的三角面片的要素positions、colors和uvs的信息。
在本实施例中，计算建筑顶面的三角面片要素信息，首先根据矢量面的坐标点Array[p1,p2,p3,…,pn]，可以采用离散点生成三角网的算法，可以生成三角网的数组Array[t1,t2,t3…tn]；每一个三角面都包含3个顶点信息t[pm,pm,pw]；然后按照步骤S4的方式，计算出positions、colors、uvs的信息。
在另一个实施例中，步骤S6包括：
将group中的材质对象有序的存储到一个新的数组中，根据对应的坐标和mesh，添加到threejs的场景当中。
在本实施例中，将一个切片中的所有样式对应的步骤4中获取出来的positions、colors、uvs创建1个bufferGeometry对象，然后按照样式类型，分割成对应的group，这里要注意，一个风格样式对应两个group，分别是顶部和侧面对应的positions、colors、uvs信息，具体方式如下：
定义样式为styles数组，按照样式信息计算出来的用于绘制的信息为:
将计算出来的group对象赋值给bufferGeometry对象为：
bufferGeometry.group＝group；
将要素信息赋值给bufferGeometry为：
bufferGeometry.setAttribute('position',new THREE.BufferAttribute(vertices1,3))；
bufferGeometry.setAttribute('uv',new THREE.BufferAttribute(uvs1,2))；
bufferGeometry.setAttribute('color',new THREE.BufferAttribute(colors1,3))。
在另一个实施例中，步骤S7包括：
矢量切片坐标是原有的经纬度坐标对应在threejs的坐标与原点坐标对应threejs的坐标差。
在本实施例中，将materials中的材质对象按照顶部、侧面、顶部、侧面的形式，进行有序的存储到一个新的数组中为：m_materials＝[topMaterials1,wallMaterials1,topMaterials2,wallMaterials2,…]。然后根据材质和bufferGeometry生成一个mesh对象：mesh＝newTHREE.Mesh(bufferGeometry,m_materials)；然后根据对应的坐标和mesh，将其添加的threejs的场景当中。
以上所述实施例仅表达了本发明的具体实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。