Cesium: “fan out” overlapping polylines?

问题

I am using Cesium and am looking to visually represent multiple polylines between the same two entities. For example, a green polyline from entity A to entity B, and also a blue polyline from entity A to entity B. I would like them not to overlap or blend, so I am imagining a fanning out as more lines are drawn, so that each line and what it represents can be visualized. I've included a crude drawing of what I'm trying to explain with the fanning out rather than overlapping.

I have a functional data structure keeping track of the lines I want to represent, as well as a Cesium map that they are already being programatically drawn on. I guess at this point I'm looking for the technical explanation of how to programatically bend the polylines on the map, and also any suggestions for polyline management in order to recognize overlapping lines so I can apply the bends.

Thanks for any help!

回答1:

Here's one method. This sample code will "spread" the lines along longitude only, so works best on North/South lines and not on East/West lines. But I think it should convey the right idea, you just have to figure out a more general-purpose way of "moving" the midpoint to a visually pleasing location.

I'm using time-based paths here, to gain access to Cesium's interpolation logic. But I've selected a reference time far in the past, and I'm only showing the finished paths on the viewer. So, the user is none the wiser that time is playing any role here.

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: false,
    animation: false,
    timeline: 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 = 5;
var startLon = -105;
var startLat = 39.7;

var stopLon = -98.4;
var stopLat = 29.4;
var spread = 5;

var referenceTime = Cesium.JulianDate.fromIso8601('2001-01-01T00:00:00Z');
var midTime = Cesium.JulianDate.addSeconds(referenceTime, 43200, new Cesium.JulianDate());
var stopTime = Cesium.JulianDate.addSeconds(referenceTime, 86400, new Cesium.JulianDate());

for (var i = 0; i < numberOfArcs; ++i) {
    var color = Cesium.Color.fromRandom({
        alpha : 1.0
    });

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

    // Find the midpoint of the straight path, and move it.
    var spreadAmount = (spread / (numberOfArcs - 1)) * i - (spread / 2);
    var midPoint = Cesium.Cartographic.fromCartesian(property.getValue(midTime));
    midPoint.longitude += Cesium.Math.toRadians(spreadAmount);
    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(referenceTime, startPosition);
    property.addSample(midTime, midPosition);
    property.addSample(stopTime, stopPosition);

    // Create an Entity to show the arc.
    var arcEntity = viewer.entities.add({
        position : property,
        // This path shows the arc as a polyline.
        path : {
            resolution : 1200,
            material : new Cesium.PolylineGlowMaterialProperty({
                glowPower : 0.16,
                color : color
            }),
            width : 10,
            leadTime: 1e11,
            trailTime: 1e11
        }
    });

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

// Optionally, add start and stop points, mostly for easy zoomTo().
viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(startLon, startLat),
    point : {
        pixelSize : 8,
        color : Cesium.Color.WHITE
    }
});
viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(stopLon, stopLat),
    point : {
        pixelSize : 8,
        color : Cesium.Color.WHITE
    }
});

viewer.zoomTo(viewer.entities);

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

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

来源：https://stackoverflow.com/questions/42237055/cesium-fan-out-overlapping-polylines