Vector Tiles #4665
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
| <meta name="description" content="Sample photogrammetry and classification datasets both rendered with 3D Tiles."> | ||
| <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles"> | ||
| <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 tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url : 'https://beta.cesium.com/api/assets/1458?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmJiNTAxOC1lOTg5LTQzN2EtODg1OC0zMWJjM2IxNGNlYmMiLCJpZCI6NDQsImFzc2V0cyI6WzE0NThdLCJpYXQiOjE0OTkyNjM4MjB9.1WKijRa-ILkmG6utrhDWX6rDgasjD7dZv-G5ZyCmkKg' | ||
| })); | ||
|
|
||
| tileset.readyPromise.then(function() { | ||
| var boundingSphere = tileset.boundingSphere; | ||
| viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius)); | ||
| viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); | ||
| }).otherwise(function(error) { | ||
| throw(error); | ||
| }); | ||
|
|
||
| var classification = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url: 'https://beta.cesium.com/api/assets/3486?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjM4MjljZi0xNTAzLTQ0MzctODhlZi0zOTU3Njg5ODA1Y2QiLCJpZCI6OCwiaWF0IjoxNDgxODI5ODMyfQ.dYlV8_PoXcFNlPHGook5kMzuJMS-Bb9DCMzI1mFVvgE', | ||
| classificationType : Cesium.ClassificationType.CESIUM_3D_TILE | ||
| })); | ||
|
|
||
| classification.readyPromise.then(function() { | ||
| classification.style = new Cesium.Cesium3DTileStyle({ | ||
| color : 'rgba(255, 0, 0, 0.5)' | ||
| }); | ||
| }).otherwise(function(error) { | ||
| throw(error); | ||
| }); | ||
|
|
||
| var nonClassification = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url: 'https://beta.cesium.com/api/assets/3486?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjM4MjljZi0xNTAzLTQ0MzctODhlZi0zOTU3Njg5ODA1Y2QiLCJpZCI6OCwiaWF0IjoxNDgxODI5ODMyfQ.dYlV8_PoXcFNlPHGook5kMzuJMS-Bb9DCMzI1mFVvgE', | ||
| show : false | ||
| })); | ||
| nonClassification.readyPromise.then(function() { | ||
| nonClassification.style = new Cesium.Cesium3DTileStyle({ | ||
| color : 'rgba(255, 0, 0, 0.5)' | ||
| }); | ||
| }).otherwise(function(error) { | ||
| throw(error); | ||
| }); | ||
|
|
||
| Cesium.when.join(classification.readyPromise, nonClassification.readyPromise).then(function() { | ||
| Sandcastle.addToggleButton('Show classification', true, function(checked) { | ||
| classification.show = checked; | ||
| nonClassification.show = !checked; | ||
| }); | ||
| }); | ||
| //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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
| <meta name="description" content="A sample Vector dataset on terrain rendered with 3D Tiles."> | ||
| <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles"> | ||
| <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> | ||
| <script id="cesium_sandcastle_script"> | ||
| function startup(Cesium) { | ||
| 'use strict'; | ||
| //Sandcastle_Begin | ||
| //Point Cloud by Prof. Peter Allen, Columbia University Robotics Lab. Scanning by Alejandro Troccoli and Matei Ciocarlie. | ||
| var viewer = new Cesium.Viewer('cesiumContainer'); | ||
|
|
||
| var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url : 'https://beta.cesium.com/api/assets/1460?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMzk2YzJiOS1jZGFmLTRlZmYtYmQ4MS00NTA3NjEwMzViZTkiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjBdLCJpYXQiOjE0OTkyNjQ3NTV9.oWjvN52CRQ-dk3xtvD4e8ZnOHZhoWSpJLlw115mbQJM' | ||
| })); | ||
|
|
||
| // Vector 3D Tiles are experimental and the format is subject to change in the future. | ||
| // For more details, see: | ||
| // https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/vector-tiles/TileFormats/VectorData | ||
|
There was a problem hiding this comment. Is this demo using the vector format? |
||
| var classification = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url: 'https://beta.cesium.com/api/assets/3469?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjM4MjljZi0xNTAzLTQ0MzctODhlZi0zOTU3Njg5ODA1Y2QiLCJpZCI6OCwiaWF0IjoxNDgxODI5ODMyfQ.dYlV8_PoXcFNlPHGook5kMzuJMS-Bb9DCMzI1mFVvgE', | ||
| skipLevelOfDetail : false, | ||
| classificationType : Cesium.ClassificationType.CESIUM_3D_TILE | ||
| })); | ||
| classification.readyPromise.then(function() { | ||
| classification.style = new Cesium.Cesium3DTileStyle({ | ||
| color : { | ||
| conditions : [ | ||
| ["${id} === 'roof1'", "color('#004FFF', 0.5)"], | ||
| ["${id} === 'towerBottom1'", "color('#33BB66', 0.5)"], | ||
| ["${id} === 'towerTop1'", "color('#0099AA', 0.5)"], | ||
| ["${id} === 'roof2'", "color('#004FFF', 0.5)"], | ||
| ["${id} === 'tower3'", "color('#FF8833', 0.5)"], | ||
| ["${id} === 'tower4'", "color('#FFAA22', 0.5)"], | ||
| ["true", "color('#FFFF00', 0.5)"] | ||
| ] | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| viewer.scene.camera.setView({ | ||
| destination : new Cesium.Cartesian3(4401448.974612145, 225038.45962842644, 4595135.776680152), | ||
| orientation : { | ||
| heading : 5.36861655457269, | ||
| pitch : -0.4029289137364358 | ||
| } | ||
| }); | ||
|
|
||
| // Information about the currently highlighted feature | ||
| var highlighted = { | ||
| feature: undefined, | ||
| originalColor: new Cesium.Color() | ||
| }; | ||
|
|
||
| // Color a feature yellow on hover. | ||
| viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) { | ||
| // If a feature was previously highlighted, undo the highlight | ||
| if (Cesium.defined(highlighted.feature)) { | ||
| highlighted.feature.color = highlighted.originalColor; | ||
| highlighted.feature = undefined; | ||
| } | ||
|
|
||
| // Pick a new feature | ||
| var pickedFeature = viewer.scene.pick(movement.endPosition); | ||
| if (!Cesium.defined(pickedFeature)) { | ||
| return; | ||
| } | ||
|
|
||
| // Highlight the feature | ||
| highlighted.feature = pickedFeature; | ||
| Cesium.Color.clone(pickedFeature.color, highlighted.originalColor); | ||
| pickedFeature.color = Cesium.Color.WHITE.withAlpha(0.5); | ||
|
There was a problem hiding this comment. Should the color be yellow instead? |
||
| }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||
| //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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
| <meta name="description" content="A sample Vector dataset on terrain rendered with 3D Tiles."> | ||
| <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles"> | ||
| <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> | ||
| <script id="cesium_sandcastle_script"> | ||
| function startup(Cesium) { | ||
| 'use strict'; | ||
| //Sandcastle_Begin | ||
| var viewer = new Cesium.Viewer('cesiumContainer'); | ||
|
|
||
| viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ | ||
| url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles', | ||
| requestWaterMask : true, | ||
| requestVertexNormals : true | ||
| }); | ||
|
|
||
| var geocoder = viewer.geocoder.viewModel; | ||
| geocoder.searchText = 'Vienna'; | ||
| geocoder.flightDuration = 0.0; | ||
| geocoder.search(); | ||
|
|
||
|
|
||
| // Vector 3D Tiles are experimental and the format is subject to change in the future. | ||
| // For more details, see: | ||
| // https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/vector-tiles/TileFormats/VectorData | ||
| var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url: 'https://beta.cesium.com/api/assets/3395?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjM4MjljZi0xNTAzLTQ0MzctODhlZi0zOTU3Njg5ODA1Y2QiLCJpZCI6OCwiaWF0IjoxNDgxODI5ODMyfQ.dYlV8_PoXcFNlPHGook5kMzuJMS-Bb9DCMzI1mFVvgE', | ||
| skipLevelOfDetail : false, | ||
| classificationType : Cesium.ClassificationType.TERRAIN | ||
| })); | ||
|
|
||
| tileset.readyPromise.then(function() { | ||
| tileset.style = new Cesium.Cesium3DTileStyle({ | ||
| color : 'rgba(255, 255, 255, 0.5)' | ||
| }); | ||
| }).otherwise(function(error) { | ||
| throw(error); | ||
| }); | ||
|
|
||
| // Information about the currently selected feature | ||
| var selected = { | ||
| feature: undefined, | ||
| originalColor: new Cesium.Color() | ||
| }; | ||
|
|
||
| // Information about the currently highlighted feature | ||
| var highlighted = { | ||
| feature: undefined, | ||
| originalColor: new Cesium.Color() | ||
| }; | ||
|
|
||
| // Color a feature yellow on hover. | ||
| viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) { | ||
| // If a feature was previously highlighted, undo the highlight | ||
| if (Cesium.defined(highlighted.feature)) { | ||
| highlighted.feature.color = highlighted.originalColor; | ||
| highlighted.feature = undefined; | ||
| } | ||
|
|
||
| // Pick a new feature | ||
| var pickedFeature = viewer.scene.pick(movement.endPosition); | ||
| if (!Cesium.defined(pickedFeature)) { | ||
| return; | ||
| } | ||
|
|
||
| // Highlight the feature if it's not already selected. | ||
| if (pickedFeature !== selected.feature) { | ||
| highlighted.feature = pickedFeature; | ||
| Cesium.Color.clone(pickedFeature.color, highlighted.originalColor); | ||
| pickedFeature.color = Cesium.Color.YELLOW; | ||
| } | ||
| }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||
|
|
||
| // Color a feature on selection and show metadata in the InfoBox. | ||
|
There was a problem hiding this comment. Remove note about the InfoBox. |
||
| var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); | ||
| viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { | ||
| // If a feature was previously selected, undo the highlight | ||
| if (Cesium.defined(selected.feature)) { | ||
| selected.feature.color = selected.originalColor; | ||
| selected.feature = undefined; | ||
| } | ||
|
|
||
| // Pick a new feature | ||
| var pickedFeature = viewer.scene.pick(movement.position); | ||
| if (!Cesium.defined(pickedFeature)) { | ||
| clickHandler(movement); | ||
| return; | ||
| } | ||
|
|
||
| // Select the feature if it's not already selected | ||
| if (selected.feature === pickedFeature) { | ||
| return; | ||
| } | ||
| selected.feature = pickedFeature; | ||
|
|
||
| // Save the selected feature's original color | ||
| if (pickedFeature === highlighted.feature) { | ||
| Cesium.Color.clone(highlighted.originalColor, selected.originalColor); | ||
| highlighted.feature = undefined; | ||
| } else { | ||
| Cesium.Color.clone(pickedFeature.color, selected.originalColor); | ||
| } | ||
|
|
||
| // Highlight newly selected feature | ||
| pickedFeature.color = Cesium.Color.LIME; | ||
| }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | ||
|
There was a problem hiding this comment. There should be a comment explaining why the selected feature doesn't stay selected when you zoom in and out, and link to CesiumGS/3d-tiles#265. |
||
| //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
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.
Will there be any Sandcastle examples using vector tiles in the more traditional sense - labels, billboards, polylines, etc? Also it's not completely clear which of the new demos are using b3dm vs. geom vs. vctr for classification. Each should have a comment about what tile format they are using.
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.
I added a comment to each example.
The
3D Tiles Terrain Classificationexample is traditional vector tiles (polygons draped on terrain). There are no polylines or points/billboards/labels. This is the best I can do until I find better open data and better tiling.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.
I opened an issue to keep track of this: #6095