Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GeoJSON defaults #2256

Merged
merged 8 commits into from Nov 7, 2014
Merged

GeoJSON defaults #2256

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c00095c
Add ability to set GeoJSON defaults.
mramato Nov 5, 2014
aceba80
Merge remote-tracking branch 'origin/master' into geojson-defaults
mramato Nov 5, 2014
c53bb23
Allow GeoJSON styling options to be specified at load time.
mramato Nov 5, 2014
998361d
Update CHANGES
mramato Nov 5, 2014
706ed95
Fix jsHint error.
mramato Nov 5, 2014
5b0ba5c
Merge branch 'dataSource-outlineWidth' into geojson-defaults
mramato Nov 6, 2014
b8d43bb
Changes after review.
mramato Nov 6, 2014
c498f76
Merge remote-tracking branch 'origin/master' into geojson-defaults
mramato Nov 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 15 additions & 6 deletions Apps/Sandcastle/gallery/GeoJSON and TopoJSON.html
View file
Open in desktop
Expand Up @@ -27,18 +27,25 @@
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
//Create the viewer
var viewer = new Cesium.Viewer('cesiumContainer');
Cesium.viewerEntityMixin(viewer);

//Example 1: Load a GeoJSON or TopoJSON file with default settings.
Sandcastle.addDefaultToolbarButton('Basic loading', function() {
//Example 1: Load with default styling.
Sandcastle.addDefaultToolbarButton('Default styling', function() {
viewer.dataSources.add(Cesium.GeoJsonDataSource.fromUrl('../../SampleData/ne_10m_us_states.topojson'));
});

//Example 2: Apply custom graphics to a GeoJSON or TopoJSON file
//based on the metadata contained in the file.
Sandcastle.addToolbarButton('Custom Graphics', function() {
//Example 2: Load with basic styling options.
Sandcastle.addToolbarButton('Basic styling', function() {
viewer.dataSources.add(Cesium.GeoJsonDataSource.fromUrl('../../SampleData/ne_10m_us_states.topojson', {
stroke: Cesium.Color.HOTPINK,
fill: Cesium.Color.PINK,
strokeWidth: 3
}));
});

//Example 3: Apply custom graphics after load.
Sandcastle.addToolbarButton('Custom styling', function() {
//Seed the random number generator for repeatable results.
Cesium.Math.setRandomNumberSeed(0);

Expand Down Expand Up @@ -68,6 +75,8 @@

//Set the polygon material to our random color.
entity.polygon.material = Cesium.ColorMaterialProperty.fromColor(color);
//Outline each polygon in black.
entity.polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);

//Extrude the polygon based on the state's population. Each entity
//stores the properties for the GeoJSON feature it was created from
Expand Down
6 changes: 6 additions & 0 deletions CHANGES.md
View file
Open in desktop
Expand Up @@ -3,8 +3,14 @@ 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.
* Added the ability to specify global GeoJSON default styling. See the [documentation](http://cesiumjs.org/Cesium/Build/Documentation/GeoJsonDataSource.html) for details.
* Added an options parameter to `GeoJsonDataSource.load`, `GeoJsonDataSource.loadUrl`, and `GeoJsonDataSource.fromUrl` to allow for basic per-instance styling. [Sandcastle example](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=Showcases).
* Fixed a bug in `PolylineGeometry` that would cause the geometry to be split across the IDL for 3D only scenes. [#1197](https://github.com/AnalyticalGraphicsInc/cesium/issues/1197)
* Deprecated the `sourceUri` parameter to `GeoJsonDatasource.load`, use `options.sourceUri` instead.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should go in a Deprecated section at the top, I believe.


### 1.3 - 2014-11-03

Expand Down
5 changes: 5 additions & 0 deletions Source/DataSources/CzmlDataSource.js
View file
Open in desktop
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}

Expand Down
34 changes: 32 additions & 2 deletions Source/DataSources/EllipseGeometryUpdater.js
View file
Open in desktop
Expand Up @@ -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;
Expand All @@ -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);
};
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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,
Expand All @@ -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.clampLineWidth(outlineWidth)
}
}),
asynchronous : false
});
Expand Down
13 changes: 12 additions & 1 deletion Source/DataSources/EllipseGraphics.js
View file
Open in desktop
Expand Up @@ -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();
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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;
};
Expand Down Expand Up @@ -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);
};

Expand Down
34 changes: 32 additions & 2 deletions Source/DataSources/EllipsoidGeometryUpdater.js
View file
Open in desktop
Expand Up @@ -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);
};
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -512,6 +529,7 @@ define([
this._attributes = undefined;
this._outlineAttributes = undefined;
this._lastSceneMode = undefined;
this._lastOutlineWidth = undefined;
};

DynamicGeometryUpdater.prototype.update = function(time) {
Expand Down Expand Up @@ -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;

Expand All @@ -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;
Expand Down Expand Up @@ -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.clampLineWidth(outlineWidth)
}
}),
asynchronous : false
});
Expand Down
15 changes: 15 additions & 0 deletions Source/DataSources/EllipsoidGraphics.js
View file
Open in desktop
Expand Up @@ -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();
};

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down