How to make the vehicle move dynamically along the route（CZML polyline））

CesiumJS
1

Hi everyone！
By loading czml, I want a vehicle to dynamically move along the polyline as time changes.
polyline is loaded out,but vehicle did not load. Here are the results

YBZ88$)DY)J7~QS5TJMZEY
YBZ88$)DY)J7~QS5TJMZEY1920×947 376 KB

I want the vehicle to move dynamically along the polyline. Is there an easy way to do this, I feel like I’m doing it the wrong way

Here is my code.

    var viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
    });                                                                                                                                                    
    var scene = viewer.scene;
    var clock = viewer.clock;                                                                                                                 
    var position1 = Cesium.Cartesian3.fromDegrees(103.667886, 32.051531);
    var position2 = Cesium.Cartesian3.fromDegrees(103.664483, 32.054231);
    var position3 = Cesium.Cartesian3.fromDegrees(103.662779, 32.057314);                               
                                                                                                                                                         
     //get positions terrainHeight
    var terrainProvider = Cesium.createWorldTerrain();
    var positions = [
        Cesium.Cartographic.fromDegrees(103.667886, 32.051531),
        Cesium.Cartographic.fromDegrees(103.664483, 32.054231),
        Cesium.Cartographic.fromDegrees(103.662779, 32.057314)
    ];
    var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, positions);
    Cesium.when(promise, function (updatedPositions) {
        var terrainHeight1 = updatedPositions[0].height;
        var terrainHeight2 = updatedPositions[1].height;
        var terrainHeight3 = updatedPositions[2].height;
        console.log(terrainHeight1);
        console.log(terrainHeight2);
        console.log(terrainHeight3);
    });

var czml = [{
“id”: “document”,
“version”: “1.0”,
“clock”: {
“interval”: “2018-07-19T15:18:00Z/2018-07-19T15:18:30Z”,
“currentTime”: “2018-07-19T15:18:00Z”,
“multiplier”: 5,
“range”: “LOOP_STOP”,
“step”: “SYSTEM_CLOCK_MULTIPLIER”
}
},

        {
            "id": "CesiumMilkTruck",
            "model": {
                "gltf": "SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
                "scale": 500
            },
            "position": {
                "interpolationAlgorithm": "LINEAR",
                "forwardExtrapolationType": "HOLD",
                "cartesian": [
                    "2018-07-19T15:18:00Z",
                    position1.x, position1.y, 2115.5071695027223,
                    "2018-07-19T15:18:15Z",
                    position2.x, position2.y, 2143.748176028439,
                    "2018-07-19T15:18:30Z",
                    position3.x, position3.y, 2167.1735560478137
                ]

            }


        },


        {
            "id": "polyline",
            "polyline": {
                "positions": {
                    "cartographicDegrees": [
                        103.667886, 32.051531, 0,
                        103.664483, 32.054231, 0,
                        103.662779, 32.057314, 0,
                        103.658926, 32.063334, 0,
                        103.646179, 32.067430, 0


                    ]
                },
                "material": {
                    "polylineOutline": {
                        "color": {
                            "rgba": [255, 0, 255, 255]
                        },
                        "outlineColor": {
                            "rgba": [0, 255, 255, 255]
                        },
                        "outlineWidth": 5
                    }
                },
                "width": 8,
                "clampToGround": true
            }
        }
    ]

    dataSource = new Cesium.CzmlDataSource();
    dataSource.load(czml);
    viewer.dataSources.add(dataSource);
2

There are a few problems here.

  1. You have to wait for the asynchronous call to retrieve the terrain heights to finish before you can complete the CZML.

  2. You are mixing cartesian and cartographic coordinates in the czml. The heights returned by sampleTerrainMostDetailed are relative to the WGS84 ellipsoid thus you must supply cartographic coordinates in the CZML or convert cartographic coordinates to cartesian.

  3. Keep in mind that the model (or point) follows the points specified in the position property and not the polyline that has been clamped to the ground. For ground following objects, you’d need to sample the terrain at a much finer granularity.

Here’s the code I modified:

var viewer = new Cesium.Viewer("cesiumContainer", {
  terrainProvider: terrainProvider,
});

//get positions terrainHeight
var positions = [
  Cesium.Cartographic.fromDegrees(103.667886, 32.051531),
  Cesium.Cartographic.fromDegrees(103.664483, 32.054231),
  Cesium.Cartographic.fromDegrees(103.662779, 32.057314),
];
var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, positions);
Cesium.when(promise, function (updatedPositions) {

  var czml = [
    {
      id: "document",
      version: "1.0",
      clock: {
        interval: "2018-07-19T15:18:00Z/2018-07-19T15:18:30Z",
        currentTime: "2018-07-19T15:18:00Z",
        multiplier: 5,
        range: "LOOP_STOP",
        step: "SYSTEM_CLOCK_MULTIPLIER",
      },
    },

    {
      id: "CesiumMilkTruck",
      position: {
        interpolationAlgorithm: "LINEAR",
        forwardExtrapolationType: "HOLD",
        cartographicRadians: [
          "2018-07-19T15:18:00Z", updatedPositions[0].longitude, updatedPositions[0].latitude, updatedPositions[0].height,
          "2018-07-19T15:18:15Z", updatedPositions[1].longitude, updatedPositions[1].latitude, updatedPositions[1].height,
          "2018-07-19T15:18:30Z", updatedPositions[2].longitude, updatedPositions[2].latitude, updatedPositions[2].height,
        ],
      },
      path: {
        leadTime: 86400,
        trailTime: 86400,
        material: {
          polylineOutline: {
            color: {
              rgba: [255, 0, 0, 255],
            },
            outlineColor: {
              rgba: [255, 255, 255, 255],
            },
          },
        },
        outlineWidth: 2,
        width: 3,
      },
      model: {
          gltf: "../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
          scale: 1
      },
    },
  ];

  var dataSource = new Cesium.CzmlDataSource();
  dataSource.load(czml);
  viewer.dataSources.add(dataSource);
  viewer.zoomTo(dataSource);
});
1 Like
3

Hi scott，
Thanks for the reply.I think i have got it.
I learned a lot from the three problems you said.
Once again, thank you