I am new to Cesium, I only just found the sample codes yesterday. I need help to create a complex project that will help me view the Earth in detail.
Can anyone provide me with SNIP-ITS (parts of code) to do the following:
1. Create four text boxes and labeled: Date, time, Latitude and Longitude.
2. Create a line through the True North/South Poles.
3. Create thin latitude/longitude lines every 10 degrees around the Earth.
4. Create thicker Equatorial Equator line (changes with date).
5. Create thicker line through the Earth's Timeline.
5. Angle the Earth from the sun's view (changes with date).
6. Create thin state and country lines.
7. The sun is always at 12 noon, midnight (away from the sun) is 12 midnight. I need to slide around the Earth at the proper angle to view from the Equatorial Equator based on date and time textboxes. Ie. Time -/+ 12:00 / 360 deg?
8. Create a point at the location of the Latitude/Longitude boxes.
9. A button to resubmit new textbox information.
10. Optional: day/night slightly dimmed views.
11. To make it more complex: I need to calculate the date/year difference from the current date and calculate and adjust for preccession (turning the North Pole forward for the future and back for the past). Dates covering years 1800 to 2050, but negative B.C. Dates would be nice. (may need conversion).
13. Time: 24 hour.
14. All created from space, looking at the Earth.
Item1... Reply to Create Labels and Textboxes.
<div id="toolbar">
<table>
<tr><td><font color="White">DATE: </font></td><td><input type="text" name="sDate" id="sDate" /></td></tr>
<tr><td><font color="White">TIME: </font></td><td><input type="text" name="sTime" id="sTime" /></td></tr>
<tr><td><font color="White">LATI: </font></td><td> <input type="text" name="sLat" id="sLati" /></td></tr>
<tr><td><font color="White">LONG: </font></td><td><input type="text" name="sLong" id="sLong" /></td></tr>
</table>
</div>
Item 1 & 9... Add Textboxes and button
<div id="toolbar">
<table>
<tr><td><font color="White">DATE: </font></td><td><input type="text" name="sDate" id="sDate" /></td></tr>
<tr><td><font color="White">TIME: </font></td><td><input type="text" name="sTime" id="sTime" /></td></tr>
<tr><td><font color="White">LATI: </font></td><td> <input type="text" name="sLat" id="sLati" /></td></tr>
<tr><td><font color="White">LONG: </font></td><td><input type="text" name="sLong" id="sLong" /></td></tr>
<tr><td colspan="2"><center><input type="button" value="RELOAD" onclick="reload()"></center></td></tr>
</table>
</div>
Item 2. North/South Pole Position (still needs line)
//North Pole Point
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(0.0, 90.0),
point : {
pixelSize: 10,
color: Cesium.Color.YELLOW}
});
//South Pole Point
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(0.0, -90.0),
point : {
pixelSize: 10,
color: Cesium.Color.YELLOW}
});
Item 9. Reload Function
function reload() {
};
Drawing lines is similar to drawing points. For example, to draw the prime meridian:
positions = Cesium.Cartesian3.fromDegreesArray([0.0, 90.0, 0.0, 0.0, 0.0, -90.0]);
viewer.entities.add(new Cesium.Entity({
id: ‘primeMeridian’,
name: ‘Prime Meridian’,
polyline: new Cesium.PolylineGraphics({
positions: positions,
width: 3.0,
followSurface: true
})
}));
``
I hope that helps.
Works very well. Needs var before first position.
Sorry... Meridian line works very well. Needs a 'var' before position.
// North & South Pole Labels & Flags
// North Pole Label
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(0.0, 90.0, 0.0),
label : {
text : 'N.Pole',
font : '12px Helvetica',
fillColor : Cesium.Color.WHITE,
outlineColor : Cesium.Color.BLACK,
outlineWidth : 2,
style : Cesium.LabelStyle.FILL_AND_OUTLINE
}
});
//North Pole Flag
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(0.0, 90.0, 200000.0),
cylinder : {
length : 1500000.0,
topRadius : 1000.0,
bottomRadius : 1000.0,
material : Cesium.Color.YELLOW,
outline : true,
outlineColor : Cesium.Color.YELLOW
}
});
// South Pole Label
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(0.0, -90.0, 0.0),
label : {
text : 'S.Pole',
font : '12px Helvetica',
fillColor : Cesium.Color.BLACK,
outlineColor : Cesium.Color.BLACK,
outlineWidth : 2,
style : Cesium.LabelStyle.FILL_AND_OUTLINE
}
});
//South Pole Flag
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(0.0, -90.0, 200000.0),
cylinder : {
length : 1500000.0,
topRadius : 1000.0,
bottomRadius : 1000.0,
material : Cesium.Color.RED,
outline : true,
outlineColor : Cesium.Color.RED
}
});
//Add Tropic of Cancer, Equator, and Tropic of Cancer
var lon = -180;
// Tropic of Capricorn
var pos = ;
for (var i = 0; i < 360; i++) {
pos.push(Cesium.Cartesian3.fromDegrees(lon, 23.43708));
lon++;
}
viewer.entities.add({
polyline: {
followSurface: false,
width: 2,
material: Cesium.Color.GREEN,
positions: pos
}
});
// Equator
var pos1 = ;
for (var i = 0; i < 360; i++) {
pos1.push(Cesium.Cartesian3.fromDegrees(lon, 0.0));
lon++;
}
viewer.entities.add({
polyline: {
followSurface: false,
width: 2,
material: Cesium.Color.YELLOW,
positions: pos1
}
});
// Tropic of Cancer
var pos2 = ;
for (var i = 0; i < 360; i++) {
pos2.push(Cesium.Cartesian3.fromDegrees(lon, -23.43708));
lon++;
}
viewer.entities.add({
polyline: {
followSurface: false,
width: 2,
material: Cesium.Color.GREEN,
positions: pos2
}
});
// Latitude Lines every 10 degrees
var lon = -180;
var pos = ;
for (var y = -90; y<90; y=y+10) {
for (var i= 0; i < 360; i++) {
pos.push(Cesium.Cartesian3.fromDegrees(lon, y));
lon++;
}}
viewer.entities.add({
polyline: {
followSurface: false,
width: 1,
material: Cesium.Color.YELLOW,
positions: pos
}});
// Controlling Pitch 23.45 deg
var camera = viewer.camera;
camera.setView({
destination : Cesium.Cartesian3.fromDegrees(-0.0, 0.0, 15000000.0),
orientation: {
heading :-23.45* (Cesium.Math.PI/180),
pitch : -2050,
roll : 0.0
}
});
// Latitude + Longitude Grid Lines every 10 degrees
var lon = -180;
var lat = -90;
var pos = ;
var pos1 = ;
for (var y = -80; y<80; y=y+10) {
for (var i= 0; i < 360; i++) {
pos.push(Cesium.Cartesian3.fromDegrees(lon, y));
lon++;
}}
for (var y = -170; y<170; y=y+10) {
for (var i= 0; i < 360; i++) {
pos1.push(Cesium.Cartesian3.fromDegrees(y, lat));
lat++;
}}
viewer.entities.add({
polyline: {
followSurface: false,
width: 0.5,
material: Cesium.Color.YELLOW,
positions: pos
}});
viewer.entities.add({
polyline: {
followSurface: false,
width: 0.5,
material: Cesium.Color.YELLOW,
positions: pos1
}});
15. Add new needed feature. Solar Noon does not happen at 12 noon every day. It varies during the year.
16. Date changes equatorial equator, which changes the pitch/heading of the camera as the Earth turns. One side tipped up, the other side tipped down.
17. I have had a problem attempting to get the button function to work. Any ideas?
18. Thanks for the help of others.
// Question
How can I lock/unlock the Tilt at 23.45 degrees of the Earth while rotating the Earth?
// Latest Code for ASTROLOGY (Sun, Moon, Point)
//HTML
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table style="font-size:12px">
<tr><td colspan="2"><input type="checkbox" id="Sun" name="Sun" value="y" />Sun <input type="checkbox" id="Moon" name="Moon" value="y" />Moon <input type="checkbox" id="Point" name="Point" value="y" />Point <input type="button" style='font-size: 6pt' value="GO" fontsize="6px" onclick="go()"></td></tr>
<tr><td><font color="White">DATE/TIME: </font></td><td><input type='text' style='font-size: 12px' size = 20 value='1/1/2017 11:43 pm' name="sDate" id="sDateTime" /></td></tr>
<tr><td><font color="White">LAT,LONG: </font></td><td> <input type="text" style='font-size: 12px' size = 20 value='40.0, -102.0' name="sLatLng" id="sLatLng" /></td></tr>
</table>
</div>
//JAVASCRIPT
// Contains: Lat/Long grid, Tilt, Points(Sun, Moon, Point)
// Contains: Checkmarks, Textboxes, Button
// To Do: Add Sun & Moon position based on date
// To Do: Add Tilt based on date, Point based on Time
// To Do: Earth view from date/time based on Sun or Point
var viewer = new Cesium.Viewer('cesiumContainer');
//North Pole Point
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(0.0, 90.0),
point : {
pixelSize: 10,
color: Cesium.Color.YELLOW}
});
//South Pole Point
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(0.0, -90.0),
point : {
pixelSize: 10,
color: Cesium.Color.YELLOW}
});
var lon = -180;
// Tropic of Capricorn
var pos = ;
for (var i = 0; i < 360; i++) {
pos.push(Cesium.Cartesian3.fromDegrees(lon, 23.43708));
lon++;
}
viewer.entities.add({
polyline: {
followSurface: false,
width: 1,
material: Cesium.Color.GREEN,
positions: pos
}
});
// Equator
var pos1 = ;
for (var i = 0; i < 360; i++) {
pos1.push(Cesium.Cartesian3.fromDegrees(lon, 0.0));
lon++;
}
viewer.entities.add({
polyline: {
followSurface: false,
width: 1,
material: Cesium.Color.YELLOW,
positions: pos1
}
});
// Tropic of Cancer
var pos2 = ;
for (var i = 0; i < 360; i++) {
pos2.push(Cesium.Cartesian3.fromDegrees(lon, -23.43708));
lon++;
}
viewer.entities.add({
polyline: {
followSurface: false,
width: 1,
material: Cesium.Color.GREEN,
positions: pos2
}
});
// Heading Pitch -23.45 deg
var camera = viewer.camera;
camera.setView({
destination : Cesium.Cartesian3.fromDegrees(-0.0, 0.0, 15000000.0),
orientation: {
heading : -23.45 * (Cesium.Math.PI/180),
pitch : -2050,
roll : 0.0
}
});
// Latitude + Longitude Lines every 10 degrees
var lon = -180;
var lat = -90;
var pos = ;
var pos1 = ;
for (var y = -80; y<80; y=y+10) {
for (var i= 0; i < 360; i++) {
pos.push(Cesium.Cartesian3.fromDegrees(lon, y));
lon++;
}}
for (var y = -170; y<170; y=y+10) {
for (var i= 0; i < 360; i++) {
pos1.push(Cesium.Cartesian3.fromDegrees(y, lat));
lat++;
}}
viewer.entities.add({
polyline: {
followSurface: false,
width: 0.2,
material: Cesium.Color.YELLOW,
positions: pos
}});
viewer.entities.add({
polyline: {
followSurface: false,
width: 0.2,
material: Cesium.Color.YELLOW,
positions: pos1
}});
// PLOT WHITE POINT
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point : {
pixelSize : 10,
color : Cesium.Color.WHITE
}
});
// SUN SOLAR NOON YELLOW POINT
// Last Point to Center the Sun on Earth
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(0.0, 23.45),
point : {
pixelSize : 25,
color : Cesium.Color.YELLOW
}
});
// MOON GREEN POINT
// Last Point to Center the Sun on Earth
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(103.0, 10.45),
point : {
pixelSize : 25,
color : Cesium.Color.GREEN
}
});
// Detect Checkmark
function GetCheckedState () {
var input = document.getElementById ("myInput");
var isChecked = input.checked;
isChecked = (isChecked)? "checked" : "not checked";
alert ("The checkBox is " + isChecked);
}
// Continuation....
19. Need Calculations of:
a. Date/Time
b. Solar Noon (aim toward Sun)
c. Tilt position of Earth during year
d. Position of Moon
e. Tilt the Earth up/down from Tropic of Cancer to Tropic of Capricorn
earthfutu...@gmail.com
Jan 14
Would anyone have an example of
1- Tilting the Earth (ie. 23.45 degrees).
2- Then turning the Earth, maintaining that same tilt.
3- Keeping the Earth on the Equatorial Plane.
Thanks.
Hannah Pinkos
Jan 16
Other recipients: earthfutu...@gmail.com
Hello,
For 1 and 2, take a look at these demos and let me know if they help:
http://analyticalgraphicsinc.github.io/cesium-google-earth-examples/examples/cameraTilt.html
http://analyticalgraphicsinc.github.io/cesium-google-earth-examples/examples/cameraMove.html
I don't have a great idea for how to achieve 3, but you might be able to use a preRender event similarly to how we keep the globe pointed north in this example: https://groups.google.com/d/msg/cesium-dev/ZKimT0pYt80/twCM0YviAQAJ
Best,
Hannah