Цезий: «вентилятор» перекрывает полилинии?

Question

Я использую Цезий, и я хочу визуально представить несколько полилиний между теми же двумя объектами. Например, зеленая полилиния от объекта A до объекта B, а также синяя полилиния от объекта A до объекта B. Я бы хотел, чтобы они не перекрывались или не смешивались, поэтому я представляю себе раздувание, поскольку больше линий рисуется, так что каждая строка и то, что она представляет, может быть визуализирована. Я включил грубый рисунок того, что я пытаюсь объяснить, размахивая, а не перекрываясь.

У меня есть функциональная структура данных, отслеживающие линий, которые я хочу представить, а также карта, что они цезий уже будучи программно нарисованную на. Думаю, в этот момент я ищу техническое объяснение того, как программно изгибать полилинии на карте, а также любые предложения для управления полилинией, чтобы распознавать перекрывающиеся линии, чтобы я мог применять изгибы.

Спасибо за помощь!

Answer 1

Вот один из способов. Этот образец кода будет «распространять» линии только по долготе, поэтому лучше всего работает на линиях Север/Юг, а не на восточных/западных линиях. Но я думаю, что это должно передать правильную идею, вам просто нужно выяснить более универсальный способ «перемещать» среднюю точку в визуально приятное место.

Я использую для этого временные пути, чтобы получить доступ к логике интерполяции Цезия. Но в прошлом я выбрал ссылочное время, и я показываю только готовые пути для зрителя. Таким образом, пользователь не мудрее, что время играет здесь какую-либо роль.

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>