您的当前位置:首页正文

cesium实现车辆行驶在路线上

2024-11-23 来源:个人技术集锦

首先我们拿到经纬度点,然后做了一下处理。

//生成路线 
let arr_a = wengjinxian[0].data.split(";").map(item => {

      return bd(...item.split(","));

    });

    let wjx = arr_a

      .join(",")

      .split(",")

      .map(item => {

        // console.log(item);

        return Number(item);

      });

    path(wjx, "wjx", 0);

然后我们根据经纬度点,把点位链接起来,

 //画线方法
    function path(res, res1, res2) {
      viewer.entities.add({
        id: res1 + res2,
        polyline: {
          // fromDegrees返回给定的经度和纬度值数组(以度为单位),该数组由cartesian3位置组成。
          positions: Cesium.Cartesian3.fromDegreesArray(res), //宽度
          width: 3, //线的样式 PolylineOutlineMaterialProperty:实线  PolylineDashMaterialProperty:虚线
          material: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.RED, //线条颜色
            width: 10, // outlineColor:Cesium.Color.GREEN, //实线的轮廓颜色
            outlineWidth: 0 //实线的轮廓宽度 // dashlength:5 //虚线的短划线长度
          })
        }
      });
    }

这时我们我把路线传入汽车移动的方法中,即可实现

runCar(){
 var line = viewer.entities.getById("wjx0");
            this.moveOnRoute(line, "car1");
} 

 //汽车移动=========================
    moveOnRoute(lineEntity, carId) {
      // console.log(lineEntity, "-----------");
      if (!lineEntity) return;
      var positions = lineEntity.polyline.positions.getValue();
      if (!positions) return;

      var allDis = 0;
      for (var index = 0; index < positions.length - 1; index++) {
        var dis = Cesium.Cartesian3.distance(
          positions[index],
          positions[index + 1]
        );
        allDis += dis;
      }

      var playTime = 10; //控制速度

      var v = allDis / playTime;
      // 起始时间
      var startTime = viewer.clock.currentTime;
      // 结束时间
      var endTime = Cesium.JulianDate.addSeconds(
        startTime,
        playTime,
        new Cesium.JulianDate()
      );
      var property = new Cesium.SampledPositionProperty();
      var t = 0;
      for (var i = 1; i < positions.length; i++) {
        if (i == 1) {
          property.addSample(startTime, positions[0]);
        }
        var dis = Cesium.Cartesian3.distance(positions[i], positions[i - 1]);
        var time = dis / v + t;
        var julianDate = Cesium.JulianDate.addSeconds(
          startTime,
          time,
          new Cesium.JulianDate()
        );
        property.addSample(julianDate, positions[i]);
        t += dis / v;
      }

      viewer.entities.add({
        // id: carId,
        position: property,
        orientation: new Cesium.VelocityOrientationProperty(property),
        model: {
          uri:
            // "../../../Cesium/Apps/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
            "../../../Cesium/Apps/SampleData/models/CesiumMan/Cesium_Man.glb",
          scale: 8,
          // 最小刻度
          minimumPixelSize: 50
          //heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        }
      });
      // 设置时钟当前时间
      viewer.clock.currentTime = startTime;
      // 时间速率,数字越大时间过的越快
      viewer.clock.multiplier = 1;
      viewer.clock.shouldAnimate = true;
      // 设置始终停止时间
      viewer.clock.stopTime = endTime;
    },

显示全文