0

I have a task which I want to create an animation line from the source to the destination. I made 3 entities which are the source point, destination point and animation line. The source is created by using the latitude and longitude including the destination point. When I run the the html file, I noticed that the line is not curve. Let me show you an image below. enter image description here Is there any way to make the line a smooth curve?

This is my code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
    //Configuration for latiude and longitude and flat mode
    var viewer = new Cesium.Viewer('cesiumContainer');

    var entities = viewer.entities;
    var scene = viewer.scene;
    scene.mode= Cesium.SceneMode.SCENE2D;
    var offSetLatitude =  '26.3351';//15.290270
    var offsetLongitude = '17.2283';//85.85195
    var target = new Cesium.Cartesian3.fromDegrees(offsetLongitude, offSetLatitude);
    var zoom = "42300000";
    viewer.camera.lookAt(target, new Cesium.Cartesian3(0.0, 0.0, zoom ));
    //End of the configuration

    var sourceLongitude = 103.856;
    var sourceLatitude = 1.2931;
    var destinationLongitude = -71.0843;
    var destinationLatitude = 42.3626;
    var start = Cesium.JulianDate.now();
    var duration = 5;
    var sourceCountry = "Singapore";
    var destCountry = "United States";

    var startPoint = Cesium.Cartographic.fromDegrees(sourceLongitude, sourceLatitude);
    var finalPoint = Cesium.Cartographic.fromDegrees(destinationLongitude, destinationLatitude);
    // Calculate the midPoint to form the arc out of the earth surface
    var geodesic = new Cesium.EllipsoidGeodesic(startPoint, finalPoint);
    var midPoint = geodesic.interpolateUsingFraction(0.5, new Cesium.Cartographic());
    // Different heights for each attack polyline (1000000 ~ 5000000)
    var rand = [Math.floor((Math.random() * 700000) + 500000)];
    midPoint.height = rand;
    var positions = computePositions(startPoint, midPoint, finalPoint, start, duration);


    var target = viewer.entities.add({
        name: (sourceCountry + " - " + destCountry),
        position: positions,
        orientation: new Cesium.VelocityOrientationProperty(positions),
        path: {
            resolution: 0.3,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: Cesium.Color.YELLOW
            }),
            width: 8,
            trailTime: duration,
            leadTime: 0
        }
    });


    target.position.setInterpolationOptions({

            interpolationDegree : 5,
            interpolationAlgorithm : Cesium.LagrangePolynomialApproximation 
    });

    var sourcePoint = viewer.entities.add({
                        name: sourceCountry,
                        position : Cesium.Cartesian3.fromDegrees(sourceLongitude, sourceLatitude),
                        point : {
                                pixelSize : 5,
                                color : new Cesium.CallbackProperty(
                                function(time, result){
                                    return Cesium.Color.fromAlpha(Cesium.Color.RED);
                                }, false),
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth: 2
                        }
                    });

    var sourcePoint1 = viewer.entities.add({
                        name: sourceCountry,
                        position : Cesium.Cartesian3.fromDegrees(sourceLongitude, sourceLatitude-5),
                        label : {
                                text : sourceCountry,
                                font : '10px Helvetica',
                                fillColor: Cesium.Color.SKYBLUE,
                                outlineColor: Cesium.Color.BLACK,
                                outlineWidth: 2
                        }
                    });

    /*
    var destPoint = viewer.entities.add({
                        name: destCountry,
                        position : Cesium.Cartesian3.fromDegrees(destinationLongitude, destinationLatitude),
                        point : {
                                pixelSize : 5,
                                color : new Cesium.CallbackProperty(
                                function(time, result){
                                    return Cesium.Color.fromAlpha(Cesium.Color.YELLOW);
                                }, false),
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth: 2
                        }
                    });
    */
        var destPoint = viewer.entities.add({
                        name: destCountry,
                        position : Cesium.Cartesian3.fromDegrees(destinationLongitude, destinationLatitude),
                        point : {
                            pixelSize: 5,
                            color: Cesium.Color.PINK,
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth: 2
                        }
                    });
        var destPoint1 = viewer.entities.add({
                        name: destCountry,
                        position : Cesium.Cartesian3.fromDegrees(destinationLongitude, destinationLatitude-5),
                        label : {
                                text : destCountry,
                                font : '10px Helvetica',
                                fillColor: Cesium.Color.SKYBLUE,
                                outlineColor: Cesium.Color.BLACK,
                                outlineWidth: 2
                        }
                    });


    function computePositions(startPoint, midPoint, finalpoint, startTime, duration) {

        var property = new Cesium.SampledPositionProperty();

        var startPosition = viewer.scene.globe.ellipsoid.cartographicToCartesian(startPoint);
        property.addSample(startTime, startPosition);

        var midTime = Cesium.JulianDate.addSeconds(startTime, duration/2, new Cesium.JulianDate());
        var midPosition = viewer.scene.globe.ellipsoid.cartographicToCartesian(midPoint);
        property.addSample(midTime, midPosition);

        var endTime = Cesium.JulianDate.addSeconds(startTime, duration, new Cesium.JulianDate());
        var endPosition = viewer.scene.globe.ellipsoid.cartographicToCartesian(finalPoint);
        property.addSample(endTime, endPosition);
        return property;
    }

  </script>
</body>
</html>

Can you help me?

9
  • This question is not a duplicate. The linked question is about polygons, this question is about polylines. The two are not the same. – emackey Nov 9 '17 at 14:18
  • 1
    you've got duration = 5 in your code here, and later you have an entity.path with resolution: 1 (seconds). This is likely why your path has only 5 sections in it. Try increasing your duration, or decreasing your resolution. Also, I can't get your code to run in the debug version of Cesium, you've got numbers inside quotes and Cesium is throwing type errors at me. Typically you should develop against non-minified Cesium so that you can catch these errors. – emackey Nov 9 '17 at 14:27
  • You need to densify your lines, this is exactly the same as in the linked question. – Ian Turton Nov 9 '17 at 15:28
  • 1
    It's similar in spirit, yes. But the answers of the linked question all talk about putting smaller polygons closer together. The correct answer here would talk about editing the resolution of a path, which is a different API in Cesium. – emackey Nov 9 '17 at 18:40
  • @emackey, you mention that you got errors in your code, but I do not receive any errors in the console.log – user107369 Nov 10 '17 at 1:02