CesiumGS · mramato · Apr 20, 2017 · Mar 27, 2017 · Mar 27, 2017 · Mar 27, 2017
diff --git a/Apps/Sandcastle/gallery/CZML Polyline.html b/Apps/Sandcastle/gallery/CZML Polyline.html
@@ -114,6 +114,25 @@
         "followSurface" : false,
         "width" : 10
     }
+}, {
+    "id" : "dashedLine",
+    "name" : "Blue dashed line",
+    "polyline" : {
+        "positions" : {
+            "cartographicDegrees" : [
+                -75, 45, 500000,
+                -125, 45, 500000
+            ]
+        },
+        "material" : {
+            "polylineDash" : {
+                "color" : {
+                    "rgba" : [0, 255, 255, 255]
+                }
+            }
+        },
+        "width" : 4
+    }
 }];
 
 var viewer = new Cesium.Viewer('cesiumContainer');

diff --git a/Apps/Sandcastle/gallery/Polyline Dash.html b/Apps/Sandcastle/gallery/Polyline Dash.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Draw dashed polylines.">
+    <meta name="cesium-sandcastle-labels" content="Geometries">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar"></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer');
+
+var redLine = viewer.entities.add({
+    name : 'Red dashed line',
+    polyline : {
+        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 38, 250000,
+                                                        -125, 38, 250000]),
+        width : 5,
+        material : new Cesium.PolylineDashMaterialProperty({
+            color: Cesium.Color.RED
+        })
+    }
+});
+
+var blueLine = viewer.entities.add({
+    name : 'Wide blue dashed line with a gap color',
+    polyline : {
+        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 40, 250000,
+                                                        -125, 40, 250000]),
+        width : 30,
+        material : new Cesium.PolylineDashMaterialProperty({
+            color : Cesium.Color.BLUE,
+            gapColor: Cesium.Color.YELLOW
+        })
+    }
+});
+
+var orangeLine = viewer.entities.add({
+    name : 'Orange dashed line with a short dash length',
+    polyline : {
+        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 42, 250000,
+                                                               -125, 42, 250000]),
+        width : 5,
+        material : new Cesium.PolylineDashMaterialProperty({
+            color : Cesium.Color.ORANGE,
+            dashLength: 8.0
+        })
+    }
+});
+
+var cyanLine = viewer.entities.add({
+    name : 'Cyan dashed line with a dash pattern.',
+    polyline : {
+        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 44, 250000,
+                                                               -125, 44, 250000]),
+        width : 10,
+        material : new Cesium.PolylineDashMaterialProperty({
+            color : Cesium.Color.CYAN,
+            dashPattern: parseInt("110000001111", 2)
+        })
+    }
+});
+
+var yellowLine = viewer.entities.add({
+    name : 'Yellow dashed line with a dash pattern.',
+    polyline : {
+        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 46, 250000,
+                                                               -125, 46, 250000]),
+        width : 10,
+        material : new Cesium.PolylineDashMaterialProperty({
+            color : Cesium.Color.YELLOW,
+            dashPattern: parseInt("1010101010101010", 2)
+        })
+    }
+});
+
+
+viewer.zoomTo(viewer.entities);
+//Sandcastle_End
+Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Polyline Dash.jpg b/Apps/Sandcastle/gallery/Polyline Dash.jpg
diff --git a/Apps/Sandcastle/gallery/Polyline.html b/Apps/Sandcastle/gallery/Polyline.html
@@ -77,6 +77,18 @@
     }
 });
 
+var dashedLine = viewer.entities.add({
+    name : 'Blue dashed line',
+    polyline : {
+        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 45, 500000,
+                                                               -125, 45, 500000]),
+        width : 4,
+        material : new Cesium.PolylineDashMaterialProperty({
+            color: Cesium.Color.CYAN
+        })
+    }
+});
+
 viewer.zoomTo(viewer.entities);
 //Sandcastle_End
 Sandcastle.finishedLoading();

diff --git a/CHANGES.md b/CHANGES.md
@@ -4,6 +4,7 @@ Change Log
 ### 1.33 - 2017-05-01
 
 * Added `disableDepthTestDistance` to billboards, points and labels. This sets the distance to the camera where the depth test will be disabled. Setting it to zero (the default) will alwasy enable the depth test. Setting it to `Number.POSITVE_INFINITY` will never enabled the depth test. Also added `scene.minimumDisableDepthTestDistance` to change the default value from zero. [#5166](https://github.com/AnalyticalGraphicsInc/cesium/pull/5166)
+* Added support for dashed polylines [#5159](https://github.com/AnalyticalGraphicsInc/cesium/pull/5159)
 
 ### 1.32 - 2017-04-03
 

diff --git a/Source/DataSources/CzmlDataSource.js b/Source/DataSources/CzmlDataSource.js
@@ -67,6 +67,7 @@ define([
         './PointGraphics',
         './PolygonGraphics',
         './PolylineArrowMaterialProperty',
+        './PolylineDashMaterialProperty',
         './PolylineGlowMaterialProperty',
         './PolylineGraphics',
         './PolylineOutlineMaterialProperty',
@@ -152,6 +153,7 @@ define([
         PointGraphics,
         PolygonGraphics,
         PolylineArrowMaterialProperty,
+        PolylineDashMaterialProperty,
         PolylineGlowMaterialProperty,
         PolylineGraphics,
         PolylineOutlineMaterialProperty,
@@ -1009,6 +1011,15 @@ define([
             }
             materialData = packetData.polylineArrow;
             processPacketData(Color, existingMaterial, 'color', materialData.color, undefined, undefined, entityCollection);
+        } else if (defined(packetData.polylineDash)) {
+            if (!(existingMaterial instanceof PolylineDashMaterialProperty)) {
+                existingMaterial = new PolylineDashMaterialProperty();
+            }
+            materialData = packetData.polylineDash;
+            processPacketData(Color, existingMaterial, 'color', materialData.color, undefined, undefined, entityCollection);
+            processPacketData(Color, existingMaterial, 'gapColor', materialData.gapColor, undefined, undefined, entityCollection);
+            processPacketData(Number, existingMaterial, 'dashLength', materialData.dashLength, undefined, sourceUri, entityCollection);
+            processPacketData(Number, existingMaterial, 'dashPattern', materialData.dashPattern, undefined, sourceUri, entityCollection);
         }
 
         if (defined(existingInterval)) {

diff --git a/Source/DataSources/PolylineDashMaterialProperty.js b/Source/DataSources/PolylineDashMaterialProperty.js
@@ -0,0 +1,156 @@
+/*global define*/
+define([
+        '../Core/Color',
+        '../Core/defaultValue',
+        '../Core/defined',
+        '../Core/defineProperties',
+        '../Core/Event',
+        './createPropertyDescriptor',
+        './Property'
+    ], function(
+        Color,
+        defaultValue,
+        defined,
+        defineProperties,
+        Event,
+        createPropertyDescriptor,
+        Property) {
+    'use strict';
+
+    var defaultColor = Color.WHITE;
+    var defaultGapColor = Color.TRANSPARENT;
+    var defaultDashLength = 16.0;
+    var defaultDashPattern = 255.0;
+
+    /**
+     * A {@link MaterialProperty} that maps to polyline dash {@link Material} uniforms.
+     * @alias PolylineDashMaterialProperty
+     * @constructor
+     *
+     * @param {Object} [options] Object with the following properties:
+     * @param {Property} [options.color=Color.WHITE] A Property specifying the {@link Color} of the line.
+     * @param {Property} [options.gapColor=Color.TRANSPARENT] A Property specifying the {@link Color} of the gaps in the line.
+     * @param {Property} [options.dashLength=16.0] A numeric Property specifying the length of the dash pattern in pixel.s
+     * @param {Property} [options.dashPattern=255.0] A numeric Property specifying a 16 bit pattern for the dash
+     */
+    function PolylineDashMaterialProperty(options) {
+        options = defaultValue(options, defaultValue.EMPTY_OBJECT);
+
+        this._definitionChanged = new Event();
+        this._color = undefined;
+        this._colorSubscription = undefined;
+        this._gapColor = undefined;
+        this._gapColorSubscription = undefined;
+        this._dashLength = undefined;
+        this._dashLengthSubscription = undefined;
+        this._dashPattern = undefined;
+        this._dashPatternSubscription = undefined;
+
+        this.color = options.color;
+        this.gapColor = options.gapColor;
+        this.dashLength = options.dashLength;
+        this.dashPattern = options.dashPattern;
+    }
+
+    defineProperties(PolylineDashMaterialProperty.prototype, {
+        /**
+         * Gets a value indicating if this property is constant.  A property is considered
+         * constant if getValue always returns the same result for the current definition.
+         * @memberof PolylineDashMaterialProperty.prototype
+         * @type {Boolean}
+         * @readonly
+         */
+        isConstant : {
+            get : function() {
+                return (Property.isConstant(this._color) &&
+                        Property.isConstant(this._gapColor) &&
+                        Property.isConstant(this._dashLength) &&
+                        Property.isConstant(this._dashPattern));
+            }
+        },
+        /**
+         * Gets the event that is raised whenever the definition of this property changes.
+         * The definition is considered to have changed if a call to getValue would return
+         * a different result for the same time.
+         * @memberof PolylineDashMaterialProperty.prototype
+         * @type {Event}
+         * @readonly
+         */
+        definitionChanged : {
+            get : function() {
+                return this._definitionChanged;
+            }
+        },
+        /**
+         * Gets or sets the Property specifying the {@link Color} of the line.
+         * @memberof PolylineDashMaterialProperty.prototype
+         * @type {Property}
+         */
+        color : createPropertyDescriptor('color'),
+        /**
+         * Gets or sets the Property specifying the {@link Color} of the gaps in the line.
+         * @memberof PolylineDashMaterialProperty.prototype
+         * @type {Property}
+         */
+        gapColor : createPropertyDescriptor('gapColor'),
+        /**
+         * Gets or sets the numeric Property specifying the length of a dash cycle
+         * @memberof PolylineDashMaterialProperty.prototype
+         * @type {Property}
+         */
+        dashLength : createPropertyDescriptor('dashLength'),
+        /**
+         * Gets or sets the numeric Property specifying a dash pattern
+         * @memberof PolylineDashMaterialProperty.prototype
+         * @type {Property}
+         */
+        dashPattern : createPropertyDescriptor('dashPattern')
+    });
+
+    /**
+     * Gets the {@link Material} type at the provided time.
+     *
+     * @param {JulianDate} time The time for which to retrieve the type.
+     * @returns {String} The type of material.
+     */
+    PolylineDashMaterialProperty.prototype.getType = function(time) {
+        return 'PolylineDash';
+    };
+
+    /**
+     * Gets the value of the property at the provided time.
+     *
+     * @param {JulianDate} time The time for which to retrieve the value.
+     * @param {Object} [result] The object to store the value into, if omitted, a new instance is created and returned.
+     * @returns {Object} The modified result parameter or a new instance if the result parameter was not supplied.
+     */
+    PolylineDashMaterialProperty.prototype.getValue = function(time, result) {
+        if (!defined(result)) {
+            result = {};
+        }
+        result.color = Property.getValueOrClonedDefault(this._color, time, defaultColor, result.color);
+        result.gapColor = Property.getValueOrClonedDefault(this._gapColor, time, defaultGapColor, result.gapColor);
+        result.dashLength = Property.getValueOrDefault(this._dashLength, time, defaultDashLength, result.dashLength);
+        result.dashPattern = Property.getValueOrDefault(this._dashPattern, time, defaultDashPattern, result.dashPattern);
+        return result;
+    };
+
+    /**
+     * Compares this property to the provided property and returns
+     * <code>true</code> if they are equal, <code>false</code> otherwise.
+     *
+     * @param {Property} [other] The other property.
+     * @returns {Boolean} <code>true</code> if left and right are equal, <code>false</code> otherwise.
+     */
+    PolylineDashMaterialProperty.prototype.equals = function(other) {
+        return this === other || //
+               (other instanceof PolylineDashMaterialProperty && //
+                Property.equals(this._color, other._color) &&
+                Property.equals(this._gapColor, other._gapColor) &&
+                Property.equals(this._dashLength, other._dashLength) &&
+                Property.equals(this._dashPattern, other._dashPattern)
+                );
+    };
+
+    return PolylineDashMaterialProperty;
+});