2025-03-11 08:25:45 +00:00
|
|
|
<!--********************************************************************
|
|
|
|
|
* by jiawanlong
|
|
|
|
|
*********************************************************************-->
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
2025-03-19 03:00:22 +00:00
|
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
|
|
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
2025-03-11 08:25:45 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
|
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
|
|
|
|
|
const viewer = new Cesium.Viewer('map', {
|
|
|
|
|
geocoder: false,
|
|
|
|
|
homeButton: false,
|
|
|
|
|
sceneModePicker: false,
|
|
|
|
|
baseLayerPicker: false,
|
|
|
|
|
navigationHelpButton: false,
|
|
|
|
|
animation: false,
|
|
|
|
|
timeline: false,
|
|
|
|
|
fullscreenButton: false,
|
|
|
|
|
creditContainer: document.createElement("div")
|
|
|
|
|
});
|
|
|
|
|
// 开启帧率
|
|
|
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class TrackMatte {
|
|
|
|
|
constructor(val) {
|
|
|
|
|
this.viewer = val.viewer;
|
|
|
|
|
this.id = val.id;
|
|
|
|
|
this.shortwaveRange = val.shortwaveRange;
|
|
|
|
|
this.longitude = val.position[0],
|
|
|
|
|
this.latitude = val.position[1],
|
|
|
|
|
this.position = Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
val.position[0],
|
|
|
|
|
val.position[1],
|
|
|
|
|
);
|
|
|
|
|
this.heading = 0;
|
|
|
|
|
this.positionArr = this.calcPoints(
|
|
|
|
|
val.position[0],
|
|
|
|
|
val.position[1],
|
|
|
|
|
val.shortwaveRange,
|
|
|
|
|
0
|
|
|
|
|
) //储存脏数据
|
|
|
|
|
this.addEntities()
|
|
|
|
|
}
|
|
|
|
|
addEntities() {
|
|
|
|
|
let entity = this.viewer.entities.add({
|
|
|
|
|
id: this.id,
|
|
|
|
|
position: this.position,
|
|
|
|
|
wall: {
|
|
|
|
|
positions: new Cesium.CallbackProperty(() => {
|
|
|
|
|
return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr);
|
|
|
|
|
}, false),
|
|
|
|
|
material: new Cesium.Color.fromCssColorString("#00dcff82"),
|
|
|
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
|
|
|
|
0.0,
|
|
|
|
|
10.5e6
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
ellipsoid: {
|
|
|
|
|
radii: new Cesium.Cartesian3(
|
|
|
|
|
this.shortwaveRange,
|
|
|
|
|
this.shortwaveRange,
|
|
|
|
|
this.shortwaveRange
|
|
|
|
|
),
|
|
|
|
|
maximumCone: Cesium.Math.toRadians(90),
|
|
|
|
|
material: new Cesium.Color.fromCssColorString("#00dcff82"),
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: new Cesium.Color.fromCssColorString("#00dcff82"),
|
|
|
|
|
outlineWidth: 1,
|
|
|
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
|
|
|
|
0.0,
|
|
|
|
|
10.5e6
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.addPostRender()
|
|
|
|
|
}
|
|
|
|
|
addPostRender() {
|
|
|
|
|
this.viewer.clock.onTick.addEventListener(() => {
|
|
|
|
|
this.heading += 10.0;//可调节转动速度
|
|
|
|
|
this.positionArr = this.calcPoints(
|
|
|
|
|
this.longitude,
|
|
|
|
|
this.latitude,
|
|
|
|
|
this.shortwaveRange,
|
|
|
|
|
this.heading
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
calcPoints(x1, y1, radius, heading) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var m = Cesium.Transforms.eastNorthUpToFixedFrame(
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(x1, y1)
|
|
|
|
|
);
|
|
|
|
|
var rx = radius * Math.cos((heading * Math.PI) / 180.0);
|
|
|
|
|
var ry = radius * Math.sin((heading * Math.PI) / 180.0);
|
|
|
|
|
var translation = Cesium.Cartesian3.fromElements(rx, ry, 0);
|
|
|
|
|
var d = Cesium.Matrix4.multiplyByPoint(
|
|
|
|
|
m,
|
|
|
|
|
translation,
|
|
|
|
|
new Cesium.Cartesian3()
|
|
|
|
|
);
|
|
|
|
|
var c = Cesium.Cartographic.fromCartesian(d);
|
|
|
|
|
var x2 = Cesium.Math.toDegrees(c.longitude);
|
|
|
|
|
var y2 = Cesium.Math.toDegrees(c.latitude);
|
|
|
|
|
return this.computeCirclularFlight(x1, y1, x2, y2, 0, 90);
|
|
|
|
|
}
|
|
|
|
|
computeCirclularFlight(x1, y1, x2, y2, fx, angle) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let positionArr = [];
|
|
|
|
|
positionArr.push(x1);
|
|
|
|
|
positionArr.push(y1);
|
|
|
|
|
positionArr.push(0);
|
|
|
|
|
var radius = Cesium.Cartesian3.distance(
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(x1, y1),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(x2, y2)
|
|
|
|
|
);
|
|
|
|
|
for (let i = fx; i <= fx + angle; i++) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let h = radius * Math.sin((i * Math.PI) / 180.0);
|
|
|
|
|
let r = Math.cos((i * Math.PI) / 180.0);
|
|
|
|
|
let x = (x2 - x1) * r + x1;
|
|
|
|
|
let y = (y2 - y1) * r + y1;
|
|
|
|
|
positionArr.push(x);
|
|
|
|
|
positionArr.push(y);
|
|
|
|
|
positionArr.push(h);
|
|
|
|
|
}
|
|
|
|
|
return positionArr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let trackMatte = new TrackMatte({
|
|
|
|
|
viewer: viewer,
|
|
|
|
|
id: 1,
|
|
|
|
|
shortwaveRange: 100000.0,
|
|
|
|
|
position: [-75, 39],
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
viewer.camera.setView({
|
|
|
|
|
destination: Cesium.Cartesian3.fromDegrees(-75, 39, 700000.0)
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
