セシウムの表面上のポリラインアーク

Question

セシウムポリラインは、デフォルトでは2つのポイントの間で地球の曲率に従います。この例のように、地面の上を行く円弧を作るにはどうすればよいですか？ここで

http://armsglobe.chromeexperiments.com/

Answer 1

は、スムーズな弧を計算するために、エンティティの位置に補間アルゴリズムを使用した例です。下部にある[Run code snippet]、または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

あり、ここで同様の実装ですが、見つけることは困難でした。

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