Data source outline width

CHANGES.md

@@ -3,6 +3,9 @@ Change Log
 
 ### 1.4 - 2014-12-01
 
+* Added geometry outline width support to the `DataSource` layer.  This is exposed via the new `outlineWidth` property on `EllipseGraphics`, `EllipsoidGraphics`, `PolygonGraphics`, `RectangleGraphics`, and `WallGraphics`.
+* Added `outlineWidth` support to CZML geometry packets.
+* Added `stroke-width` support to the GeoJSON simple-style implementation.
 * Added `modelMatrix` option to `Primitive` constructor.
 
 ### 1.3 - 2014-11-03

Source/DataSources/CzmlDataSource.js

@@ -1054,6 +1054,7 @@ define([
         processPacketData(Boolean, ellipse, 'fill', ellipseData.fill, interval, sourceUri, entityCollection);
         processPacketData(Boolean, ellipse, 'outline', ellipseData.outline, interval, sourceUri, entityCollection);
         processPacketData(Color, ellipse, 'outlineColor', ellipseData.outlineColor, interval, sourceUri, entityCollection);
+        processPacketData(Number, ellipse, 'outlineWidth', ellipseData.outlineWidth, interval, sourceUri, entityCollection);
         processPacketData(Number, ellipse, 'numberOfVerticalLines', ellipseData.numberOfVerticalLines, interval, sourceUri, entityCollection);
     }
 
@@ -1081,6 +1082,7 @@ define([
         processPacketData(Boolean, ellipsoid, 'fill', ellipsoidData.fill, interval, sourceUri, entityCollection);
         processPacketData(Boolean, ellipsoid, 'outline', ellipsoidData.outline, interval, sourceUri, entityCollection);
         processPacketData(Color, ellipsoid, 'outlineColor', ellipsoidData.outlineColor, interval, sourceUri, entityCollection);
+        processPacketData(Number, ellipsoid, 'outlineWidth', ellipsoidData.outlineWidth, interval, sourceUri, entityCollection);
     }
 
     function processLabel(entity, packet, entityCollection, sourceUri) {
@@ -1217,6 +1219,7 @@ define([
         processPacketData(Boolean, polygon, 'fill', polygonData.fill, interval, sourceUri, entityCollection);
         processPacketData(Boolean, polygon, 'outline', polygonData.outline, interval, sourceUri, entityCollection);
         processPacketData(Color, polygon, 'outlineColor', polygonData.outlineColor, interval, sourceUri, entityCollection);
+        processPacketData(Number, polygon, 'outlineWidth', polygonData.outlineWidth, interval, sourceUri, entityCollection);
         processPacketData(Boolean, polygon, 'perPositionHeight', polygonData.perPositionHeight, interval, sourceUri, entityCollection);
         processPositions(polygon, polygonData.positions, entityCollection);
     }
@@ -1250,6 +1253,7 @@ define([
         processPacketData(Boolean, rectangle, 'fill', rectangleData.fill, interval, sourceUri, entityCollection);
         processPacketData(Boolean, rectangle, 'outline', rectangleData.outline, interval, sourceUri, entityCollection);
         processPacketData(Color, rectangle, 'outlineColor', rectangleData.outlineColor, interval, sourceUri, entityCollection);
+        processPacketData(Number, rectangle, 'outlineWidth', rectangleData.outlineWidth, interval, sourceUri, entityCollection);
         processPacketData(Boolean, rectangle, 'closeBottom', rectangleData.closeBottom, interval, sourceUri, entityCollection);
         processPacketData(Boolean, rectangle, 'closeTop', rectangleData.closeTop, interval, sourceUri, entityCollection);
     }
@@ -1280,6 +1284,7 @@ define([
         processPacketData(Boolean, wall, 'fill', wallData.fill, interval, sourceUri, entityCollection);
         processPacketData(Boolean, wall, 'outline', wallData.outline, interval, sourceUri, entityCollection);
         processPacketData(Color, wall, 'outlineColor', wallData.outlineColor, interval, sourceUri, entityCollection);
+        processPacketData(Number, wall, 'outlineWidth', wallData.outlineWidth, interval, sourceUri, entityCollection);
         processPositions(wall, wallData.positions, entityCollection);
     }
 

Source/DataSources/EllipseGeometryUpdater.js

@@ -70,15 +70,20 @@ define([
      * @constructor
      *
      * @param {Entity} entity The entity containing the geometry to be visualized.
+     * @param {Scene} scene The scene where visualization is taking place.
      */
-    var EllipseGeometryUpdater = function(entity) {
+    var EllipseGeometryUpdater = function(entity, scene) {
         //>>includeStart('debug', pragmas.debug);
         if (!defined(entity)) {
             throw new DeveloperError('entity is required');
         }
+        if (!defined(scene)) {
+            throw new DeveloperError('scene is required');
+        }
         //>>includeEnd('debug');
 
         this._entity = entity;
+        this._scene = scene;
         this._entitySubscription = entity.definitionChanged.addEventListener(EllipseGeometryUpdater.prototype._onEntityPropertyChanged, this);
         this._fillEnabled = false;
         this._isClosed = false;
@@ -90,6 +95,7 @@ define([
         this._hasConstantOutline = true;
         this._showOutlineProperty = undefined;
         this._outlineColorProperty = undefined;
+        this._outlineWidth = 1.0;
         this._options = new GeometryOptions(entity);
         this._onEntityPropertyChanged(entity, 'ellipse', entity.ellipse, undefined);
     };
@@ -204,6 +210,19 @@ define([
                 return this._outlineColorProperty;
             }
         },
+        /**
+         * Gets the constant with of the geometry outline, in pixels.
+         * This value is only valid if isDynamic is false.
+         * @memberof EllipseGeometryUpdater.prototype
+         *
+         * @type {Number}
+         * @readonly
+         */
+        outlineWidth : {
+            get : function() {
+                return this._outlineWidth;
+            }
+        },
         /**
          * Gets a value indicating if the geometry is time-varying.
          * If true, all visualization is delegated to the {@link DynamicGeometryUpdater}
@@ -430,6 +449,7 @@ define([
         var extrudedHeight = ellipse.extrudedHeight;
         var granularity = ellipse.granularity;
         var stRotation = ellipse.stRotation;
+        var outlineWidth = ellipse.outlineWidth;
         var numberOfVerticalLines = ellipse.numberOfVerticalLines;
 
         this._isClosed = defined(extrudedHeight);
@@ -444,6 +464,7 @@ define([
             !Property.isConstant(extrudedHeight) || //
             !Property.isConstant(granularity) || //
             !Property.isConstant(stRotation) || //
+            !Property.isConstant(outlineWidth) || //
             !Property.isConstant(numberOfVerticalLines)) {
             if (!this._dynamic) {
                 this._dynamic = true;
@@ -461,6 +482,7 @@ define([
             options.granularity = defined(granularity) ? granularity.getValue(Iso8601.MINIMUM_VALUE) : undefined;
             options.stRotation = defined(stRotation) ? stRotation.getValue(Iso8601.MINIMUM_VALUE) : undefined;
             options.numberOfVerticalLines = defined(numberOfVerticalLines) ? numberOfVerticalLines.getValue(Iso8601.MINIMUM_VALUE) : undefined;
+            this._outlineWidth = defined(outlineWidth) ? outlineWidth.getValue(Iso8601.MINIMUM_VALUE) : 1.0;
             this._dynamic = false;
             this._geometryChanged.raiseEvent(this);
         }
@@ -571,6 +593,8 @@ define([
             options.numberOfVerticalLines = defined(numberOfVerticalLines) ? numberOfVerticalLines.getValue(time) : undefined;
 
             var outlineColor = defined(ellipse.outlineColor) ? ellipse.outlineColor.getValue(time) : Color.BLACK;
+            var outlineWidth = defined(ellipse.outlineWidth) ? ellipse.outlineWidth.getValue(time) : 1.0;
+
             this._outlinePrimitive = new Primitive({
                 geometryInstances : new GeometryInstance({
                     id : entity,
@@ -581,7 +605,13 @@ define([
                 }),
                 appearance : new PerInstanceColorAppearance({
                     flat : true,
-                    translucent : outlineColor.alpha !== 1.0
+                    translucent : outlineColor.alpha !== 1.0,
+                    renderState : {
+                        depthTest : {
+                            enabled : true
+                        },
+                        lineWidth : geometryUpdater._scene.context.putLineWidthInValidRange(outlineWidth)
+                    }
                 }),
                 asynchronous : false
             });

Source/DataSources/EllipseGraphics.js

@@ -44,6 +44,8 @@ define([
         this._outlineSubscription = undefined;
         this._outlineColor = undefined;
         this._outlineColorSubscription = undefined;
+        this._outlineWidth = undefined;
+        this._outlineWidthSubscription = undefined;
         this._numberOfVerticalLines = undefined;
         this._numberOfVerticalLinesSubscription = undefined;
         this._definitionChanged = new Event();
@@ -146,12 +148,19 @@ define([
         outline : createPropertyDescriptor('outline'),
 
         /**
-         * Gets or sets the Color {@link Property} specifying whether the color of the outline.
+         * Gets or sets the Color {@link Property} specifying the color of the outline.
          * @memberof EllipseGraphics.prototype
          * @type {Property}
          */
         outlineColor : createPropertyDescriptor('outlineColor'),
 
+        /**
+         * Gets or sets the Number {@link Property} specifying the width of the outline.
+         * @memberof EllipseGraphics.prototype
+         * @type {Property}
+         */
+        outlineWidth : createPropertyDescriptor('outlineWidth'),
+
         /**
          * Gets or sets the Number {@link Property} specifying the number of vertical lines
          * to use when outlining the ellipse.
@@ -183,6 +192,7 @@ define([
         result.fill = this.fill;
         result.outline = this.outline;
         result.outlineColor = this.outlineColor;
+        result.outlineWidth = this.outlineWidth;
         result.numberOfVerticalLines = this.numberOfVerticalLines;
         return result;
     };
@@ -212,6 +222,7 @@ define([
         this.fill = defaultValue(this.fill, source.fill);
         this.outline = defaultValue(this.outline, source.outline);
         this.outlineColor = defaultValue(this.outlineColor, source.outlineColor);
+        this.outlineWidth = defaultValue(this.outlineWidth, source.outlineWidth);
         this.numberOfVerticalLines = defaultValue(this.numberOfVerticalLines, source.numberOfVerticalLines);
     };
 

Source/DataSources/EllipsoidGeometryUpdater.js

@@ -103,6 +103,7 @@ define([
         this._hasConstantOutline = true;
         this._showOutlineProperty = undefined;
         this._outlineColorProperty = undefined;
+        this._outlineWidth = 1.0;
         this._options = new GeometryOptions(entity);
         this._onEntityPropertyChanged(entity, 'ellipsoid', entity.ellipsoid, undefined);
     };
@@ -217,6 +218,19 @@ define([
                 return this._outlineColorProperty;
             }
         },
+        /**
+         * Gets the constant with of the geometry outline, in pixels.
+         * This value is only valid if isDynamic is false.
+         * @memberof EllipsoidGeometryUpdater.prototype
+         *
+         * @type {Number}
+         * @readonly
+         */
+        outlineWidth : {
+            get : function() {
+                return this._outlineWidth;
+            }
+        },
         /**
          * Gets a value indicating if the geometry is time-varying.
          * If true, all visualization is delegated to the {@link DynamicGeometryUpdater}
@@ -450,13 +464,15 @@ define([
 
         var stackPartitions = ellipsoid.stackPartitions;
         var slicePartitions = ellipsoid.slicePartitions;
+        var outlineWidth = ellipsoid.outlineWidth;
         var subdivisions = ellipsoid.subdivisions;
 
         if (!position.isConstant || //
             !orientation.isConstant || //
             !radii.isConstant || //
             !Property.isConstant(stackPartitions) || //
             !Property.isConstant(slicePartitions) || //
+            !Property.isConstant(outlineWidth) || //
             !Property.isConstant(subdivisions)) {
             if (!this._dynamic) {
                 this._dynamic = true;
@@ -469,6 +485,7 @@ define([
             options.stackPartitions = defined(stackPartitions) ? stackPartitions.getValue(Iso8601.MINIMUM_VALUE) : undefined;
             options.slicePartitions = defined(slicePartitions) ? slicePartitions.getValue(Iso8601.MINIMUM_VALUE) : undefined;
             options.subdivisions = defined(subdivisions) ? subdivisions.getValue(Iso8601.MINIMUM_VALUE) : undefined;
+            this._outlineWidth = defined(outlineWidth) ? outlineWidth.getValue(Iso8601.MINIMUM_VALUE) : 1.0;
             this._dynamic = false;
             this._geometryChanged.raiseEvent(this);
         }
@@ -512,6 +529,7 @@ define([
         this._attributes = undefined;
         this._outlineAttributes = undefined;
         this._lastSceneMode = undefined;
+        this._lastOutlineWidth = undefined;
     };
 
     DynamicGeometryUpdater.prototype.update = function(time) {
@@ -548,9 +566,11 @@ define([
         var stackPartitionsProperty = ellipsoid.stackPartitions;
         var slicePartitionsProperty = ellipsoid.slicePartitions;
         var subdivisionsProperty = ellipsoid.subdivisions;
+        var outlineWidthProperty = ellipsoid.outlineWidth;
         var stackPartitions = defined(stackPartitionsProperty) ? stackPartitionsProperty.getValue(time) : undefined;
         var slicePartitions = defined(slicePartitionsProperty) ? slicePartitionsProperty.getValue(time) : undefined;
         var subdivisions = defined(subdivisionsProperty) ? subdivisionsProperty.getValue(time) : undefined;
+        var outlineWidth = defined(outlineWidthProperty) ? outlineWidthProperty.getValue(time) : 1.0;
 
         var options = this._options;
 
@@ -571,10 +591,14 @@ define([
 
         //We only rebuild the primitive if something other than the radii has changed
         //For the radii, we use unit sphere and then deform it with a scale matrix.
-        var rebuildPrimitives = !in3D || this._lastSceneMode !== sceneMode || !defined(this._primitive) || options.stackPartitions !== stackPartitions || options.slicePartitions !== slicePartitions || options.subdivisions !== subdivisions;
+        var rebuildPrimitives = !in3D || this._lastSceneMode !== sceneMode || !defined(this._primitive) || //
+                                options.stackPartitions !== stackPartitions || options.slicePartitions !== slicePartitions || //
+                                options.subdivisions !== subdivisions || this._lastOutlineWidth !== outlineWidth;
+
         if (rebuildPrimitives) {
             this._removePrimitives();
             this._lastSceneMode = sceneMode;
+            this._lastOutlineWidth = outlineWidth;
 
             options.stackPartitions = stackPartitions;
             options.slicePartitions = slicePartitions;
@@ -617,7 +641,13 @@ define([
                 }),
                 appearance : new PerInstanceColorAppearance({
                     flat : true,
-                    translucent : outlineColor.alpha !== 1.0
+                    translucent : outlineColor.alpha !== 1.0,
+                    renderState : {
+                        depthTest : {
+                            enabled : true
+                        },
+                        lineWidth : this._geometryUpdater._scene.context.putLineWidthInValidRange(outlineWidth)
+                    }
                 }),
                 asynchronous : false
             });

Source/DataSources/EllipsoidGraphics.js

@@ -34,6 +34,12 @@ define([
         this._slicePartitionsSubscription = undefined;
         this._subdivisions = undefined;
         this._subdivisionsSubscription = undefined;
+        this._outline = undefined;
+        this._outlineSubscription = undefined;
+        this._outlineColor = undefined;
+        this._outlineColorSubscription = undefined;
+        this._outlineWidth = undefined;
+        this._outlineWidthSubscription = undefined;
         this._definitionChanged = new Event();
     };
 
@@ -93,6 +99,13 @@ define([
          */
         outlineColor : createPropertyDescriptor('outlineColor'),
 
+        /**
+         * Gets or sets the Number {@link Property} specifying the width of the outline.
+         * @memberof EllipsoidGraphics.prototype
+         * @type {Property}
+         */
+        outlineWidth : createPropertyDescriptor('outlineWidth'),
+
         /**
          * Gets or sets the Number {@link Property} specifying the number of times to partition the ellipsoid into stacks.
          * @memberof EllipsoidGraphics.prototype
@@ -131,6 +144,7 @@ define([
         result.fill = this.fill;
         result.outline = this.outline;
         result.outlineColor = this.outlineColor;
+        result.outlineWidth = this.outlineWidth;
         result.stackPartitions = this.stackPartitions;
         result.slicePartitions = this.slicePartitions;
         result.subdivisions = this.subdivisions;
@@ -157,6 +171,7 @@ define([
         this.fill = defaultValue(this.fill, source.fill);
         this.outline = defaultValue(this.outline, source.outline);
         this.outlineColor = defaultValue(this.outlineColor, source.outlineColor);
+        this.outlineWidth = defaultValue(this.outlineWidth, source.outlineWidth);
         this.stackPartitions = defaultValue(this.stackPartitions, source.stackPartitions);
         this.slicePartitions = defaultValue(this.slicePartitions, source.slicePartitions);
         this.subdivisions = defaultValue(this.subdivisions, source.subdivisions);

Source/DataSources/GeoJsonDataSource.js

@@ -305,9 +305,15 @@ define([
     function createPolygon(dataSource, geoJson, crsFunction, coordinates) {
         var outlineColorProperty = defaultPolygonOutlineColorProperty;
         var material = defaultPolygonMaterial;
+        var widthProperty = defaultPolylineWidth;
 
         var properties = geoJson.properties;
         if (defined(properties)) {
+            var width = properties['stroke-width'];
+            if (defined(width)) {
+                widthProperty = new ConstantProperty(width);
+            }
+
             var color;
             var stroke = properties.stroke;
             if (defined(stroke)) {
@@ -346,6 +352,7 @@ define([
         var polygon = new PolygonGraphics();
         polygon.outline = defaultPolygonOutline;
         polygon.outlineColor = outlineColorProperty;
+        polygon.outlineWidth = widthProperty;
         polygon.material = material;
         polygon.positions = new ConstantProperty(coordinatesArrayToCartesianArray(coordinates, crsFunction));
         if (coordinates.length > 0 && coordinates[0].length > 2) {

Source/DataSources/GeometryUpdater.js

@@ -119,6 +119,17 @@ define([
         outlineColorProperty : {
             get : DeveloperError.throwInstantiationError
         },
+        /**
+         * Gets the constant with of the geometry outline, in pixels.
+         * This value is only valid if isDynamic is false.
+         * @memberof GeometryUpdater.prototype
+         *
+         * @type {Number}
+         * @readonly
+         */
+        outlineWidth : {
+            get : DeveloperError.throwInstantiationError
+        },
         /**
          * Gets a value indicating if the geometry is time-varying.
          * If true, all visualization is delegated to the {@link DynamicGeometryUpdater}

Source/DataSources/GeometryVisualizer.js

@@ -124,7 +124,7 @@ define([
         this._removedObjects = new AssociativeArray();
         this._changedObjects = new AssociativeArray();
 
-        this._outlineBatch = new StaticOutlineGeometryBatch(primitives);
+        this._outlineBatch = new StaticOutlineGeometryBatch(primitives, scene);
         this._closedColorBatch = new StaticGeometryColorBatch(primitives, type.perInstanceColorAppearanceType, true);
         this._closedMaterialBatch = new StaticGeometryPerMaterialBatch(primitives, type.materialAppearanceType, true);
         this._openColorBatch = new StaticGeometryColorBatch(primitives, type.perInstanceColorAppearanceType, false);