修剪与 Cesium 中地形相交的插值多段线答案

【问题标题】：Trim interpolated polyline where terrain is intersecting in Cesium修剪与 Cesium 中地形相交的插值多段线
【发布时间】：2021-07-13 13:54:11
【问题描述】：

我正在尝试创建一个弧线，当它与地形相交时会停止。 arc1 和 arc2 两个变量，其中 arc1 没有地形交点，arc2 有地形交点。

arc1 工作正常，但 arc2 并没有在与地形相交的地方停止。

var viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false, //Disable InfoBox widget
  selectionIndicator: false, //Disable selection indicator
  shouldAnimate: true, // Enable animations
  terrainProvider: Cesium.createWorldTerrain(),
});

//Enable lighting based on the sun position
viewer.scene.globe.enableLighting = true;

//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

// Cartesian3: start, mid and end points for polyline
var controls = [{x:-1942111.383043348,y:-4780646.881480431,z:3737538.9114379627},
                {x:-1847333.0834675943,y:-5281519.814050422,z:3579120.5547780637},
                {x:-1611854.2607850158,y:-5380130.367796415,z:3146339.4631628506}];


// Applying interpolation
var spline = Cesium.HermiteSpline.createNaturalCubic({
        times: [0.0, 0.5, 1],
        points: controls,
    });

var ppos = []; //Interpolated polyline cordinates
for (var i = 0; i <= 50; i++) {
    var cartesian3 = spline.evaluate(i / 50);
    ppos.push(cartesian3);
}

/* Terrain and Polyline Intersection Detection */
var cartographic = [];
var cartographic_real = [];
ppos.forEach(p => {
    let dh = Cesium.Cartographic.fromCartesian(p);
    dh.height = 0;
    cartographic.push(dh);
    cartographic_real.push(Cesium.Cartographic.fromCartesian(p));
});

// collecting actual terrain heights
Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, cartographic).then((raisedPositionsCartograhpic) => {
    var t = true;
    var rpos = []; // 
    cartographic_real.forEach((p, i) => {
        if(t) rpos.push(ppos[i]);
        // If terrain height is more than polyline cordinate height
        if (i > 0 && t && (raisedPositionsCartograhpic[i].height - p.height)) {
          t = false;
          
          console.log("Stopped at:", p.height);
          console.log(rpos);
          drawNewArc(rpos);

        }
    });
});

/* --- */

function drawNewArc(rpos)
{
  var arc1 = {};
  arc1.polyline = { // Actual line without terrain intersection
          positions: ppos,
          width: 3,
          material: Cesium.Color.RED.withAlpha(0.5),
      }
  
  var arc2 = {};
  arc2.polyline = { // This should stop where it intersects terrain
          positions: rpos,
          width: 3,
          material: Cesium.Color.GREEN.withAlpha(1.0),
      }
  
  var entity = viewer.entities.add(arc1);
  var entity2 = viewer.entities.add(arc2);
}

viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-112.081,36.097,10000)});

我希望绿色折线在碰到任何地形时停止。

example

我想我需要得到并匹配弧的所有点。我不知道如何获得绿弧的所有点。

这里是沙堡中的完整代码link：

【问题讨论】：

标签： javascript canvas cesium

【解决方案1】：

在修复代码中的各种错误后获得成功，例如：

折线分段不正确：

for (var i = 0; i <= 50; i++) {

高度匹配条件不正确：

if (i > 0 && t && (raisedPositionsCartograhpic[i].height - p.height)) {

这是完整的工作代码link。它也可能有错误，必须有更好的解决方案来实现目标。如果有人有更好更快的解决方案，请在此处发布。

【讨论】：