Support for "dashed" polylines #5159
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.BLACK.withAlpha(0.0); | ||
| 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.BLACK.withAlpha(0.0)] 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 || // | ||
|
There was a problem hiding this comment. Is the trailing There was a problem hiding this comment. Hey @pjcozzi it's not necessary and I've just pushed a change removing it. |
||
| (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; | ||
| }); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use
Cesium.Color.TRANSPARENT