首先我们拿到经纬度点,然后做了一下处理。
//生成路线
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;
},