Cesium："fan out" 重叠折线？

Question

我正在使用 Cesium 并希望在视觉上表示相同的两个实体之间的多条折线。例如，从实体 A 到实体 B 的绿色多段线，以及从实体 A 到实体 B 的蓝色多段线。我希望它们不要重叠或混合，所以我想象随着绘制更多的线而展开，这样每条线及其代表的内容都可以可视化。我已经包括了我试图用扇形展开而不是重叠来解释的粗略图。

我有一个功能性数据结构来跟踪我想要表示的线条，以及已经以编程方式在其上绘制的 Cesium 地图。我想此时我正在寻找有关如何以编程方式在地图上弯曲多段线的技术解释，以及有关多段线管理的任何建议，以便识别重叠线，以便我可以应用弯曲。

感谢您的帮助！

Answer 1

这是一种方法。此示例代码将仅 "spread" 沿经度的线，因此在 North/South 线上效果最好，而不是在 East/West 线上。但我认为它应该传达正确的想法，你只需要想出一种更 general-purpose 的方式 "moving" 中点到视觉上令人愉悦的位置。

我在这里使用 time-based 路径，以访问 Cesium 的插值逻辑。但是我选择了一个很久以前的参考时间，我只是在查看器上显示完成的路径。因此，用户 none 更清楚时间在这里发挥的作用。

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>

Cesium："fan out" 重叠折线？

Cesium: "fan out" overlapping polylines?

javascript

cesium