Proj4JS and Custom Projections in Columbus View #6986
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,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="Demonstration of Custom projections."> | ||
| <meta name="cesium-sandcastle-labels" content="Showcases"> | ||
| <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 projectionText = | ||
| 'function projectionFactory(callback) {\n' + | ||
| ' function project(longitude, latitude, height, result) {\n' + | ||
| ' result[0] = longitude * 6378137.0;\n' + | ||
| ' result[1] = latitude * 2.0 * 6378137.0;\n' + | ||
| ' result[2] = height + Math.abs(longitude * longitude * 1000000.0);\n' + | ||
| ' }\n' + | ||
| ' function unproject(x, y, z, result) {\n' + | ||
| ' result[0] = x / 6378137.0;\n' + | ||
| ' result[1] = y / (2.0 * 6378137.0);\n' + | ||
| ' result[2] = z - Math.abs(result[0] * result[0] * 1000000.0);\n' + | ||
| ' }\n' + | ||
| ' callback(project, unproject);\n' + | ||
| ' }\n'; | ||
| var projectionTextUrl = 'data:text/plain;base64,' + window.btoa(projectionText); | ||
|
|
||
| var customProjection = new Cesium.CustomProjection(projectionTextUrl, 'projectionFactory'); | ||
| customProjection.readyPromise | ||
|
There was a problem hiding this comment. I think this logic should be inside scene. Have the scene wait for the projection to be ready before it starts to render. This would also work when using proj4js and have Proj4Projection load the module. There was a problem hiding this comment. Looks like there are several
I'm not sure if all of that can be modified, or if there's anything else users would like to do that would break if the projection isn't ready. |
||
| .then(function(projection) { | ||
|
|
||
| var viewer = new Cesium.Viewer('cesiumContainer', { | ||
| sceneMode : Cesium.SceneMode.COLUMBUS_VIEW, | ||
| mapProjection : projection | ||
| }); | ||
|
|
||
| var pointEntities = []; | ||
| function addPoint(longitude, latitude) { | ||
| pointEntities.push(viewer.entities.add({ | ||
| position : Cesium.Cartesian3.fromDegrees(longitude, latitude), | ||
| point : { | ||
| pixelSize : 5, | ||
| color : Cesium.Color.PURPLE, | ||
| disableDepthTestDistance : Number.POSITIVE_INFINITY | ||
| }, | ||
| id : 'longitude: ' + longitude + ' latitude: ' + latitude | ||
| })); | ||
| } | ||
|
|
||
| // Add lat/long points | ||
| for (var x = -175; x < 180; x += 10) { | ||
|
There was a problem hiding this comment. Minor, but would call these locals |
||
| for (var y = -85; y < 90; y += 10) { | ||
| addPoint(x, y); | ||
| } | ||
| } | ||
|
|
||
| Sandcastle.addToolbarButton('Show/Hide Points', function() { | ||
| for (var i = 0; i < pointEntities.length; i++) { | ||
| pointEntities[i].show = !pointEntities[i].show; | ||
| } | ||
| }); | ||
|
|
||
| }).otherwise(function(e) { | ||
| console.log(e); | ||
| }); | ||
|
|
||
| //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,73 @@ | ||
| <!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="Demonstration of Proj4JS projections."> | ||
| <meta name="cesium-sandcastle-labels" content="Showcases"> | ||
| <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 viewer = new Cesium.Viewer('cesiumContainer', { | ||
| sceneMode : Cesium.SceneMode.COLUMBUS_VIEW, | ||
| mapProjection : new Cesium.Proj4Projection('+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 +b=6371000 +units=m +no_defs') | ||
| }); | ||
|
|
||
| var pointEntities = []; | ||
| function addPoint(longitude, latitude) { | ||
| pointEntities.push(viewer.entities.add({ | ||
| position : Cesium.Cartesian3.fromDegrees(longitude, latitude), | ||
| point : { | ||
| pixelSize : 5, | ||
| color : Cesium.Color.PURPLE, | ||
| disableDepthTestDistance : Number.POSITIVE_INFINITY | ||
| }, | ||
| id : 'longitude: ' + longitude + ' latitude: ' + latitude | ||
| })); | ||
| } | ||
|
|
||
| // Add lat/long points | ||
| for (var x = -175; x < 180; x += 10) { | ||
|
There was a problem hiding this comment. Same comment. Can also remove the code comment on the line above. |
||
| for (var y = -85; y < 90; y += 10) { | ||
| addPoint(x, y); | ||
| } | ||
| } | ||
|
|
||
| Sandcastle.addToolbarButton('Show/Hide Points', function() { | ||
| for (var i = 0; i < pointEntities.length; i++) { | ||
| pointEntities[i].show = !pointEntities[i].show; | ||
| } | ||
| }); | ||
|
|
||
| //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
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.
Here and below have to use scalars and arrays due to the web workers, right? They can't use Cesium's cartesian and cartographic types?
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.
Not due to web workers, I just think it's more flexible to use something built into the language when interfacing. Users might pull in other vector libraries, so imposing Cesium types didn't seem appropriate. It might even create confusion, like give an impression that all Cesium types are accessible from the callback out-of-the-box (they aren't).
I also wonder if that could mess with callbacks written in Typescript, but I don't know enough about that to say for sure.
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 dunno - we use Cesium types throughout Cesium for interfaces that we implement and/or interfaces our users implement. Seems arbitrary to make this different.