javascript - 在 WebGL 中的 map 上绘制单个多边形 - 建筑物、国家边界等(循环通过索引缓冲区)

Question

我正在使用 WebGL 在 map 顶部的 Canvas 层上绘制线条和多边形以获取 OSM 数据。我编写了一个查询，该查询从 planet_osm_polygon 表返回多边形列表。它将列表作为 JSON 对象返回。我正在使用

 gl.drawElements(gl.LINES, vetexIndex.length, gl.UNSIGNED_SHORT, 0) 

绘制多边形。

我的索引缓冲区如下所示:

pIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pIndexBuffer); 
pVertexIndices = new Uint16Array([0,1, 1,2, 2,3]);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, pVertexIndices, gl.STATIC_DRAW);

在这里，对于多边形的索引，我使用了 0,1 1,2 和 2,3 作为对，绘制了三条连续的线(作为多边形周围的边界) 我想画几个像这样的其他多边形。不使用drawElements()和索引缓冲区，只使用drawArrays()和gl.LINE_STRIP，如下所示:

gl.drawArrays(gl.LINESTRIP, 0, json_data_length)

绘制多边形，但将每个多边形的一端与下一个多边形连接起来(因为它是 LINE_STRIP)。

如何在 map 上绘制单独的多边形？如何在此处为每个多边形使用索引缓冲区？

我不想使用任何外部库；只是简单的 JavaScript。我已经将 OSM 数据库中的经纬度坐标转换为 JavaScript 代码中的像素坐标。

使用 gl.LINE_STRIP

使用 gl.LINES 和索引缓冲区

Answer 1

在一次绘制调用中绘制多条折线的唯一方法是使用 GL_LINES。当 OpenGL 使用 GL_LINES 或 GL_LINESTRIP 渲染缓冲区时，它将需要顶点缓冲区中的 2 个顶点，并使用这 2 个点来绘制一条线。 GL_LINES 与 GL_LINESTRIP 的行为有何不同，如下所示:

GL_LINES:

line 1 - v[0], v[1]
line 2 - v[2], v[3]
line 3 - v[4], v[5]
...

GL_LINESTRIP

line 1 - v[0], v[1]
line 2 - v[1], v[2]
line 3 - v[2], v[3]
...

正如你所看到的，如果你不使用GL_LINES，那么你将无法断开线，并且线将被视为一条连续的折线。唯一的异常(exception)是，如果您插入退化原语，但这是一种高级技术，我不建议像您这样的初学者使用。

祝你好运。希望这能解决您的问题。

编辑:我的错误，退化图元仅适用于 GL_TRIANGLE_STRIP，不可能用 GL_LINESTRIP 绘制退化图元。