使用 WebGL 的 drawArrays 在地图上绘制多边形

Question

我正在尝试使用下载的 OSM 数据在地图上绘制多边形。我编写了一个查询，它从planet_osm_polygon 表中返回一个多边形列表。它将列表返回为 JSON 对象。我正在使用gl.drawArrays(gl.LINESTRIP, 0, json_data_length) 来绘制多边形。我对点做了同样的事情——我有一个返回的点列表，我已经能够使用 gl.POINTS 绘制它们。

问题是，我希望单独绘制每个多边形，但我想使用 LINE_STRIP 是将一个多边形的一个终点连接到另一个多边形的起点。

例如，我希望 SFO 的市民中心广场和布坎南街是单独的多边形。但是多边形在绘制之后仍然通过一个点相互连接。我希望这两个被绘制为单独的多边形。我该怎么做？

我不想使用任何库。只是基本的 WebGL。我的 JavaScript 代码从我的 osm 数据库中获取经纬度坐标并转换为像素坐标以帮助绘图 - 请参阅链接：WebGL 着色器代码 (http://psousa.net/demos/webgl/) 我正在使用此示例并对其进行扩展。

Answer 1

如果我理解正确，您想绘制多个多边形的“边界”而不是填充的多边形本身。

为了在单个绘图调用中绘制单独的线，您应该使用 gl.LINES 模式而不是 gl.LINESTRIP。

假设您有一个包含点 A、B、C、D 的四边形和一个包含点 X Y Z 的三角形。如果您想在 GL_LINES 模式下使用 glDrawArrays 命令，您的顶点数据应提交为

{A,B, B,C, C,D, D,A, X,Y, Y,Z, Z,X}

使用此顶点数据绘制以下线条

• 从 A 到 B 的线路
• 从 B 到 C 的线路
• 从 C 到 D 的线路
• 从 D 到 A 的线路
• 从 X 到 Y 的线
• 从 Y 到 Z 的线
• 从 Z 到 X 的线

为了消除重复的顶点数据，您还可以使用 glDrawElements 和适当的 index 。