Add support for Cesium rectangles (#356)

Allow drawing rectangles along longitude/latitude lines

CHANGES.md

@@ -1,5 +1,11 @@
 # Changelog
 
+* Changes
+  * Add support for drawing rectangles according to the longitude and latitude
+    curves instead of straight lines. This functionality can be activated by
+    setting the olcs.polygon_kind property to 'rectangle' on the OpenLayers
+    geometry.
+
 ## v 1.15 - 2016-04-28
 
 * Changes

Cesium.externs.js

@@ -1482,6 +1482,27 @@ Cesium.optionsPolylineGeometry;
 Cesium.PolygonOutlineGeometry = function(object) {};
 
 
+/**
+ * @typedef {{
+ * rectangle: !Cesium.Rectangle,
+ * ellipsoid: (Cesium.Ellipsoid|undefined),
+ * granularity: (number|undefined),
+ * height: (number|undefined),
+ * rotation: (number|undefined),
+ * extrudedHeight: (number|undefined)
+ * }}
+ */
+Cesium.optionsRectangleOutlineGeometry;
+
+
+/**
+ * @constructor
+ * @param {Cesium.optionsRectangleOutlineGeometry} opt_opts
+ * @extends {Cesium.Geometry}
+ */
+Cesium.RectangleOutlineGeometry = function(opt_opts) {};
+
+
 /**
  * @typedef {{
  * positions: !Array.<Cesium.Cartesian3>,
@@ -1499,6 +1520,31 @@ Cesium.optionsPolylineGeometry;
 Cesium.PolylineGeometry = function(object) {};
 
 
+/**
+ * @typedef {{
+ * rectangle: !Cesium.Rectangle,
+ * vertexFormat: (Cesium.VertexFormat|undefined),
+ * ellipsoid: (Cesium.Ellipsoid|undefined),
+ * granularity: (number|undefined),
+ * height: (number|undefined),
+ * rotation: (number|undefined),
+ * stRotation: (number|undefined),
+ * extrudedHeight: (number|undefined),
+ * closeTop: (boolean|undefined),
+ * closeBottom: (boolean|undefined)
+ * }}
+ */
+Cesium.optionsRectangleGeometry;
+
+
+/**
+ * @constructor
+ * @param {Cesium.optionsRectangleGeometry} opt_opts
+ * @extends {Cesium.Geometry}
+ */
+Cesium.RectangleGeometry = function(opt_opts) {};
+
+
 
 /**
  * @constructor

examples/vectors.js

@@ -21,32 +21,32 @@ var iconStyle = new ol.style.Style({
     src: 'data/icon.png'
   })),
   text: new ol.style.Text({
-     text: 'Some text',
-     textAlign: 'center',
-     textBaseline: 'middle',
-     stroke: new ol.style.Stroke({
-       color: 'magenta',
-       width: 3
-     }),
-     fill: new ol.style.Fill({
-       color: 'rgba(0, 0, 155, 0.3)'
-     })
-   })
+    text: 'Some text',
+    textAlign: 'center',
+    textBaseline: 'middle',
+    stroke: new ol.style.Stroke({
+      color: 'magenta',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(0, 0, 155, 0.3)'
+    })
+  })
 });
 
 var textStyle = new ol.style.Style({
   text: new ol.style.Text({
-     text: 'Only text',
-     textAlign: 'center',
-     textBaseline: 'middle',
-     stroke: new ol.style.Stroke({
-       color: 'red',
-       width: 3
-     }),
-     fill: new ol.style.Fill({
-       color: 'rgba(0, 0, 155, 0.3)'
-     })
-   })
+    text: 'Only text',
+    textAlign: 'center',
+    textBaseline: 'middle',
+    stroke: new ol.style.Stroke({
+      color: 'red',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(0, 0, 155, 0.3)'
+    })
+  })
 });
 
 iconFeature.setStyle(iconStyle);
@@ -147,13 +147,49 @@ var vectorSource = new ol.source.Vector({
 
 var theCircle = new ol.Feature(new ol.geom.Circle([5e6, 7e6, 5e5], 1e6));
 
+// Add a Cesium rectangle, via setting the property olcs.polygon_kind
+var cartographicRectangleStyle = new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: 'rgba(255, 69, 0, 0.7)'
+  }),
+  stroke: new ol.style.Stroke({
+    color: 'rgba(255, 69, 0, 0.9)',
+    width: 1
+  })
+});
+var cartographicRectangleGeometry = new ol.geom.Polygon([[[-5e6, 11e6],
+        [4e6, 11e6], [4e6, 10.5e6], [-5e6, 10.5e6], [-5e6, 11e6]]]);
+cartographicRectangleGeometry.set('olcs.polygon_kind', 'rectangle');
+var cartographicRectangle = new ol.Feature({
+  geometry: cartographicRectangleGeometry
+});
+cartographicRectangle.setStyle(cartographicRectangleStyle);
+
+// Add two Cesium rectangles with height and the property olcs.polygon_kind
+var cartographicRectangleGeometry2 = new ol.geom.MultiPolygon([
+  [[
+    [-5e6, 12e6, 0], [4e6, 12e6, 0], [4e6, 11.5e6, 0], [-5e6, 11.5e6, 0],
+    [-5e6, 12e6, 0]
+  ]],
+  [[
+    [-5e6, 11.5e6, 1e6], [4e6, 11.5e6, 1e6], [4e6, 11e6, 1e6],
+    [-5e6, 11e6, 1e6], [-5e6, 11.5e6, 1e6]
+  ]]
+]);
+cartographicRectangleGeometry2.set('olcs.polygon_kind', 'rectangle');
+var cartographicRectangle2 = new ol.Feature({
+  geometry: cartographicRectangleGeometry2
+});
+cartographicRectangle2.setStyle(cartographicRectangleStyle);
+
 var vectorLayer = new ol.layer.Vector({
   source: vectorSource,
   style: styleFunction
 });
 
 var vectorSource2 = new ol.source.Vector({
-  features: [iconFeature, textFeature, cervinFeature]
+  features: [iconFeature, textFeature, cervinFeature, cartographicRectangle,
+    cartographicRectangle2]
 });
 var imageVectorSource = new ol.source.ImageVector({
   source: vectorSource2

src/featureconverter.js

@@ -397,38 +397,70 @@ olcs.FeatureConverter.prototype.olPolygonGeometryToCesium =
   olGeometry = olcs.core.olGeometryCloneTo4326(olGeometry, projection);
   goog.asserts.assert(olGeometry.getType() == 'Polygon');
 
-  var rings = olGeometry.getLinearRings();
-  // always update Cesium externs before adding a property
-  var hierarchy = {};
-  var polygonHierarchy = hierarchy;
-  goog.asserts.assert(rings.length > 0);
-
-  for (var i = 0; i < rings.length; ++i) {
-    var olPos = rings[i].getCoordinates();
-    var positions = olcs.core.ol4326CoordinateArrayToCsCartesians(olPos);
-    goog.asserts.assert(positions && positions.length > 0);
-    if (i == 0) {
-      hierarchy.positions = positions;
-    } else {
-      hierarchy.holes = {
-        // always update Cesium externs before adding a property
-        positions: positions
-      };
-      hierarchy = hierarchy.holes;
+  var fillGeometry, outlineGeometry;
+  if ((olGeometry.getCoordinates()[0].length == 5) &&
+      (feature.getGeometry().get('olcs.polygon_kind') === 'rectangle')) {
+    // Create a rectangle according to the longitude and latitude curves
+    var coordinates = olGeometry.getCoordinates()[0];
+    // Extract the West, South, East, North coordinates
+    var extent = ol.extent.boundingExtent(coordinates);
+    var rectangle = Cesium.Rectangle.fromDegrees(extent[0], extent[1],
+        extent[2], extent[3]);
+
+    // Extract the average height of the vertices
+    var maxHeight = 0.0;
+    if (coordinates[0].length == 3) {
+      for (var c = 0; c < coordinates.length; c++) {
+        maxHeight = Math.max(maxHeight, coordinates[c][2]);
+      }
     }
-  }
 
-  var fillGeometry = new Cesium.PolygonGeometry({
-    // always update Cesium externs before adding a property
-    polygonHierarchy: polygonHierarchy,
-    perPositionHeight: true
-  });
+    // Render the cartographic rectangle
+    fillGeometry = new Cesium.RectangleGeometry({
+      ellipsoid: Cesium.Ellipsoid.WGS84,
+      rectangle: rectangle,
+      height: maxHeight
+    });
 
-  var outlineGeometry = new Cesium.PolygonOutlineGeometry({
+    outlineGeometry = new Cesium.RectangleOutlineGeometry({
+      ellipsoid: Cesium.Ellipsoid.WGS84,
+      rectangle: rectangle,
+      height: maxHeight
+    });
+  } else {
+    var rings = olGeometry.getLinearRings();
     // always update Cesium externs before adding a property
-    polygonHierarchy: hierarchy,
-    perPositionHeight: true
-  });
+    var hierarchy = {};
+    var polygonHierarchy = hierarchy;
+    goog.asserts.assert(rings.length > 0);
+
+    for (var i = 0; i < rings.length; ++i) {
+      var olPos = rings[i].getCoordinates();
+      var positions = olcs.core.ol4326CoordinateArrayToCsCartesians(olPos);
+      goog.asserts.assert(positions && positions.length > 0);
+      if (i == 0) {
+        hierarchy.positions = positions;
+      } else {
+        hierarchy.holes = {
+          // always update Cesium externs before adding a property
+          positions: positions
+        };
+        hierarchy = hierarchy.holes;
+      }
+    }
+
+    fillGeometry = new Cesium.PolygonGeometry({
+      // always update Cesium externs before adding a property
+      polygonHierarchy: polygonHierarchy,
+      perPositionHeight: true
+    });
+
+    outlineGeometry = new Cesium.PolygonOutlineGeometry({
+      // always update Cesium externs before adding a property
+      polygonHierarchy: hierarchy,
+      perPositionHeight: true
+    });
+  }
 
   var primitives = this.wrapFillAndOutlineGeometries(
       layer, feature, olGeometry, fillGeometry, outlineGeometry, olStyle);