0

我正在使用 WebGL 在我的地图顶部的画布层上为 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）。

如何在我的地图上绘制单独的多边形？如何在这里为每个多边形使用我的索引缓冲区？

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

使用 gl.LINE_STRIP

在此处输入图像描述

使用 gl.LINES 和索引缓冲区

在此处输入图像描述

4

1 回答 1

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，那么您将无法断开线，这些线将被视为一条连续的折线。唯一的例外是如果您插入一个退化的原语，但这是一种高级技术，我不建议像您这样的初学者使用。

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

编辑：我的错误，退化原语只适用于 GL_TRIANGLE_STRIP，不可能用 GL_LINESTRIP 绘制退化原语。

于 2015-06-22T21:40:54.743 回答