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

Update New York CityGML 3D Tileset #6555

Merged
merged 4 commits into from
May 25, 2018
Merged

Update New York CityGML 3D Tileset #6555

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
858ff1d
Update New York CityGML 3D Tileset
shehzan10 May 2, 2018
1d8471e
New New York CityGML Tileset uses Cesium World Terrain
shehzan10 May 2, 2018
093d304
Use built in radians function for styling
shehzan10 May 2, 2018
221c8e4
Update NYC Tileset (uses gltf2 PBR, fixes in batch table)
shehzan10 May 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion Apps/Sandcastle/gallery/3D Tiles Feature Picking.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
});

// Load the NYC buildings tileset
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) });
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(4258) });
viewer.scene.primitives.add(tileset);

// HTML overlay for showing feature name on mouseover
Expand Down Expand Up @@ -145,6 +145,9 @@
'<tr><th>BIN</th><td>' + pickedFeature.getProperty('BIN') + '</td></tr>' +
'<tr><th>DOITT ID</th><td>' + pickedFeature.getProperty('DOITT_ID') + '</td></tr>' +
'<tr><th>SOURCE ID</th><td>' + pickedFeature.getProperty('SOURCE_ID') + '</td></tr>' +
'<tr><th>Longitude</th><td>' + pickedFeature.getProperty('longitude') + '</td></tr>' +
'<tr><th>Latitude</th><td>' + pickedFeature.getProperty('latitude') + '</td></tr>' +
'<tr><th>Height</th><td>' + pickedFeature.getProperty('height') + '</td></tr>' +
'</tbody></table>';
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//Sandcastle_End
Expand Down
49 changes: 20 additions & 29 deletions Apps/Sandcastle/gallery/3D Tiles Feature Styling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,45 +42,41 @@
});

// Load the NYC buildings tileset.
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) });
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(4258) });
viewer.scene.primitives.add(tileset);

// Color buildings based on their height.
function colorByHeight() {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
["${height} >= 200", "rgb(102, 71, 151)"],
["${height} >= 100", "rgb(170, 162, 204)"],
["${height} >= 50", "rgb(224, 226, 238)"],
["${height} >= 25", "rgb(252, 230, 200)"],
["${height} >= 10", "rgb(248, 176, 87)"],
["${height} >= 5", "rgb(198, 106, 11)"],
["Number(${height}) >= 300", "rgba(45, 0, 75, 0.5)"],
Copy link
Contributor

Choose a reason for hiding this comment

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

We had talked about this earlier, but is the cast required? Does it suggest something is different about the new tileset?

["Number(${height}) >= 200", "rgb(102, 71, 151)"],
["Number(${height}) >= 100", "rgb(170, 162, 204)"],
["Number(${height}) >= 50", "rgb(224, 226, 238)"],
["Number(${height}) >= 25", "rgb(252, 230, 200)"],
["Number(${height}) >= 10", "rgb(248, 176, 87)"],
["Number(${height}) >= 5", "rgb(198, 106, 11)"],
["true", "rgb(127, 59, 8)"]
]
}
});
}

// Color buildings by their total area.
function colorByArea() {
tileset.style = new Cesium.Cesium3DTileStyle({
color: "mix(color('yellow'), color('red'), min(${area} / 10000.0, 1.0))"
});
}

// Color buildings by their latitude coordinate.
function colorByLatitude() {
tileset.style = new Cesium.Cesium3DTileStyle({
defines: {
latitudeRadians: "Number(${latitude}) * 0.0174532925"
Copy link
Contributor

Choose a reason for hiding this comment

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

Use built in radians function: https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/Styling#radians

},
color: {
conditions: [
["${latitude} >= 0.7125", "color('purple')"],
["${latitude} >= 0.712", "color('red')"],
["${latitude} >= 0.7115", "color('orange')"],
["${latitude} >= 0.711", "color('yellow')"],
["${latitude} >= 0.7105", "color('lime')"],
["${latitude} >= 0.710", "color('cyan')"],
["${latitudeRadians} >= 0.7125", "color('purple')"],
["${latitudeRadians} >= 0.712", "color('red')"],
["${latitudeRadians} >= 0.7115", "color('orange')"],
["${latitudeRadians} >= 0.711", "color('yellow')"],
["${latitudeRadians} >= 0.7105", "color('lime')"],
["${latitudeRadians} >= 0.710", "color('cyan')"],
["true", "color('blue')"]
]
}
Expand All @@ -91,7 +87,7 @@
function colorByDistance() {
tileset.style = new Cesium.Cesium3DTileStyle({
defines : {
distance : "distance(vec2(${longitude}, ${latitude}), vec2(-1.291777521, 0.7105706624))"
distance : "distance(vec2(Number(${longitude}) * 0.0174532925, Number(${latitude}) * 0.0174532925), vec2(-1.291777521, 0.7105706624))"
},
color : {
conditions : [
Expand All @@ -105,14 +101,14 @@
// Color buildings with a '3' in their name.
function colorByNameRegex() {
tileset.style = new Cesium.Cesium3DTileStyle({
color : "(regExp('3').test(${name})) ? color('cyan', 0.9) : color('purple', 0.1)"
color : "(regExp('3').test(String(${name}))) ? color('cyan', 0.9) : color('purple', 0.1)"
Copy link
Contributor

Choose a reason for hiding this comment

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

Is the string cast required?

});
}

// Show only buildings greater than 200 meters in height.
function hideByHeight() {
tileset.style = new Cesium.Cesium3DTileStyle({
show : "${height} > 200"
show : "Number(${height}) > 200"
});
}

Expand All @@ -121,11 +117,6 @@
onselect : function() {
colorByHeight();
}
}, {
text : 'Color By Area',
onselect : function() {
colorByArea();
}
}, {
text : 'Color By Latitude',
onselect : function() {
Expand Down
2 changes: 1 addition & 1 deletion Apps/Sandcastle/gallery/3D Tiles Inspector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
var inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;

var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) });
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(4258) });
viewer.scene.primitives.add(tileset);

tileset.readyPromise.then(function(){
Expand Down
6 changes: 3 additions & 3 deletions Apps/Sandcastle/gallery/3D Tiles Interactivity.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
});

// Load the NYC buildings tileset.
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) });
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(4258) });
scene.primitives.add(tileset);
tileset.style = new Cesium.Cesium3DTileStyle({
meta: {
Expand Down Expand Up @@ -141,8 +141,8 @@
}

function zoom(movement, feature) {
var longitude = feature.getProperty('longitude');
var latitude = feature.getProperty('latitude');
var longitude = Cesium.Math.toRadians(feature.getProperty('longitude'));
var latitude = Cesium.Math.toRadians(feature.getProperty('latitude'));
var height = feature.getProperty('height');

var positionCartographic = new Cesium.Cartographic(longitude, latitude, height * 0.5);
Expand Down