Polylinienbögen über der Oberfläche in Cäsium

Question

Cäsium Polylinien folgen standardmäßig der Krümmung der Erde zwischen zwei Punkten. Wie mache ich Bögen, die über den Boden gehen, wie in diesem Beispiel?

http://armsglobe.chromeexperiments.com/

Answer 1

Hier ist ein Beispiel eines Interpolationsalgorithmus auf Entity-Positionen unter Verwendung der glatten Bögen zu berechnen. Klicken Sie unten auf "Code-Snippet ausführen" oder wählen Sie load this in Sandcastle.

var viewer = new Cesium.Viewer('cesiumContainer', { 
 
    navigationInstructionsInitiallyVisible: false, 
 
    // These next 5 lines are just to avoid the Bing Key error message. 
 
    imageryProvider : Cesium.createTileMapServiceImageryProvider({ 
 
     url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') 
 
    }), 
 
    baseLayerPicker : false, 
 
    geocoder : false, 
 
    // This next line fixes another Stack Snippet error, you may omit 
 
    // this setting from production code as well. 
 
    infoBox : false 
 
}); 
 

 
var numberOfArcs = 50; 
 
var startLon = -74; 
 
var startLat = 39; 
 

 
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; 
 

 
var startTime = viewer.clock.startTime; 
 
var midTime = Cesium.JulianDate.addSeconds(startTime, 43200, new Cesium.JulianDate()); 
 
var stopTime = Cesium.JulianDate.addSeconds(startTime, 86400, new Cesium.JulianDate()); 
 

 
for (var i = 0; i < numberOfArcs; ++i) { 
 
    var color = Cesium.Color.fromRandom({ 
 
     alpha : 1.0 
 
    }); 
 
    var stopLon = Cesium.Math.nextRandomNumber() * 358 - 179; 
 
    var stopLat = Cesium.Math.nextRandomNumber() * 178 - 89; 
 

 
    // Create a straight-line path. 
 
    var property = new Cesium.SampledPositionProperty(); 
 
    var startPosition = Cesium.Cartesian3.fromDegrees(startLon, startLat, 0); 
 
    property.addSample(startTime, startPosition); 
 
    var stopPosition = Cesium.Cartesian3.fromDegrees(stopLon, stopLat, 0); 
 
    property.addSample(stopTime, stopPosition); 
 

 
    // Find the midpoint of the straight path, and raise its altitude. 
 
    var midPoint = Cesium.Cartographic.fromCartesian(property.getValue(midTime)); 
 
    midPoint.height = Cesium.Math.nextRandomNumber() * 500000 + 2500000; 
 
    var midPosition = viewer.scene.globe.ellipsoid.cartographicToCartesian(
 
     midPoint, new Cesium.Cartesian3()); 
 

 
    // Redo the path to be the new arc. 
 
    property = new Cesium.SampledPositionProperty(); 
 
    property.addSample(startTime, startPosition); 
 
    property.addSample(midTime, midPosition); 
 
    property.addSample(stopTime, stopPosition); 
 

 
    // Create an Entity to show the arc. 
 
    var arcEntity = viewer.entities.add({ 
 
     position : property, 
 
     // The point is optional, I just wanted to see it. 
 
     point : { 
 
      pixelSize : 8, 
 
      color : Cesium.Color.TRANSPARENT, 
 
      outlineColor : color, 
 
      outlineWidth : 3 
 
     }, 
 
     // This path shows the arc as a polyline. 
 
     path : { 
 
      resolution : 1200, 
 
      material : new Cesium.PolylineGlowMaterialProperty({ 
 
       glowPower : 0.16, 
 
       color : color 
 
      }), 
 
      width : 10, 
 
      leadTime: 1e10, 
 
      trailTime: 1e10 
 
     } 
 
    }); 
 

 
    // This is where it becomes a smooth path. 
 
    arcEntity.position.setInterpolationOptions({ 
 
     interpolationDegree : 5, 
 
     interpolationAlgorithm : Cesium.LagrangePolynomialApproximation 
 
    }); 
 
}

html, body, #cesiumContainer { 
 
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; 
 
    font-family: sans-serif; 
 
}

<link href="http://cesiumjs.org/releases/1.20/Build/Cesium/Widgets/widgets.css" 
 
     rel="stylesheet"/> 
 
<script src="http://cesiumjs.org/releases/1.20/Build/Cesium/Cesium.js"> 
 
</script> 
 
<div id="cesiumContainer"></div>

Answer 2

Es gibt eine ähnliche Implementierung hier, aber es war schwer zu finden:

https://groups.google.com/forum/#!topic/cesium-dev/vr_ZH1yRNoQ