Hello I'm trying to create a static grid system on the globe with exact longitude and latitude lines. I want two options for the grid. One display with 1 unit square of measure, and another with .1 unit square of measure. At first I tried making polylines to cover the globe. The measurements were perfect, but the problem it led me was that the frame rate was terrible when I went to the .1 measurements.
Then I tried making an ellipsoid to cover the globe instead. This helped performance by a lot, but I encountered the problem with my Longitude being correct, but my Latitudes were off. I would of used the GridImageryProvider unfortunately this class isn't helpful because it dynamically renders, and doesn't stay at the measurements needed.
Ellipsoid example
/*
Action listener for partition settings.
gridSlicePartitions is set to 360 for one quit of measure, and 3600 for .1
gridStackPartitions are set to 180 and 1800
*/
gridDisplay = viewer.entities.add({
name : 'gridDisplay',
position: new Cartesian3(),
ellipsoid : {
radii : viewer.scene.globe.ellipsoid.radii,
fill : false,
outline : true,
outlineColor : Cesium.Color.GREEN.withAlpha(0.25),
slicePartitions : gridSlicePartitions,
stackPartitions : gridStackPartitions
}
});
With the PolyLines I tried making multiple PolylineCollection()'s to help with performance, but didn't help me as much.
// .1 measurement function for polylines
function createGreaterGrid(){
polyLinesLon1 = new Cesium.PolylineCollection();
polyLinesLon2 = new Cesium.PolylineCollection();
polyLinesLat2 = new Cesium.PolylineCollection();
polyLinesLat1 = new Cesium.PolylineCollection();
var line = ;
for(var x = -90; x <= 90; x+=0.1){
for(var k = -180; k <= 0; k += 2) {
line.push(k); // lat
line.push(x); //lon
}
polyLinesLon1.add({
positions : Cesium.Cartesian3.fromDegreesArray(line),
width : 1,
material : new Cesium.Material.fromType('Color', {
color: Cesium.Color.BLACK.withAlpha(0.10)
}),
asynchronous : false
});
line = ;
}
line = ;
for(x = -90; x <= 90; x+=0.1){
for(var j = -0; j <= 180; j += 2) {
line.push(j); // lat
line.push(x); //lon
}
polyLinesLon2.add({
positions : Cesium.Cartesian3.fromDegreesArray(line),
width : 1,
material : new Cesium.Material.fromType('Color', {
color: Cesium.Color.BLACK.withAlpha(0.10)
}),
asynchronous : false
});
line = ;
}
for(x = -90; x <= 90; x+=0.1){
for(var b = -180; b <= 0; b += 2) {
line.push(x); // lat
line.push(b); //lon
}
polyLinesLat1.add({
positions : Cesium.Cartesian3.fromDegreesArray(line),
width : 1,
material : new Cesium.Material.fromType('Color', {
color: Cesium.Color.BLACK.withAlpha(0.10)
}),
asynchronous : false
});
line = ;
}
line = ;
for(x = -90; x <= 90; x+=0.1){
for(var n = 0; n <= 180; n += 2) {
line.push(x); // lat
line.push(n);
}
polyLinesLat2.add({
positions : Cesium.Cartesian3.fromDegreesArray(line),
width : 1,
material : new Cesium.Material.fromType('Color', {
color: Cesium.Color.BLACK.withAlpha(0.10)
}),
asynchronous : false
});
line = ;
}
}
// 1 unit of measure function
function createGrid(){
polyLines = new Cesium.PolylineCollection();
var line = ;
// Create a color material with fromType:
for(var x = -90; x < 90; x+=2){
for(var k = -180; k < 182; k += 2) {
line.push(k); // lat
line.push(x); //lon
}
polyLines.add({
positions : Cesium.Cartesian3.fromDegreesArray(line),
width : 1,
material : new Cesium.Material.fromType('Color', {
color: Cesium.Color.BLACK.withAlpha(0.10)
}),
asynchronous : false
});
line = ;
}
line = ;
for(var x = -90; x < 90; x+=2){
for(var n = -180; n < 182; n += 2) {
line.push(x); // lat
line.push(n);
}
polyLines.add({
positions : Cesium.Cartesian3.fromDegreesArray(line),
width : 1,
material : new Cesium.Material.fromType('Color', {
color: Cesium.Color.BLACK.withAlpha(0.10)
}),
asynchronous : false
});
line = ;
}
}
If anyone has any suggestions for any of the two ways to create a static grid system that matches the longitude and latitude please let me know!
I saw another question about this same subject, but I was confused on how to proceed.
Thanks