CN112184798A - 一种基于WebGL三维的表面积计算方法及装置 - Google Patents

Abstract

本发明适用于地理信息技术领域，提供一种基于WebGL三维的表面积计算方法及装置，本发明采用插值方法来构建大量多边形内部的点，用这些点来构建组成多边形的小三角形，表面积的计算就可以转化成小三角形面积的和，这样的表面积计算精度则更高。此外，凹多边形的三角网构建会产生在多边形凹处的三角形，这些小三角形在多边形外部，需要被剔除。本发明则能有效解决凹多边形的这个问题，实现表面积的精确计算。

Description

一种基于WebGL三维的表面积计算方法及装置

技术领域

本发明属于地理信息技术领域，尤其涉及一种基于WebGL三维的表面积计算方法及装置。

背景技术

地形和模型表面积数据需求日益增多，常规的测量计算方法很难满足工程单位的需要。为了更快、更准确地提供不同地形条件下以及模型上的表面积数据信息，必须借助现代的计算机技术。利用严密的数学计算公式和模型，采用可视化方式直观地把表面实际状况和面积呈现给大家，以便减少因面积计算而引起的工程量差异或用地补偿之间的矛盾。

随着计算机图形学的发展，WebGL（网页图形库）能够在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互。现在，随着个人计算机和浏览器的性能越来越强，使用便捷通用的web技术创建渲染三维图形已成为可能。WebGL结合了html5（Hyper TextMarkup Language 5，最新的超文本标记语言）和javascript（java脚本），允许开发者在网页上创建和渲染三维图形。这项技术能在开发下一代易用直观用户界面和生产互联网内容上发挥重要作用。其中，CesiumJS（一个跨平台、跨浏览器的展示三位地球和地图的js库）是一款用于创建虚拟场景的3D地理信息平台，用于创建以基于Web的地图动态数据可视化。它能够支持2D, 2.5D, 3D形式的地理（地图）数据展示，可以绘制各种几何图形、高亮区域，支持导入图片，甚至三维模型等多种数据可视化展示。也可以用户动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和移动端浏览器。

目前基于Cesium的表面积计算方法主要是以下流程：在野外较完整地采集地形数据或数字地形图后，在计算机上利用地形图或野外采集的地面点数据文件，按照实际工程需要，在规定的区域之内计算并在屏幕上显示出实际地面的表面曲面面积，即利用软件快速直观精确地完成“复杂地形条件下的地表面积计算”工作。但是这种情况下来计算表面积需要耗费大量的人力和时间，并且效率低下。因此本发明结合WebGL三维实现地形或模型上的表面积计算能够解决上述存在的问题。

同时，现在也有利用WebGL三维实现地形或模型的表面积测量方案，但这些方案也存在有不同的缺陷。首先，当绘制图形范围较大时，图形渲染速度慢，容易出现网页崩溃现象；其次，对凹多边形的表面积计算出现错误。

发明内容

鉴于上述问题，本发明的目的在于提供一种基于WebGL三维的表面积计算方法，旨在解决上述问题。

一方面，所述基于WebGL三维的表面积计算方法包括下述步骤：

步骤S1、获取鼠标点击交互信息构建多边形；

步骤S2、对多边形内部进行插值得到内部点集合；

步骤S3、对多边形的边进行插值得到边插值点集合；

步骤S4、将内部点集合、边插值点集合以及顶点坐标点集合中的所有点存放至所有点集合中，根据所有点集合中的点构建三角网，生成小三角形集合；

步骤S5、遍历小三角形集合中的每个小三角形，计算当前遍历小三角形的重心，从小三角形集合中剔除重心在多边形外部的小三角形；

步骤S6、计算小三角形集合中所有小三角形的面积和即为当前所要获取的多边形面积。

进一步的，所示步骤S1具体包括：

获取交互鼠标点击位置点，这些位置点所形成的范围即为当前所要计算表面积的范围；

获取位置点的笛卡尔坐标数组并转换成经纬度坐标数组，根据经纬度坐标数组构建多边形。

进一步的，所述步骤S2具体包括：

根据经纬度坐标数组中的每个点经纬度坐标，将该点转换成几何点，将所有集合点放入顶点坐标点集合，并生成特征点集合；

对特征点集合进行插值，设置插值间隔，插值结果即为插值点集合，遍历插值点集合中的每个插值点，判断该点是否在多边形内，如果在多边形内部，则放入到内部点集合中。

进一步的，所述步骤S3具体包括：

设置插值间距cs，遍历多边形的每条边，当前边的边长为d，则当前边的采样点个数N=ceil(d/(cs×k1))或者ceil(d×k2/cs)，这里ceil（）函数表示不小于括号内数据的最小整数；

经过ceil(N/10)次插值，其中第j次插值的插值位置是多边形当前边的j × (1/ceil(N/10))位置处，并将插值结果存入边插值列表中；

所有边插值完成后，将边插值列表中的每个元素构建点，然后将构建点放入边插值点集合中。

另一方面，所述基于WebGL三维的表面积计算装置包括：

多边形绘制单元，用于获取鼠标点击交互信息构建多边形；

内部插值单元，用于对多边形内部进行插值得到内部点集合；

边插值单元，用于对多边形的边进行插值得到边插值点集合；

三角网构建单元，用于将内部点集合、边插值点集合以及顶点坐标点集合中的所有点存放至所有点集合中，根据所有点集合中的点构建三角网，生成小三角形集合；

剔除单元，用于遍历小三角形集合中的每个小三角形，计算当前遍历小三角形的重心，从小三角形集合中剔除重心在多边形外部的小三角形；

面积计算单元，用于计算小三角形集合中所有小三角形的面积和即为当前所要获取的多边形面积。

进一步的，所示多边形绘制单元包括：

位置点获取模块，用于获取交互鼠标点击位置点，这些位置点所形成的范围即为当前所要计算表面积的范围；

多边形构建模块，用于获取位置点的笛卡尔坐标数组并转换成经纬度坐标数组，根据经纬度坐标数组构建多边形。

进一步的，所述内部插值单元具体包括：

特征点集合生成模块，用于根据经纬度坐标数组中的每个点经纬度坐标，将该点转换成几何点，将所有集合点放入顶点坐标点集合，并生成特征点集合；

内部点集合生成模块，用于对特征点集合进行插值，设置插值间隔，插值结果即为插值点集合，遍历插值点集合中的每个插值点，判断该点是否在多边形内，如果在多边形内部，则放入到内部点集合中。

进一步的，所述边插值单元具体包括：

参数设置模块，用于设置插值间距cs，遍历多边形的每条边，当前边的边长为d，则当前边的采样点个数N=ceil(d/(cs×k1))或者ceil(d×k2/cs)，这里ceil（）函数表示不小于括号内数据的最小整数；

边插值模块，用于经过ceil(N/10)次插值，其中第j次插值的插值位置是多边形当前边的j× (1/ceil(N/10))位置处，并将插值结果存入边插值列表中；

边插值点集合生成模块，用于所有边插值完成后，将边插值列表中的每个元素构建点，然后将构建点放入边插值点集合中。

本发明的有益效果是：本发明对绘制的多边形内部和边同时进行了插值，保证了这些插值点构建的三角形在多边形中均匀分布，同时本发明也解决了凹多边形的外部小三角形出现在外部凹向处的问题，可以剔除这些小三角形，因此本发明方案能够更加精准地计算出表面积；此外在绘制大范围的多边形时，能够自适应设置插值密度，从而快速实现WebGL三维环境下的图形渲染。

附图说明

图1是本发明第一实施例提供的基于WebGL三维的表面积计算方法的流程；

图2是多边形边插值流程图；

图3是本发明第二实施例提供的基于WebGL三维的表面积计算装置的结构方框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

传统的地形或模型表面积计算需要到实地勘探与测量，耗费的时间、人力和其他成本是非常大的。WebGL的发展使得在网页上绘制和渲染复杂三维图形成为可能，其与用户的交互功能也越来越强大。本发明的目的是将表面积计算与WebGL进行结合起来，用户可以直接在电脑端进行交互操作得到对应的表面积结果，同时绘制多边形也能直观地以可视化效果展示出来，更容易帮助用户理解。现有技术一般在计算表面积时未考虑多边形贴地或贴模型的情况从而导致计算结果精度不高的问题，本发明则提出一种在地形或模型上计算精度较高的表面积方法。为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

实施例一：

图1示出了本发明实施例提供的基于WebGL三维的表面积计算方法的流程，为了便于说明仅示出了与本发明实施例相关的部分。

如图1所示，本实施例提供的基于WebGL三维的表面积计算方法包括下述步骤：

步骤S1、获取鼠标点击交互信息构建多边形。

本发明将表面积计算与WebGL进行结合起来，用户直接在电脑端进行鼠标交互操作绘制多边形，绘制多边形能直观地以可视化效果展示出来，能够直接得到和显示对应的表面积结果，更容易帮助用户理解。

具体操作时，用户在界面上点击鼠标，获取交互鼠标点击位置点，这些位置点所形成的范围即为当前所要计算表面积的范围；获取位置点的笛卡尔坐标数组activePoints，转换成经纬度坐标数组，最后利用turf.polygon函数对这些经纬度坐标数组构建多边形drawPolygon。

步骤S2、对多边形内部进行插值得到内部点集合。

内部插值具体过程如下：

S21、根据经纬度坐标数组中的每个点经纬度坐标，将该点转换成几何点，将所有集合点放入顶点坐标点集合，并生成特征点集合。每个位置点对应一个笛卡尔坐标，将笛卡尔坐标转换成的经纬度坐标，并作为turf.point()函数的参数，从而将该点转换成几何点。几何点具有如下的结构：

Object{

geometry:{type:"Point",coordinates:[108.95943508858328,34.2184730412k297], __proto__: Object},

properties: {solRad: 419.35322156113045, __proto__: Object},

type: "Feature",

__proto__: Object

对笛卡尔坐标数组activePoints中的每个点通过turf.point()函数构建几何点，并将其放入顶点坐标点集合inputPoints中。利用turf.futureCollection()函数对顶点坐标点集合inputPoints生成点特征集合pointFeatures。

S22、对特征点集合进行插值，设置插值间隔，插值结果即为插值点集合，遍历插值点集合中的每个插值点，判断该点是否在多边形内，如果在多边形内部，则放入到内部点集合中。

之后用turf.interpolate()函数对点特征集合pointFeatures进行插值，并设置插值间隔。插值后的结果是插值点集合，遍历每个插值点，判断该点是否在绘制的多边形_drawPolygon中，如果在多边形内部，则放入到集合内部点集合selectedPointsInPolygon中。内部点集合selectedPointsInPolygon存放所有的位于多边形内部的点。

步骤S3、对多边形的边进行插值得到边插值点集合。

多边形内部点插值完成之后，还需要对多边形边上的点进行插值。如果不经过这一步骤，那么长度非常长的边则会和内部点直接构成一个非常大的钝角三角形，而利用这种钝角三角形计算表面积精度不高。所以对多边形边进行点插值也是一个必不可少的步骤。结合图2所示，本步骤具体实现过程如下：

S31、设置插值间距cs，遍历多边形的每条边，当前边的边长为d，则当前边的采样点个数N=ceil(d/(cs×k1))或者ceil(d×k2/cs)，这里ceil（）函数表示不小于括号内数据的最小整数， k1和k2均为调整系数。

如果对地形进行表面积计算，多边形的每条边长度为d，那么采样点的个数N=ceil(d/(cs×k1))，其中cs为自定义的插值间距(单位：km)，因此可知采样点的个数N与插值间距cs成反比，插值间距越大，采样点个数越小；

如果是在模型上进行表面积计算，多边形的每条边长度为d，那么采样点的格式为N=ceil(d×k2/cs)，其中cs为自定义的插值间距（单位：km），因此克制采样点的个数N与插值间距cs成反比，插值间距越大，采样点个数越小。本实施例中，k1取值0.1，k2取值20。以下是地形表面计算和模型表面计算的不同：

地形表面：地形是地物形状和地貌的总称，地形表面则是地表以上分布的固定物体所共同呈现出的高低起伏的各种状态；

模型表面：模型是物体的多边形表示，通常用计算机或者其他视频设备进行显示。显示的物体可以时现实世界的实体，也可以是虚构的物体。任何物理自然界存在的东西都可以用模型表示。而模型表面则就是所展现的物体表面。

S32、经过ceil(N/10)次插值，其中第j次插值的插值位置是多边形当前边的j ×(1/ceil(N/10))位置处，并将插值结果存入边插值列表中。

在计算得到采样点个数N后，本步骤进行ceil(N/10)次遍历，针对第j次遍历，对当前边长在位置j×(1/ceil(N/10))处进行插值，并将插值的结果放入到边插值列表interpolatedPointsOnEdges。

S33、所有边插值完成后，将边插值列表中的每个元素构建点，然后将构建点放入边插值点集合中。

插值完之后，遍历边插值列表interpolatedPointsOnEdges的每个元素，将每个元素用turf.point()函数构建点，然后将这些点都放入边插值点集合tempPointArr中。

步骤S4、将内部点集合、边插值点集合以及顶点坐标点集合中的所有点存放至所有点集合中，根据所有点集合中的点构建三角网，生成小三角形集合。

本步骤构建TIN三角网。步骤S2、S3中已经得到了存放多边形内部点集合selectedPointsInPolygon和多边形边插值点集合tempPointArr。将步骤S2中顶点坐标点集合inputPoints、内部点集合selectedPointsInPolygon,和插值点集合tempPointArr全都放入存放所有点集合allPointsInDrawedPolygon中。利用turf.()函数对allPointsInDrawedPolygon构建TIN三角网，所有的小三角形组成小三角形集合。

步骤S5、遍历小三角形集合中的每个小三角形，计算当前遍历小三角形的重心，从小三角形集合中剔除重心在多边形外部的小三角形。

如果绘制的多边形是凹多边形的话，凹多边形在构建三角网的时候也会将凹进去的部分填充构建小三角形，这样显然与绘制多边形是不一致的，需要进行剔除。

方法如下：遍历步骤S4中得到的小三角形集合，获取当前遍历元素小三角形的顶点坐标数组，根据三个顶点坐标计算三角形的重心。如果当前三角形重心在多边形drawPolygon中，表明当前小三角形在凹多边形内部。否则，当前小三角形在凹多边形外部。这样实现了多边形外部小三角形的剔除。

步骤S6、计算小三角形集合中所有小三角形的面积和即为当前所要获取的多边形面积。

针对多边形内部的每个小三角形运用海伦公式计算每个小三角形的面积，将这些小三角形面积进行累加最终得到绘制多边形面积。

实施例二：

如图3所示，本实施例提供的基于WebGL三维的表面积计算装置，包括：

多边形绘制单元1，用于获取鼠标点击交互信息构建多边形；

内部插值单元2，用于对多边形内部进行插值得到内部点集合；

边插值单元3，用于对多边形的边进行插值得到边插值点集合；

三角网构建单元4，用于将内部点集合、边插值点集合以及顶点坐标点集合中的所有点存放至所有点集合中，根据所有点集合中的点构建三角网，生成小三角形集合；

剔除单元5，用于遍历小三角形集合中的每个小三角形，计算当前遍历小三角形的重心，从小三角形集合中剔除重心在多边形外部的小三角形；

面积计算单元6，用于计算小三角形集合中所有小三角形的面积和即为当前所要获取的多边形面积。

上述各个功能单元对应实现了实施例一步骤中的S1-S6。首先多边形绘制单元根据用户的点击交互，构建多边形，然后通过内部插值单元和边插值单元分别对多边形的内部和边进行插值，三角网构建单元根据多边形顶点以及内部插值点和边插值点构建三角网，然后通过剔除单元对凹多边形外部的小三角形进行剔除，最后通过面积计算单元计算所有小三角形的面积和，即得到多边形的面积。

具体实现时，所述多边形绘制单元包括：

位置点获取模块，用于获取交互鼠标点击位置点，这些位置点所形成的范围即为当前所要计算表面积的范围；

多边形构建模块，用于获取位置点的笛卡尔坐标数组并转换成经纬度坐标数组，根据经纬度坐标数组构建多边形。

所述内部插值单元具体包括：

特征点集合生成模块，用于根据经纬度坐标数组中的每个点经纬度坐标，将该点转换成几何点，将所有集合点放入顶点坐标点集合，并生成特征点集合；

内部点集合生成模块，用于对特征点集合进行插值，设置插值间隔，插值结果即为插值点集合，遍历插值点集合中的每个插值点，判断该点是否在多边形内，如果在多边形内部，则放入到内部点集合中。

所述边插值单元具体包括：

参数设置模块，用于设置插值间距cs，遍历多边形的每条边，当前边的边长为d，则当前边的采样点个数N=ceil(d/(cs×k1))或者ceil(d×k2/cs)，这里ceil（）函数表示不小于括号内数据的最小整数；

边插值模块，用于经过ceil(N/10)次插值，其中第j次插值的插值位置是多边形当前边的j × (1/ceil(N/10))位置处，并将插值结果存入边插值列表中；

边插值点集合生成模块，用于所有边插值完成后，将边插值列表中的每个元素构建点，然后将构建点放入边插值点集合中。

综上，由于用户通过交互点击作为多边形的顶点，仅根据这几个输入顶点来直接计算的表面积结果精度是非常差的，因为在多边形内部还有起伏程度不同的地形面或者模型面，它们的面积是不能直接用多边形顶点来计算的。为了解决这个问题，本发明采用插值方法来构建大量多边形内部的点，用这些点来构建组成多边形的小三角形，那么表面积的计算就可以转化成小三角形面积的和，这样的表面积计算精度则更高。此外，凹多边形的三角网构建会产生在多边形凹处的三角形，这些小三角形在多边形外部，需要被剔除。本发明则能有效解决凹多边形的这个问题，实现表面积的精确计算。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种基于WebGL三维的表面积计算方法，其特征在于，所述方法包括下述步骤：

步骤S1、获取鼠标点击交互信息构建多边形；

步骤S2、对多边形内部进行插值得到内部点集合；

步骤S3、对多边形的边进行插值得到边插值点集合；

步骤S4、将内部点集合、边插值点集合以及顶点坐标点集合中的所有点存放至所有点集合中，根据所有点集合中的点构建三角网，生成小三角形集合；

步骤S5、遍历小三角形集合中的每个小三角形，计算当前遍历小三角形的重心，从小三角形集合中剔除重心在多边形外部的小三角形；

步骤S6、计算小三角形集合中所有小三角形的面积和即为当前所要获取的多边形面积。

2.如权利要求1所述基于WebGL三维的表面积计算方法，其特征在于，所示步骤S1具体包括：

获取交互鼠标点击位置点，这些位置点所形成的范围即为当前所要计算表面积的范围；

获取位置点的笛卡尔坐标数组并转换成经纬度坐标数组，根据经纬度坐标数组构建多边形。

3.如权利要求2所述基于WebGL三维的表面积计算方法，其特征在于，所述步骤S2具体包括：

根据经纬度坐标数组中的每个点经纬度坐标，将该点转换成几何点，将所有集合点放入顶点坐标点集合，并生成特征点集合；

对特征点集合进行插值，设置插值间隔，插值结果即为插值点集合，遍历插值点集合中的每个插值点，判断该点是否在多边形内，如果在多边形内部，则放入到内部点集合中。

4.如权利要求3所述基于WebGL三维的表面积计算方法，其特征在于，所述步骤S3具体包括：

设置插值间距cs，遍历多边形的每条边，当前边的边长为d，则当前边的采样点个数N=ceil(d/(cs×k1))或者ceil(d×k2/cs)，这里ceil（）函数表示不小于括号内数据的最小整数，k1和k2均为调整系数；

经过ceil(N/10)次插值，其中第j次插值的插值位置是多边形当前边的j× (1/ceil(N/10))位置处，并将插值结果存入边插值列表中；

所有边插值完成后，将边插值列表中的每个元素构建点，然后将构建点放入边插值点集合中。

5.一种基于WebGL三维的表面积计算装置，其特征在于，所述装置包括：

多边形绘制单元，用于获取鼠标点击交互信息构建多边形；

内部插值单元，用于对多边形内部进行插值得到内部点集合；

边插值单元，用于对多边形的边进行插值得到边插值点集合；

三角网构建单元，用于将内部点集合、边插值点集合以及顶点坐标点集合中的所有点存放至所有点集合中，根据所有点集合中的点构建三角网，生成小三角形集合；

剔除单元，用于遍历小三角形集合中的每个小三角形，计算当前遍历小三角形的重心，从小三角形集合中剔除重心在多边形外部的小三角形；

面积计算单元，用于计算小三角形集合中所有小三角形的面积和即为当前所要获取的多边形面积。

6.如权利要求5所述基于WebGL三维的表面积计算装置，其特征在于，所示多边形绘制单元包括：

位置点获取模块，用于获取交互鼠标点击位置点，这些位置点所形成的范围即为当前所要计算表面积的范围；

多边形构建模块，用于获取位置点的笛卡尔坐标数组并转换成经纬度坐标数组，根据经纬度坐标数组构建多边形。

7.如权利要求6所述基于WebGL三维的表面积计算装置，其特征在于，所述内部插值单元具体包括：

特征点集合生成模块，用于根据经纬度坐标数组中的每个点经纬度坐标，将该点转换成几何点，将所有集合点放入顶点坐标点集合，并生成特征点集合；

内部点集合生成模块，用于对特征点集合进行插值，设置插值间隔，插值结果即为插值点集合，遍历插值点集合中的每个插值点，判断该点是否在多边形内，如果在多边形内部，则放入到内部点集合中。

8.如权利要求7所述基于WebGL三维的表面积计算装置，其特征在于，所述边插值单元具体包括：

参数设置模块，用于设置插值间距cs，遍历多边形的每条边，当前边的边长为d，则当前边的采样点个数N=ceil(d/(cs×k1))或者ceil(d×k2/cs)，这里ceil（）函数表示不小于括号内数据的最小整数；

边插值模块，用于经过ceil(N/10)次插值，其中第j次插值的插值位置是多边形当前边的j × (1/ceil(N/10))位置处，并将插值结果存入边插值列表中；

边插值点集合生成模块，用于所有边插值完成后，将边插值列表中的每个元素构建点，然后将构建点放入边插值点集合中。

Images