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 all commits
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
12 changes: 10 additions & 2 deletions 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 @@ -28,7 +28,11 @@
//Sandcastle_Begin
// A simple demo of 3D Tiles feature picking with hover and select behavior
// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});

viewer.scene.globe.depthTestAgainstTerrain = true;

// Set the initial camera view to look at Manhattan
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
Expand All @@ -40,7 +44,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(4693) });
viewer.scene.primitives.add(tileset);

// HTML overlay for showing feature name on mouseover
Expand Down Expand Up @@ -145,6 +149,10 @@
'<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>' +
'<tr><th>Terrain Height (Ellipsoid)</th><td>' + pickedFeature.getProperty('TerrainHeight') + '</td></tr>' +
'</tbody></table>';
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//Sandcastle_End
Expand Down
46 changes: 22 additions & 24 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 @@ -30,7 +30,11 @@
// A demo of interactive 3D Tiles styling
// Styling language Documentation: https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/Styling
// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});

viewer.scene.globe.depthTestAgainstTerrain = true;

// Set the initial camera view to look at Manhattan
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
Expand All @@ -42,7 +46,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(4693) });
viewer.scene.primitives.add(tileset);

// Color buildings based on their height.
Expand All @@ -63,24 +67,20 @@
});
}

// 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: "radians(${latitude})"
},
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,12 +91,15 @@
function colorByDistance() {
tileset.style = new Cesium.Cesium3DTileStyle({
defines : {
distance : "distance(vec2(${longitude}, ${latitude}), vec2(-1.291777521, 0.7105706624))"
distance : "distance(vec2(radians(${longitude}), radians(${latitude})), vec2(-1.291777521, 0.7105706624))"
},
color : {
conditions : [
["${distance} > 0.0002", "color('gray')"],
["true", "mix(color('yellow'), color('green'), ${distance} / 0.0002)"]
["${distance} > 0.0012","color('gray')"],
["${distance} > 0.0008", "mix(color('yellow'), color('red'), (${distance} - 0.008) / 0.0004)"],
["${distance} > 0.0004", "mix(color('green'), color('yellow'), (${distance} - 0.0004) / 0.0004)"],
["${distance} < 0.00001", "color('white')"],
["true", "mix(color('blue'), color('green'), ${distance} / 0.0004)"]
]
}
});
Expand All @@ -105,7 +108,7 @@
// 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?

});
}

Expand All @@ -121,11 +124,6 @@
onselect : function() {
colorByHeight();
}
}, {
text : 'Color By Area',
onselect : function() {
colorByArea();
}
}, {
text : 'Color By Latitude',
onselect : function() {
Expand Down
9 changes: 7 additions & 2 deletions Apps/Sandcastle/gallery/3D Tiles Inspector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,16 @@
'use strict';
//Sandcastle_Begin
// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});

viewer.scene.globe.depthTestAgainstTerrain = true;

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(4693) });
viewer.scene.primitives.add(tileset);

tileset.readyPromise.then(function(){
Expand Down
12 changes: 8 additions & 4 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 @@ -44,7 +44,11 @@
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});

viewer.scene.globe.depthTestAgainstTerrain = true;

var viewModel = {
rightClickAction: 'annotate',
Expand All @@ -69,7 +73,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(4693) });
scene.primitives.add(tileset);
tileset.style = new Cesium.Cesium3DTileStyle({
meta: {
Expand Down Expand Up @@ -141,8 +145,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