Question

默认情况下，铯多义线遵循地球曲率，在两点之间。如何制作高于地面的弧线，就像在这个例子中一样？

http://armsglobe.chromeexperiments.com/

Answer 1

这是一个在实体位置上使用插值算法来计算平滑弧的示例。尝试点击＆＃34;运行代码段＆＃34;在底部，或load this in Sandcastle。

＆＃13;

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
    });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这里有类似的实现，但很难找到：

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

在铯表面上方的折线弧

2 个答案: