Merge pull request #809 from tschaub/clockwise

Consistent winding order for polygon rings.

src/ol/geom/linearring.js

@@ -27,6 +27,42 @@ ol.geom.LinearRing = function(coordinates, opt_shared) {
 goog.inherits(ol.geom.LinearRing, ol.geom.LineString);
 
 
+/**
+ * Determine if a vertex array representing a linear ring is in clockwise
+ * order.
+ *
+ * This method comes from Green's Theorem and was mentioned in an answer to a
+ * a Stack Overflow question (http://tinyurl.com/clockwise-method).
+ *
+ * Note that calculating the cross product for each pair of edges could be
+ * avoided by first finding the lowest, rightmost vertex.  See OGR's
+ * implementation for an example of this.
+ * https://github.com/OSGeo/gdal/blob/trunk/gdal/ogr/ogrlinearring.cpp
+ *
+ * @param {ol.geom.VertexArray} coordinates Linear ring coordinates.
+ * @return {boolean} The coordinates are in clockwise order.
+ */
+ol.geom.LinearRing.isClockwise = function(coordinates) {
+  var length = coordinates.length;
+  var edge = 0;
+
+  var last = coordinates[length - 1];
+  var x1 = last[0];
+  var y1 = last[1];
+
+  var x2, y2, coord;
+  for (var i = 0; i < length; ++i) {
+    coord = coordinates[i];
+    x2 = coord[0];
+    y2 = coord[1];
+    edge += (x2 - x1) * (y2 + y1);
+    x1 = x2;
+    y1 = y2;
+  }
+  return edge > 0;
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/geom/polygon.js

@@ -10,6 +10,12 @@ goog.require('ol.geom.VertexArray');
 
 
 /**
+ * Create a polygon from an array of vertex arrays.  Coordinates for the
+ * exterior ring will be forced to clockwise order.  Coordinates for any
+ * interior rings will be forced to counter-clockwise order.  In cases where
+ * the opposite winding order occurs in the passed vertex arrays, they will
+ * be modified in place.
+ *
  * @constructor
  * @extends {ol.geom.Geometry}
  * @param {Array.<ol.geom.VertexArray>} coordinates Array of rings.  First
@@ -40,8 +46,21 @@ ol.geom.Polygon = function(coordinates, opt_shared) {
    * @type {Array.<ol.geom.LinearRing>}
    */
   this.rings = new Array(numRings);
+  var ringCoords;
   for (var i = 0; i < numRings; ++i) {
-    this.rings[i] = new ol.geom.LinearRing(coordinates[i], vertices);
+    ringCoords = coordinates[i];
+    if (i === 0) {
+      // force exterior ring to be clockwise
+      if (!ol.geom.LinearRing.isClockwise(ringCoords)) {
+        ringCoords.reverse();
+      }
+    } else {
+      // force interior rings to be counter-clockwise
+      if (ol.geom.LinearRing.isClockwise(ringCoords)) {
+        ringCoords.reverse();
+      }
+    }
+    this.rings[i] = new ol.geom.LinearRing(ringCoords, vertices);
   }
 
   /**

src/ol/parser/kml.js

@@ -763,6 +763,10 @@ ol.parser.KML = function(opt_options) {
         return node;
       },
       'Polygon': function(geometry) {
+        /**
+         * KML doesn't specify the winding order of coordinates in linear
+         * rings.  So we keep them as they are in the geometries.
+         */
         var node = this.createElementNS('Polygon');
         var coordinates = geometry.getCoordinates();
         this.writeNode('outerBoundaryIs', coordinates[0], null, node);

src/ol/parser/ogc/gml_v2.js

@@ -67,9 +67,17 @@ ol.parser.ogc.GML_v2 = function(opt_options) {
     'Polygon': function(geometry) {
       var node = this.createElementNS('gml:Polygon');
       var coordinates = geometry.getCoordinates();
-      this.writeNode('outerBoundaryIs', coordinates[0], null, node);
+      /**
+       * Though there continues to be ambiguity around this, GML references
+       * ISO 19107, which says polygons have counter-clockwise exterior rings
+       * and clockwise interior rings.  The ambiguity comes because the
+       * the Simple Feature Access - SQL spec (ISO 19125-2) says that no
+       * winding order is enforced.  Anyway, we write out counter-clockwise
+       * exterior and clockwise interior here but accept either when reading.
+       */
+      this.writeNode('outerBoundaryIs', coordinates[0].reverse(), null, node);
       for (var i = 1; i < coordinates.length; ++i) {
-        this.writeNode('innerBoundaryIs', coordinates[i], null, node);
+        this.writeNode('innerBoundaryIs', coordinates[i].reverse(), null, node);
       }
       return node;
     },

src/ol/parser/ogc/gml_v3.js

@@ -298,18 +298,26 @@ ol.parser.ogc.GML_v3 = function(opt_options) {
       var node = this.createElementNS('gml:PolygonPatch');
       node.setAttribute('interpolation', 'planar');
       var coordinates = geometry.getCoordinates();
-      this.writeNode('exterior', coordinates[0], null, node);
+      this.writeNode('exterior', coordinates[0].reverse(), null, node);
       for (var i = 1, len = coordinates.length; i < len; ++i) {
-        this.writeNode('interior', coordinates[i], null, node);
+        this.writeNode('interior', coordinates[i].reverse(), null, node);
       }
       return node;
     },
     'Polygon': function(geometry) {
       var node = this.createElementNS('gml:Polygon');
       var coordinates = geometry.getCoordinates();
-      this.writeNode('exterior', coordinates[0], null, node);
+      /**
+       * Though there continues to be ambiguity around this, GML references
+       * ISO 19107, which says polygons have counter-clockwise exterior rings
+       * and clockwise interior rings.  The ambiguity comes because the
+       * the Simple Feature Access - SQL spec (ISO 19125-2) says that no
+       * winding order is enforced.  Anyway, we write out counter-clockwise
+       * exterior and clockwise interior here but accept either when reading.
+       */
+      this.writeNode('exterior', coordinates[0].reverse(), null, node);
       for (var i = 1, len = coordinates.length; i < len; ++i) {
-        this.writeNode('interior', coordinates[i], null, node);
+        this.writeNode('interior', coordinates[i].reverse(), null, node);
       }
       return node;
     },