Height Reference for Corridor, Ellipse, Polygon and Rectangle #6717
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <!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="An example for how to use the GeometryHeightProperty to height reference a corridor, ellipse, polygon or rectangle."> | ||
| <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"> | ||
| if(typeof require === "function") { | ||
| require.config({ | ||
| baseUrl : '../../../Source', | ||
| waitSeconds : 120 | ||
| }); | ||
| } | ||
| </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 cesiumTerrainProvider = Cesium.createWorldTerrain(); | ||
| var ellipsoidTerrainProvider = new Cesium.EllipsoidTerrainProvider(); | ||
|
There was a problem hiding this comment. A line break could probably help here. |
||
| var viewer = new Cesium.Viewer('cesiumContainer', { | ||
| baseLayerPicker: false, | ||
| terrainProvider: cesiumTerrainProvider | ||
| }); | ||
| viewer.scene.globe.depthTestAgainstTerrain = true; | ||
|
There was a problem hiding this comment. Maybe a comment stating why we need to enable depthTestAgainstTerrain for this demo. |
||
|
|
||
| Sandcastle.addToolbarButton('Enable Terrain', function() { | ||
|
There was a problem hiding this comment. I would make this a checkbox instead of a button and perhaps fly the camera to the location when it changes (because the shapes went mostly out of view when I toggled it because they dropped so far). |
||
| viewer.scene.terrainProvider = cesiumTerrainProvider; | ||
| }); | ||
|
|
||
| Sandcastle.addToolbarButton('Disable Terrain', function() { | ||
| viewer.scene.terrainProvider = ellipsoidTerrainProvider; | ||
| }); | ||
|
|
||
|
|
||
|
|
||
| var baseLon = 6.850615989890521; | ||
| var baseLat = 45.89546589994886; | ||
| var delta = 0.001; | ||
| function addEntity(i, j) { | ||
| var lon1 = baseLon + delta*i; | ||
|
There was a problem hiding this comment. Run the formatter on this example |
||
| var lon2 = baseLon + delta*i + delta; | ||
|
|
||
| var lat1 = baseLat + delta*j; | ||
| var lat2 = baseLat + delta*j + delta; | ||
| var a = Cesium.Cartesian3.fromDegrees(lon1, lat1); | ||
|
There was a problem hiding this comment. Try looking at this with beginners eyes. Can be do better with variable names here? Is this north/source/east/west? Why are these polygons instead of rectangles? |
||
| var b = Cesium.Cartesian3.fromDegrees(lon1, lat2); | ||
| var c = Cesium.Cartesian3.fromDegrees(lon2, lat2); | ||
| var d = Cesium.Cartesian3.fromDegrees(lon2, lat1); | ||
|
|
||
| var positions = [a, b, c, d]; | ||
| viewer.entities.add({ | ||
| polygon : { | ||
| hierarchy : positions, | ||
| material : Cesium.Color.fromRandom({alpha: 1}), | ||
| height : new Cesium.GeometryHeightProperty(40.0, Cesium.HeightReference.RELATIVE_TO_GROUND), | ||
| extrudedHeight : new Cesium.GeometryHeightProperty(0.0, Cesium.HeightReference.CLAMP_TO_GROUND) | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| for (var i = 0; i < 4; i++) { | ||
|
There was a problem hiding this comment. More context/explanation would be good here as well. Again, look at it with beginner's eyes. |
||
| for (var j = 0; j < 4; j++) { | ||
| addEntity(i, j); | ||
| } | ||
| } | ||
|
|
||
| viewer.scene.camera.flyTo({ | ||
|
There was a problem hiding this comment. We shouldn't hard code camera numbers because the result is not the same for all screen sizes/aspect ratios and it also makes Cesium look hard to use. Use the viewer zoom functions instead, if you can't do this view with those, right up an issue. There was a problem hiding this comment. Yeah, I just did this because I was trying to find a spot that you could see the polygons both with and without terrain There was a problem hiding this comment. Well actually, this doesn't work for the same reason |
||
| destination: new Cesium.Cartesian3(4414709.69060132, 531290.9290968775, 4561007.639489886), | ||
| orientation: { | ||
| heading: 3.6086529754485834, | ||
| pitch: -0.6592870741832781, | ||
| roll: 6.28127756699859 | ||
| } | ||
| }); | ||
| //Sandcastle_End | ||
| Sandcastle.finishedLoading(); | ||
| } | ||
| if (typeof Cesium !== "undefined") { | ||
| startup(Cesium); | ||
| } else if (typeof require === "function") { | ||
| require(["Cesium"], startup); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> | ||
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.
My comments in #6434 (comment) still apply here. I would also like to see some inline comments to explain the feature. If I'm just trying to learn Cesium's capabilities from Sandcastle examples, there's very little context here.