-2

I am trying to draw polygons on a map, using OSM data downloaded. I have written a query that returns a list of polygons from the planet_osm_polygon table. It resturns the list as JSON objects. I am using gl.drawArrays(gl.LINESTRIP, 0, json_data_length) to draw the polygons. I have done the same for points- I have a list of points returned and I have been able to plot them using gl.POINTS.

The problem is, I want each of the polygons to be drawn separately, but I guess using LINE_STRIP is connecting one ending point of one polygon to the starting point of another polygon.

For example, I want civic center plaza and buchanan street in SFO to be separate polygons. But the polygons, after being drawn, are still connected to each other through one point. I want these two to be drawn as separate polygons. How do I do it?

I do not want to use any libraries. Just basic WebGL. My JavaScript code takes the lat-long coordinates from my osm database and converts into pixel coordinates to help plotting- see link: WebGL shader code (http://psousa.net/demos/webgl/) I am using this example and extending it.

genpfault
  • 47,669
  • 9
  • 68
  • 119
user4726090
  • 27
  • 2
  • 9
  • is there a reason to not draw them as gl.LINES instead? – Winchestro Apr 23 '15 at 20:38
  • gl.LINES is not going to show me a complete polygon by completing the linestrip, right? wheareas linestrip joins the starting point for the po,ygon with ending point to create a complete polygon. gl. Lines are creating a broken polygon. – user4726090 Apr 23 '15 at 21:24
  • then you might want to look at this http://stackoverflow.com/questions/6077002/using-webgl-index-buffers-for-drawing-meshes – Winchestro Apr 23 '15 at 21:43
  • I have my lat-long points as an array of array of this format: 0: Object lat: 37.785434506304 lon: -122.4300784425 1: Object lat: 37.something lon: -122.something and so on – user4726090 Apr 23 '15 at 22:46

1 Answers1

0

If i understood correctly you want to draw 'borders' of multiple polygons not the filled polygon itself.

In order to draw seperate lines in a single draw call you should use gl.LINES mode instead of gl.LINESTRIP.

Lets say you have a quad which has points A,B,C,D and a triangle which has points X Y Z. If you want to use glDrawArrays command with GL_LINES mode , your vertex data should be submitted as 

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

Following lines are drawn with this vertex data

  • Line from A to B
  • Line from B to C
  • Line from C to D
  • Line from D to A
  • Line from X to Y
  • Line from Y to Z
  • Line from Z to X

In order to eliminate duplicate vertex data you can also use glDrawElements with a proper index .

Alper Cinar
  • 816
  • 5
  • 12
  • I get it. So my index buffer should be like the indices needed to draw a line like you specified above? For example, 0,1 1,2 2,3 3,4? – user4726090 Apr 28 '15 at 19:15