Cesium汽车视角跟随
2021-12-22 本文已影响0人
武汉前端阿杰1001
a.gif
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./Cesium/Cesium.js"></script>
<link href="./Cesium/Widgets/widgets.css" rel="stylesheet" />
</head>
<style>
* {
margin: 0;
padding: 0;
}
#cesiumContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#toolbar {
position: absolute;
background-color: white;
opacity: .8;
}
</style>
<body>
<div id="cesiumContainer" class="fullSize">
<div id="slider"></div>
</div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar"></div>
</body>
<script>
var tms = new Cesium.UrlTemplateImageryProvider({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
// fileExtension: 'jpg',
// maximumLevel: 7,
})
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: tms,
requestVertexNormals: true
})
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: '/json/tileset.json',
}));
var tj
tileset.readyPromise.then(function (tileset) {
tj = viewer.scene.primitives.add(tileset);
default_HeadingPitchRange = new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
// viewer.zoomTo(tileset, default_HeadingPitchRange);
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var delta_lng = 0, delta_lat = 0;
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
tj.style = new Cesium.Cesium3DTileStyle ({
color: {
conditions: [
['${height} >= 300', 'rgba(45, 0, 75, 0.5)'],
['${height} >= 200', 'rgb(102, 71, 151)'],
['${height} >= 100', 'rgb(170, 162, 204)'],
['${height} >= 50', 'rgb(224, 226, 238)'],
['${height} >= 25', 'rgb(252, 230, 200)'],
['${height} >= 10', 'rgb(248, 176, 87)'],
['${height} >= 5', 'rgb(198, 106, 11)'],
['true', 'rgb(127, 59, 8)']
]
}
});
}).otherwise(function (error) {
console.log(error);
});
function computeFlight(source) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(startTime, source[i].time, new Cesium.JulianDate);
var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
// 添加位置，和时间对应
console.log(time);
property.addSample(time, position);
}
return property;
}
var data = [{
longitude: 114.33215260505678,
dimension: 30.596778541164497,
height: 0,
time: 0
}, {
longitude: 114.35604572296144,
dimension: 30.57896245918393,
height: 0,
time: 600
}];
// 起始时间
var startTime = Cesium.JulianDate.fromDate(new Date());
// 结束时间
var stopTime = Cesium.JulianDate.addSeconds(startTime, 600, new Cesium.JulianDate());
var property = computeFlight(data);
viewer.clock.multiplier = 20;
// 循环执行
viewer.clock.stopTime = stopTime.clone();
viewer.timeline.zoomTo(stopTime, stopTime);
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
this.animateEntity = this.viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: startTime,
stop: stopTime
})]),
position: property,
orientation: new Cesium.VelocityOrientationProperty(property),
model: {
uri: "http://www.bigemap.com/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
scale: 10
},
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.YELLOW
}),
width: 0
}
});
viewer.trackedEntity = this.animateEntity
viewer.clock.shouldAnimate = true
this.animateEntity.viewFrom = new Cesium.Cartesian3(-200,400,200)
</script>
</html>
